PDA

View Full Version : [SOLVED] Toolbar.add - "not a function"



StuartAshworth
11 Aug 2009, 7:45 AM
Hi All

I am extending an extension of a GridPanel which has 3 buttons already defined in the Top Toolbar. I want to add additional buttons in my new extension, either through a method or through the configuration. What is the best way to do this?

I have tried using..



this.getTopToolbar().add({..});


But it is coming up with ".. not a function" in firebug. The Docs say that the getTopToolbar method returns a Toolbar object which has an add method but it doesnt seem to be working.

Any ideas?

Cheers
Stuart

VinylFox
11 Aug 2009, 7:48 AM
Its tough to tell without you providing a code sample, but I would guess that your trying to get the toolbar too early, before it has been rendered.

Post a code sample so we can actually help you.

StuartAshworth
11 Aug 2009, 7:56 AM
OK, no problem here some snippets.

This is the first extension which is a basic CRUDGrid (extending Ext.GridPanel), this is the initComponent method...



...
initComponent: function(){

Ext.apply(this, {
border: false,
viewConfig: {forceFit: true},
loadMask: true,
store: this.store,
cm: this.columnModel,
selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
tbar: [{
xtype: 'buttongroup',
columns: 3,
title: 'Actions',
items: [{
text: 'Add ' + this.messageDescription,
tooltip: 'Add New ' + this.messageDescription,
scale: 'medium',
iconAlign: 'top',
iconCls: 'addItem',
handler: this.addToolBar.createDelegate(this),
width: 50
},{
text: 'Edit ' + this.messageDescription,
tooltip: 'Edit the Selected ' + this.messageDescription,
scale: 'medium',
iconAlign: 'top',
iconCls: 'editItem',
handler: this.editAction.createDelegate(this),
width: 50
},{
text: 'Delete',
tooltip: 'Delete the Selected ' + this.messageDescription,
scale: 'medium',
iconAlign: 'top',
iconCls: 'deleteItem',
handler: this.deleteConfirm.createDelegate(this),
width: 50
}]
},{
xtype: 'buttongroup',
columns: 1,
title: 'Refresh',
items: [{
text: 'Refresh',
tooltip: 'Refresh the Grid',
scale: 'medium',
iconAlign: 'top',
handler: this.refreshGrid.createDelegate(this),
iconCls: 'refreshGrid'
}]
}],
header: false
});
...


As you can see it has 4 buttons (Add, Edit, Delete, Refresh)

I now want to extend this basic CRUD grid with a more specific one which allows other actions for the items in the grid so i want some new buttons.

First i tried to use the add method of the Toolbar component as mentioned above, like this...




initComponent: function(){

Ext.apply(this, {
...
});

// Call parent (required)
Ext.ux.PagesGrid.superclass.initComponent.apply(this, arguments);

this.getTopToolbar().add({
xtype: 'buttongroup',
columns: 1,
title: 'Refresh',
items: [{
text: 'Refresh',
tooltip: 'Refresh the Grid',
scale: 'medium',
iconAlign: 'top',
handler: this.refreshGrid.createDelegate(this),
iconCls: 'refreshGrid'
}]
});
}

...


This was to just add the Refresh button again for demonstration but when i try that (before or after the parent initComponent call) it errors with the 'is not a function' error.

Give me a shout if you need any more info.

Cheers
Stuart

VinylFox
11 Aug 2009, 8:52 AM
Ok, so whats happening is that your toolbar has not been rendered yet, so you will need to add your button from within a render event. Attaching a render listener to your main component and defering it 10ms should work fine. For example...

this.on('render', function(){
// add buttons n stuff
}, this, {defer: 10});

On a side note, you can scope your button so you dont have to use createDelegate...

handler: this.addToolBar,
scope: this

StuartAshworth
11 Aug 2009, 10:15 AM
excellent thanks very much - ill have a go at that in a minute.

Ah! i knew there must have been a better way than doing createDelegates all the time!

Thanks.

11 Aug 2009, 10:20 AM
I think the tbar is still an array or not defined. You can simplly push the items to the array if you needed to.

Why not just specify a tbar before the superclass initcomponent call?

StuartAshworth
11 Aug 2009, 10:54 AM
Thanks for the reply too Jay.

Ive added the line after the initComponent superclass call (it doesnt work before)...



this.getTopToolbar().push({
xtype: 'buttongroup',
columns: 1,
title: 'Refresh',
items: [{
text: 'Refresh',
tooltip: 'Refresh the Grid',
scale: 'medium',
iconAlign: 'top',
handler: this.refreshGrid.createDelegate(this),
iconCls: 'refreshGrid'
}]
});


Thanks for the help guys :)