View Full Version : How to add a button to to a column in a grid

15 Mar 2011, 5:23 AM
Hello all!
First of all this is my first post on this forum, so if I have missed something I am sorry.

I have been using the following post to try and get a button to appear in each record of a grid panel. I use a custom renderer function, which then calls a function to create the button. However when I run the code all the of elements of the column are visible except the button. If I check the console in firebug I get the following information. I have search the forum and cannot find anything quite right. Forgive if my search terms are not producing the correct results, and I have read the grid FAQ. So thanks in advance for any and all help given.


Uncaught TypeError: Function.prototype.apply: Arguments list has wrong type
(anonymous function)


Custom renderer function:

renderCell:function(val, x, record){
var contentId = Ext.id();
Ext.getCmp('bookBagGridPanel').createGridButton.defer(1, Ext.getCmp('bookBagGridPanel'), contentId);

return'<div class="search-book-cover" id="book-bag-gridpanel-bookcover">' +
'<img src="http://covers.openlibrary.org/b/isbn/'+record.data.isbn+'-L.jpg" width="120" height="170"/></div>' +
'<div id="book-bag-gridpanel-title-author"><p>' + record.data.title +'</p><p id="book-bag-gridpanel-author">Author: ' +
record.data.author + '</p></div><div id="' + contentId + '"></div>'

Button creation function:

createGridButton : function( value, id) {
//return 'Hello pjh...'
return new Ext.Button( {
renderTo: id,
text : 'Some text...',
handler: function(){alert('Will I ever see this?')},
scope : this

15 Mar 2011, 6:23 AM
The best solution (for me) is to use Ext.ux.grid.RowActions plugin. I have used it and it works perfectly.

16 Mar 2011, 5:11 AM
Thanks for your reply. It turns out I was not using the method defer correctly.THe line of code below should have been written as the following line..

Ext.getCmp('bookBagGridPanel').createGridButton.defer(1, Ext.getCmp('bookBagGridPanel'), contentId);

Ext.getCmp('bookBagGridPanel').createRemoveButton.defer(10, this, [val, contentId, record]);

Once again thanks for your reply!