PDA

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



waqar
9 Mar 2012, 3:02 AM
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
9 Mar 2012, 5:25 AM
any help guys ?

BUMP!!!

burnnat
9 Mar 2012, 5:31 AM
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 (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.grid.Panel-cfg-dockedItems) config, and perhaps also the addDocked (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.grid.Panel-method-addDocked) and removeDocked (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.grid.Panel-method-removeDocked) methods.

waqar
9 Mar 2012, 6:45 AM
@ 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 (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.grid.Panel-method-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
9 Mar 2012, 6:51 AM
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
9 Mar 2012, 6:58 AM
@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
18 Apr 2012, 8:13 AM
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: