I need to render a button in a GridPanel cell base on the value of that cell, like the screenshot
So, for the “Install” column I need to check for value of the Registered column, if Yes then it should create “ReInstall” button, otherwise create “Install” button, here is my snippet
//...
,{
header: 'Registered',
dataIndex: 'registered',
align: 'center',
width: 100,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (record.data.registered)
return '<img src="images/yes.png" />';
else
return '<img src="images/no.png" />';
}
},{
header: 'Install',
align: 'center',
renderer: renderInstall,
dataIndex: 'registered',
width: 100
}
//....
// Renderer function
function renderInstall(value, id, r)
{
var id = Ext.id();
if (r.data.registered == false)
{
createGridButton.defer(1, this, ['Install', id, r]);
return('<div id="' + id + '"></div>');
}else
{
createGridButton.defer(1, this, ['ReInstall', id, r]);
return('<div id="' + id + '"></div>');
}
}
function createGridButton(value, id, record) {
new Ext.Button({
text: value
,iconCls: IconManager.getIcon('package_add')
,handler : function(btn, e) {
// do whatever you want here
}
}).render(document.body, id);
} |
Hope that may save time for some of you!
Related posts:
This is very nice. Don’t mind if I use it myself I hope. Thanks
Thank you very much, you saved me a lot of work
Hi,
I’m new to grids, and have been asked to add this functionality to an existing grid. The issue I have is that the grid cell doesn’t contain a button. The bit I don’t understand is how the id (created by Ext.id()) is able to access the correct cell. In the grid, shouldn’t it be using the id passed into the renderer. Also is there any way to get the ext grid to give every cell an id.
Thanks
John
Please delete my last comment, I have just figured it out. Thanks for a great solution.
Works for me. Great job. It did help me.
Thanks
Rafa?
Very great job. Did help me a lot. Thanks.
Does not work for me, displays “” text instead of a button. Renderer for images in the cells doesn’t work too – displays html text instead of icon. BTW, what is IconManager? I can’t find it in ExtJS, I use ExtJS v.3.1.1.
Mike
just replace
turn(‘<div id=”‘ + id + ‘”></div>’);
with this:
return(”)
This worked great for me, except for one thing.
In IE all the time, and in Firefox if I specify any width other than width:auto, I get a corruption of the display of the button.
The left and right edge of the button (just the x-btn-ml and x-btn-mr elements that make up the button) repeat over and over and over, so that they extend to fill the grid cell, even if I stretch the cell. There in the middle of it is a perfectly rendered button, but with those endlessly repeating edges. The button itself always seems to take the same percentage of the cell, so that even if I shrink the column, the same percentage is occupied by this repeating pattern left and right.
Thoughts? Did you encounter this yourself?
Great job. But I got an error:
Uncaught TypeError: Object function
createGridButton(value, id, record) {
new Ext.Button({
text: value
,iconCls: IconManager.getIcon(‘package_add’)
,handler : function(btn, e) {
// do whatever you want here
}
}).render(document.body, id);
} has no method ‘defer
Only text like “” is displayed in the cell of the gridpanel. Any help would be highly appreciated.
Thanks in advance
Hi i tried the code in EXT JS 2 and it doesn’t work it displays only but the button don’t appears
Great post, helped me understand extjs rendering in general!
Thanks a lot. Very useful post.
It’s not clear to me what advantage this offers over Ext.grid.ActionColumn. Also, what happens to all of the DOM objects you create here if the user does a column sort, or a filter? ExtJS will create a new table, but all of the objects previously created will not get destroyed, you will just create new ones.
Hello,
Sorry but i am missing something :’(
Where do you make the declaration of the function renderInstall(value, id, r),and the function createGridButton(value, id, record) to have the benefit of “createGridButton.defer”
thank you !!!
genius! Thank you! This is the most elegant solution I’ve found to the issue of presenting a component in the grid column.
YESSS!!! tnx
Here an example updated for Ext JS 4.1
function renderButtonCell(value, metaData, record, rowIndex, colIndex, store,
view)
{
var id = Ext.id();
Ext.Function.defer(function()
{
new Ext.Button(
{
text : 'Add',
handler : function(btn, e)
{
alert(record.get('id') + ' - ' + record.get('Description'));
}
}).render(document.body, id);
}, 50);
return ('');
}
Ext.onReady(function()
{
// Create data store
Ext.create('Ext.data.Store',
{
storeId : 'products',
fields : [ 'id', 'Description', 'ProductCode', 'ImageFilename' ],
data :
{
'items' : [
{
'id' : '1',
'Description' : 'Apples',
'ProductCode' : '123',
'ImageFilename' : '123.jpg'
},
{
'id' : '2',
'Description' : 'Oranges',
'ProductCode' : '456',
'ImageFilename' : '456.jpg'
},
{
'id' : '3',
'Description' : 'Carrots',
'ProductCode' : '789',
'ImageFilename' : '789.jpg'
} ]
},
proxy :
{
type : 'memory',
reader :
{
type : 'json',
root : 'items'
}
}
});
// Create grid
Ext.create('Ext.grid.Panel',
{
title : 'Products',
store : Ext.data.StoreManager.lookup('products'),
renderTo : Ext.getBody(),
columns : [
{
text : 'id',
dataIndex : 'id'
},
{
text : 'Description',
dataIndex : 'Description',
},
{
text : 'ProductCode',
dataIndex : 'ProductCode'
},
{
text : 'ImageFilename',
dataIndex : 'ImageFilename'
},
{
renderer : renderButtonCell
} ]
});
});