将工具栏添加到网格并将其位置设置在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'
        });
    }
});

我在toolbar之上添加了一个新的grid，如下所示：

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

我想将其位置设置为顶部，但它低于tbar的{​​{1}}。

Answer 1

对于ExtJS3

使用insert()代替add()，如下所示：

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

Working fiddle

对于ExtJS4 +

使用addDocked()代替add()，如下所示：

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

Working fiddle