PDA

View Full Version : how add dynamic button in grid panel column using renderer?



ps_arunkumar
14 Mar 2012, 6:04 AM
hi,

i am using extjs 4.0.2a.
i find this example on net http://www.rahulsingla.com/sites/default/files/content/blog/ExtJs-Components-in-GridPanel.htm

i try this one in extjs 4.0.2a but not work.

show this error in firebug
function () {var btn = new (Ext.Button)({renderTo: id, text: "Price: " + value});}.defer is not a function
[Break On This Error] }).defer(25);

i need button grid panel column and click that button show window(passing parameter to render grid inside window).

is it possible to do this?



(http://www.rahulsingla.com/sites/default/files/content/blog/ExtJs-Components-in-GridPanel.htm)

khmurach
14 Mar 2012, 7:43 AM
renderer: function (v, m, r) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('button', {
renderTo: id,
text: 'Edit: ' + r.get('name'),
width: 75,
handler: function () { Ext.Msg.alert('Info', r.get('name')) }
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}

Demo here http://ext4all.com/post/how-add-dynamic-button-in-grid-panel-column-using-renderer

ps_arunkumar
14 Mar 2012, 8:07 PM
Hi khmurach,

Thanks for your Reply. Its helpful to me.

Animal
7 Apr 2012, 3:55 AM
Bad idea. It will leave orphaned Button instances all over the place.

Use an ActionColumn

Cristian B.
25 Jun 2012, 2:37 AM
Animal, please supply an example for the ActionCommand that handles exactly as the code above. It seems that it's a often used feature, but a simple example is never to be found.

Animal
25 Jun 2012, 2:38 AM
The very first grid example, the simplest one has an ActionColumn in it.

Cristian B.
25 Jun 2012, 3:09 AM
Thanks, the example handled adding a actioncomand in two different ways, which was a bit confusing, but I figured it out now.

jason rogers
29 Nov 2012, 4:30 AM
Hi Animal,

I understand the problems behind


renderer: function (v, m, r) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('button', {
renderTo: id,
text: 'Edit: ' + r.get('name'),
width: 75,
handler: function () { Ext.Msg.alert('Info', r.get('name')) }
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}


And in my case it won't (or at least not in an as straight forwards way as above).

However I do need to find a way to put a button with icon and text in to the column and it doesn't seem possible with the standard Ext action column.

What are your suggestions ?