[Ext JS 4.x] Adding more then one Toolbar to Grid/ panel

[waqar]

These days we are shifting our software from 3 to 4 in 3.1 we had :

/*
Ext.define('Application.ClientGrid', {   // for 4.x
    extend: 'Ext.grid.Panel',
*/
Application.ClientGrid= Ext.extend(Ext.grid.GridPanel, {  // for 3.x
mainInfoBar : '',
otherInfoBar : '',
..
..
 initComponent: function() {
        this.mainInfoBar = this.buildMainInfoBar();
        this.bbar = this.otherInfoBar;  // initialized bar
}
listeners: {
       render:function(thisObject,eOpts ) {
                        this.mainInfoBar.render(this.bbar);
}
}
}

But this donot work any more in 4.x
Error:

Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

My guess is that I dont see "render" function in toolbar ExtJs4 API is that the problem if yes then which new function is going to be used instead of this ? can some body please guide !!

any help will be appreciated!

Thanx
Wacky

[waqar]

any help guys ?

BUMP!!!

[burnnat]

Panels in 4.x use a "dockedItems" config property to specify the docked toolbars/components. This is, I believe, different from 3.x. I'd recommend reading the documentation for the dockedItems config, and perhaps also the addDocked and removeDocked methods.

[waqar]

@ burnnat: I tried the adddocked in my init function of grid panel, before that I tried adding toolbars like this:

This works super good:

    dockedItems: [
        Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),
        Ext.create( 'Application.MainOtherInfoBar',{dock: 'bottom'}),
    ],

but I wanted to use the addDocked function but it wont
work I call it this way :

Ext.define('Application.ClientGrid', {
    extend: 'Ext.grid.Panel',
    mode:'SINGLE',
    autoScroll : true,
  initComponent: function() {
    this.store = this.buildClientGridStore();
    this.columns = this.buildClientGridColumns();
    this.addDocked( Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),0);
    this.addDocked( Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),1);
}
.
..
}

Error in chrome:
Cannot call method 'insert' of undefined
Cannot read property 'xtype' of undefined


this.bbar works
this.addDocked gives error.

[burnnat]

You're overriding the initComponent() method of the grid panel, but you don't ever call the parent. I'm guessing that will cause problems for you with some members of the class not being initialized. Try doing something like this:

initComponent: function() {
    // initialize the variables first
    this.store = this.buildClientGridStore();
    this.columns = this.buildClientGridColumns();

    // make sure the parent class gets a chance to do *its* processing
    this.callParent();

    // now do your custom processing
    this.addDocked(/* ... */);
}

[waqar]

@Burnnat :
the Issue is solved , you are correct!

initComponent: function() {
    this.store = this.buildClientGridStore();
    this.columns = this.buildClientGridColumns();
//     Other button handles
    this.addBtn = this.buildAddButton();
//     Toolbars
    this.tbar = this.buildToolbar();
//     Init Parents
      this.callParent();
// add toobars
      this.addDocked( Ext.create( 'Application.StreamInfoBar',{dock: 'bottom'}),1);
      this.addDocked( Ext.create( 'Application.MainInfoBar',{dock: 'bottom'}),0);
  }

[johnshelly12]

You're overriding the initComponent() method of the grid panel, but you don't ever call the parent. I'm guessing that will cause problems for you with some members of the class not being initialized. Try doing something like this: