PDA

View Full Version : Add Buttons to each row in Grid - Problem for many records?



shaoen01
28 Jan 2012, 8:24 PM
Hi All,

I have my own grid loading data from mysql database table. I have about more than 700 records that will be loaded. I tested the grid with and without the button on each row, and the latter speeds up the scrolling. I am unable to scroll down the grid if buttons are added on each row. I am using paging on my grid with 50 records limit per page.

Any suggestions on how i should be handling this? Should i change the way i am adding buttons on each row? Thanks for your help in advance!

Snippet of adding each button per row:


{
header: 'Address',
width: 90,
renderer: function(value, metadata, record) {
//Need to use contentId to prevent duplicate button rendered
var contentId = Ext.id();
var divid="add_"+record.get("userid");
// executes after 2 seconds:
Ext.Function.defer(createGridButton, 500, this, ["Manage", divid, record,"icon-grid","Address",contentId]);
return('<div id="' + contentId + '"></div>');

}
}


Create button:


//Create button in grid cell
function createGridButton(value, divid, record,iconname,buttonOwner,contentId) {
new Ext.Button({
id: divid,
itemId: divid,
text: value,
iconCls: iconname,
handler : function(btn, e) {

}
}).render(document.body, contentId);


}

findajit
28 Jan 2012, 8:43 PM
You might be better of creating the <img> tag and returning that from the renderer. Intercept the click handler on the grid and see if the target contains the image. If so, call the handler function and pass the row and column number to it. Additionally, you can as well pass the record object to the handler.

shaoen01
28 Jan 2012, 11:54 PM
You might be better of creating the <img> tag and returning that from the renderer. Intercept the click handler on the grid and see if the target contains the image. If so, call the handler function and pass the row and column number to it. Additionally, you can as well pass the record object to the handler.

That was my exact thoughts. I tried to edit the renderer to call a JS method to handle the onclick event just like below, but test123() method never gets called. Nothing happens really. If i put a proper value in href field, it works fine. So does this mean we can't call another JS method on the same page?



function test123(){
window.alert("test");

}




{
header: 'Address',
width: 90,
renderer: function(value, metadata, record) {
return '<a onclick=test123();return false;" href="#" target="_blank" ><img src="resources/images/icon-manage.png" width="20" align="center"></a>';
}
}

skirtle
29 Jan 2012, 12:08 AM
You're missing a double-quote after the onclick=.

That's quite an inefficient way to register listeners. You'd be better using a delegated approach, see the docs for delegate here:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-on

shaoen01
29 Jan 2012, 12:32 AM
You're missing a double-quote after the onclick=.

That's quite an inefficient way to register listeners. You'd be better using a delegated approach, see the docs for delegate here:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-on (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.Element-method-on)

skirtle:
Even fixing the missing double quote does not work. So i did this way that is pretty straightforward:



function imgManageIcon(value, metadata, record){
return '<a href="#" ><img src="resources/images/icon-manage.png" width="20" align="center"></a>';

}


{
header: 'Address',
width: 90,
renderer: imgManageIcon
}




listeners: {
'cellclick': function (view, cell, cellIndex, record, row, rowIndex, e) {
var colHeaderName=view.panel.headerCt.getHeaderAtIndex(cellIndex).text;
ManageExtWindow(colHeaderName,record.get('userid'))

}

}


Hopefully, this help others who is facing this issue too. Thanks!