PDA

View Full Version : Click on text in cell



simon
30 Dec 2009, 6:53 AM
I have grid and I would like that when user click on link, function inside ext scope is executed. Any example. Probably something similar as extension for checkbox or button inside grid cell.



extFnc = function(value){
....
};


var cm = new Ext.grid.ColumnModel({
defaultSortable: true,
columns: [
expander,
{
header: "Prod. ID",
dataIndex: 'prodId',
width: 70,
renderer: function(value, md, record) {
return '<a href="javascript:void(0);" onclick="extFnc(\'x\');">'+value+'</a>';
}
]
})



Thanks, Simon

Condor
30 Dec 2009, 7:06 AM
Use:

renderer: function(value, md, record) {
return '<a href="javascript:void(0);" class="my-anchor">'+value+'</a>';
}

With:

grid.on('render', function(c){
c.getEl().on('click', function(e, t){
var value = t.innerHTML;
// do something with value
}, c, {delegate: 'a.my-anchor', stopEvent: true});
});

simon
30 Dec 2009, 8:15 AM
Thank you, it works.
Only problem is, that the value I need to get on click event is not the display value but some other value from the record. So, var value = t.innerHTML is not correct.
I need: var value=record.get('colx').


Do you have some page with explanation of function:
c.getEl().on('click', function(){}, c, {delegate:..})?

Thank you,
Simon

Animal
30 Dec 2009, 8:29 AM
Use the cellclick event.

Condor
30 Dec 2009, 8:37 AM
Yes, the cellclick event is probably easier (and you can still check if the target was the anchor).

ps. Without the cellclick event you would need to use:

grid.on('render', function(c){
c.getEl().on('click', function(e, t){
var row = grid.getView().findRowIndex(t);
if(row !== false){
var record = grid.getStore().getAt(row);
// do something with record
}
}, c, {delegate: 'a.my-anchor', stopEvent: true});
});

Animal
30 Dec 2009, 8:54 AM
It doesn't need to be an anchor. The OP was just doing what he'd seen done elsewhere without knowing why.

simon
31 Dec 2009, 12:14 AM
Thank you, it was exactly what I need. Do you maybe know for some page with explanation of your method({delegate: 'a.my-anchor', stopEvent: true}).

I didn't want to use cell click event because I have more elements in cell. And sometimes there is also anchor between them, whick click event I wanted to use.

Thank you for your help,
Simon

simon
31 Dec 2009, 12:35 AM
By the way, if you would use cellclick event, how would you know which item inside cell was clicked? If I read e.target it returns td, no matter which item I click.

thank you,
Simon