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

Question

I have a 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'
        });
    }
});

---

and I added a new toolbar to above grid as shown below:

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

I want to set its position to top but it is coming below tbar of gridpanel.

Answer 1

For ExtJS3

Use insert() instead of add(), like this:

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

Working fiddle

For ExtJS4+

Use addDocked() instead of add(), like this:

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

Working fiddle