将工具栏添加到网格中，并将其位置设置在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 of gridpanel。

Answer 1

For ExtJS3

使用insert()而不是add()，如下所示：

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

工作小提琴

For ExtJS4+

使用addDocked()而不是add()，如下所示：

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

工作小提琴