View Full Version : Buttons added over the grid columns takes time to render

15 Mar 2012, 5:25 PM
Hi All,

I have a grid which have two columns. I have added buttons to one of the column using following code.

xtype: 'grid',
id: 'my-grid',
autoscroll: true,
scroll: 'vertical',
padding: '5 5 5 5',
flex: 1,
viewConfig: { emptyText: '<div style="padding:8px;">No attributes found...</div>' },
{ header: 'Name', dataIndex: 'Name', flex:1 },
{ dataIndex: 'ID', renderer: MyApp.common.RendererHelper.renderButtonForGrid }

Then in the RendererHelper file:

renderButtonForGrid : function (value, id, record) {
var id = Ext.id();
Ext.Function.defer(MyApp.common.RendererHelper.createButtonForAddRows, 1, this, [id, record]);
return ('<div align="center" id="' + id + '"></div>');

createButtonForAddRows: function (id, record) {
new Ext.Button({
id: record.data.ID,
listeners: {
beforerender: function () {

handler: function (btn, e) {
}).render(document.body, id);

All this is working fine functionally. But when i have 30 odd records in the grid, button takes while to render. The performance is even worst in IE which takes even more time.

kindly suggest ways to fix it. Or let me know if there are any work around. Is there any pulgin available to add the buttons to the grid.

Thanks in advance

16 Mar 2012, 11:32 AM
You could use Action column instead.