PDA

View Full Version : Adding Toolbar / Topbar / Docked Items dynamically



hermann.s
26 Aug 2013, 7:39 AM
Greetings,

I have the following custom GridPanel class. I want to be able to add Topbar / Toolbar / Docked Items after I have instantiated an object, and not through a predefined config.


Ext.define('Base.GridPanel', {
extend: 'Ext.grid.Panel',

tbar: [{ xtype: 'textfield', emptyText: 'Case ID', width: 90 }, { xtype: 'button', text: 'Open Case' }, { xtype: 'button', text: 'Refresh List' }],
dockedItems: [{ xtype: 'pagingtoolbar', dock: 'bottom' }],

constructor : function(config)
{
this.initConfig(config);
},

constructor: function(id, title, columns)
{
this.id = id;
this.title = title;
this.columns = columns;

this.callParent();
}
});


For example, what would I have to do after creating a GridPanel, to achieve the same results if the tbar and dockedItems properties weren't already in the config?


var myGridPanel = new Base.GridPanel('MyGridPanel', 'Test', columns)

Phil Guerrant
26 Aug 2013, 8:01 AM
Use the addDocked() (http://docs.sencha.com/extjs/#!/api/Ext.panel.Panel-method-addDocked) method



panel.addDocked({
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'button'
}]
});


Also I noticed in your example you have two constructors. Not sure what your intent was there, but JavaScript does not support overloaded methods. The second constructor will simply overwrite the first one.

hermann.s
26 Aug 2013, 8:36 AM
Use the addDocked() (http://docs.sencha.com/extjs/#!/api/Ext.panel.Panel-method-addDocked) method
Also I noticed in your example you have two constructors. Not sure what your intent was there, but JavaScript does not support overloaded methods. The second constructor will simply overwrite the first one.

Thank you.