将工具栏添加到网格并将其位置设置在 Ext.grid.GridPanel 的 tbar 上方

Question

我有一个 grid:

ProjectListReportGrid = Ext.extend(Ext.grid.GridPanel, {
    iconCls: 'silk-grid',
    id: 'consolidatedReportGrid',
    frame: false,
    title: 'Project Team Reports[Team Summary Report]',
    initComponent: function () {

        this.viewConfig = {
            forceFit: true
        };

        this.tbar = this.buildBottomToolbar();
        ProjectListReportGrid.superclass.initComponent
            .call(this);
    },
    buildBottomToolbar: function () {
        teamSummaryReportButton = new Ext.Button({
            iconCls: 'teamsummaryreport',
            handler: this.onAdd,
            scope: this,
            name: 'Summary'
        });
    }
});

并且我在 grid 上面添加了一个新的 toolbar 如下所示：

consolidatedReportGrid.add(new Ext.Toolbar({
    width: 1300,
    id: 'remove',
    buttonAlign: 'center',
    tabPosition: 'top',
    items: [myRadioGroup]
}));

我想将其位置设置为顶部，但它低于 gridpanel 的 tbar。

Answer 1

对于 ExtJS3

使用insert() instead of add()，像这样：

grid.getTopToolbar().insert(0, new Ext.Toolbar({
    items: [
        new Ext.Button({
            text: 'Added button'
        })
    ]
}));

Working fiddle

对于 ExtJS4+

使用addDocked() instead of add()，像这样：

grid.addDocked(new Ext.Toolbar({
    items: [
        {
            xtype: 'button',
            text: 'Test add docked'
        }
    ]
}), 0);

Working fiddle

将工具栏添加到网格并将其位置设置在 Ext.grid.GridPanel 的 tbar 上方

Adding toolbar to grid and set its position above the tbar of Ext.grid.GridPanel

extjs3