PDA

View Full Version : Gridpanel Row Disable



Voyd
25 May 2012, 6:39 AM
I have a grid panel that requires/uses a checkbox selection model. I have a combobox that acts as a "filter" for the grid store. If I have a grid of Apples and Oranges, and my combobox is set to "Oranges", I want to be able to make the oranges rows in the grid "grey" out and be unselectable. I still want them displayed. Since I am already using a selection model, I don't know if that limits what I can do. Any help would be appreciated.

redraid
25 May 2012, 8:09 AM
Use grid beforeselect event to disable selection, view getRowClass method to style row and view refresh() method for refresh grid.

Ext.onReady(function () {
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'
}
}
});

var disabled_name;

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: 'test',

viewConfig: {
getRowClass: function (record, index) {
// disabled-row - custom css class for disabled (you must declare it)
if (record.get('name') == disabled_name) return 'disabled-row';
}
},

listeners: {
beforeselect: function (sm, record) {
if (record.get('name') == disabled_name) return false;
}
},
tbar: [
{
text: 'Test',
handler: function (btn) {
var grid = btn.up('gridpanel');

disabled_name = 'Bart';
grid.view.refresh();
}
}
]
});
});

Voyd
25 May 2012, 9:37 AM
That worked great. BUT, since i am using a checkbox selection model, if fails to disable or gray out that cell. Is there anyway to get after it as well?

redraid
25 May 2012, 10:03 AM
Example with checkbox sel model:


Ext.onReady(function () {
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'
}
}
});

var disabled_name;

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),

viewConfig: {
getRowClass: function (record, index) {
// disabled-row - custom css class for disabled (you must declare it)
if (record.get('name') == disabled_name) return 'disabled-row';
}
},

selModel: Ext.create('Ext.selection.CheckboxModel'),

listeners: {
beforeselect: function (sm, record) {
if (record.get('name') == disabled_name) return false;
},
selectionchange: function (sm, selected) {
// deselect disabled records - checkAll checkbox supress beforeselect event
if (selected.length > 0) {
Ext.Array.each(selected, function (record) {
if (record.get('name') == disabled_name) {
// deselect
sm.deselect(record, true);
}
});
}
}
},
tbar: [
{
text: 'Test',
handler: function (btn) {
var grid = btn.up('gridpanel');

disabled_name = 'Bart';
grid.view.refresh();
}
}
]
});
}); ?

css:


.disabled-row .x-grid-cell {
background-color: gray !important;
}?

demo: http://jsfiddle.net/3tQvT/

Voyd
25 May 2012, 10:23 AM
Thank you for your help. I went to your example, and I see you gray out a row and make it unclickable. But I do not see you doing anything to the checkbox. I would like to gray that out as well. Furthermore, the selection models "selectAll" feature overrides your disabling.

scottmartin
25 May 2012, 11:00 AM
You would need to change the image for that row: .x-grid-row-checker, .x-column-header-checkbox
background-image: url('../../resources/themes/images/default/grid/unchecked.gif');

Scott.