PDA

View Full Version : Listen to cellclick for a link cell.



ragecf
14 Jul 2013, 10:42 PM
Hi, all

I want to listen to the cellclick event for the cell which data is rendered as a hypelink.
How to do this?Add a delegate? Thanks.




Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: myStore,
width: 400,
height: 200,
title: 'My Grid',
columns: [{
text: 'A',
width: 200,
dataIndex: 'a',
renderer: function(val){
return '<a href="#">' + val + '</a>'
}
}, {
text: 'B',
width: 200,
dataIndex: 'b'
}],

listeners: {
cellclick: function(view, td, colIndex, record, tr, rowIndex, e, eOpts) {
// How to listen the cellclick only for the link cell (column a), ingnore the cellclick event for normal cell (colum b)?

}


}


});

slemmon
16 Jul 2013, 12:03 PM
Something like this should work:



Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: {
fields: ['a'],
data: [{
a: 'a'
}]
},
width: 400,
height: 200,
title: 'My Grid',
columns: [{
text: 'A',
width: 200,
dataIndex: 'a',
renderer: function (val) {
return '<a href="#">' + val + '</a>'
}
}, {
text: 'B',
width: 200,
dataIndex: 'b'
}],


listeners: {
cellclick: function (view, td, colIndex, record, tr, rowIndex, e, eOpts) {
if (colIndex === 0) {
console.log('COL A CLICK ACTION');
}
}
}
});

ragecf
16 Jul 2013, 5:03 PM
Thanks.

But there is a lot of link cells in my grid not just column A. Now my solution is:


onCellClick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
if (e.target.tagName != 'A') {return false};
}


Any better solution?

evant
16 Jul 2013, 5:31 PM
That's a pretty reasonable solution.