PDA

View Full Version : beforedeselect not working when select is also used



KernelPanik
24 Jun 2013, 8:57 AM
This is similar to a recent post I deleted because of errors on my part.
For those that replied, Thank You.

For the example I am providing, I am trying to make the selected row gray and the row that was previously selected blue.

I can get the previously selected row blue by using beforedeselect.

If I add in select, then the beforedeselect does not work but the selected row does turn gray.

I have tried various forms of buffering and delays.


listeners: {
beforedeselect: function( dis, record, index, eOpts ){
var gview = Ext.getCmp('myGrid').getView();
gview.removeRowCls(index);
gview.addRowCls(index, 'blue-row');
},
select: function( dis, record, index, eOpts ){
var rview = Ext.getCmp('myGrid').getView();
rview.removeRowCls(index);
rview.addRowCls(index, 'gray-row');
}
}

css:


.blue-row .x-grid-cell {
background-color: #3399FF !important;
}
.gray-row .x-grid-cell {
background-color: #cdcdcd !important;
}


Thanks

slemmon
26 Jun 2013, 1:55 PM
Would have tried to just lead you to a solution, but didn't know how to articulate it. So, I made an example that I think does what you're wanting. Hope it helps.
http://jsfiddle.net/slemmon/pHNhA/

Select / Deselect logic


Ext.define('My.grid.LastSelectedPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.lastselectedpanel',


cls: 'last-selected',


initComponent: function () {
var me = this;


me.on({
viewready: function (grid) {
var view = grid.getView();
grid.on({
beforedeselect: function (dis, record, index, eOpts) {
if (grid.lastSelected) {
grid.lastSelected.removeCls('gray-row');
}
grid.lastSelected = Ext.get(view.getNode(record));
},
select: function (dis, record, index, eOpts) {
if (grid.lastSelected) {
grid.lastSelected.addCls('gray-row');
}
}
});
}
});


me.callParent(arguments);
}
});

Example store / grid instance




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


Ext.create('My.grid.LastSelectedPanel', {
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,
renderTo: Ext.getBody()
});



The CSS


.last-selected .x-grid-row-selected .x-grid-td
{
background-color: #3399FF;
color: white;
}
.gray-row .x-grid-cell {
background-color: #cdcdcd !important;
}

KernelPanik
27 Jun 2013, 6:51 AM
Thanks! I'll give it a try later today!

KernelPanik
28 Jun 2013, 8:12 AM
Worked like a champ!
Thanks for the help!