PDA

View Full Version : Disable row expand listener for check box in grid



jocatastar
15 May 2014, 8:30 PM
I have a grid and i have
selModel: { selType: 'checkboxmodel' }, in that. And also i am expanding row if i click on the rows. Now the problem is row is expanding if select check box also. I don't need that. I want the row to expand only when i click on the row other than check box. Please help

Johnny Major
16 May 2014, 6:04 AM
Here is something to get you started.



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
selModel: {
selType: 'checkboxmodel'
},
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : 'xxxx'
}],
renderTo: Ext.getBody(),
listeners : {
scope : this,
cellclick : function(cmp, td, cellIndex, record, tr, rowIndex, e, eOpts){
//only expand / collapse if user is not clicking selection checkbox
//
if (cellIndex != 0){
cmp.up('grid').plugins[0].toggleRow(rowIndex, record);
}
}
}
});

f.baron
16 May 2014, 7:51 AM
You can use the beforeitemclick event callback to stop the click event in that case.

For example:


listeners: {
beforeitemclick: function(grid, record, item, index, event) {
if (event.getTarget().className.indexOf('x-grid-checkcolumn') !== -1) {
return false;
}
}

}

jocatastar
26 Jun 2014, 8:52 PM
Hi baron,
If i do the way that you mentioned it is stopping the event but check-box is not in selected mode.

I want check-box to be in selected mode and row should not be expanded

f.baron
26 Jun 2014, 11:00 PM
Hi!
You could force selection inside the 'if' statement, so if the click is blocked you can set selection anyway using gird.getSelectionModel().select()/gird.getSelectionModel().deselect().