PDA

View Full Version : Datagrid: disable row based on field value



john316
9 May 2014, 6:08 AM
I've got a data grid that returns a set of "people" in a db table/store. I'm currently filtering the store with a "type" field to show only a specific set of people but I've been asked to change that so that all people show in the grid, and simply disable the rows where the "type" is a specific value. Can anyone help with this please?

My current store:

var store = Ext.create('Ext.data.Store',{
model: Ext.getStore('Persons').model
});

scottmartin
9 May 2014, 6:31 AM
Can you define what you mean by disable? From editing or from selecting, or?

john316
9 May 2014, 6:58 AM
Hi Scott, thanks for replying. I wondered how in-depth I needed to be in my initial post, this is my first post since purchasing a developer license.

In my controller, I specify the following:

init: function() {
this.control({
'clientlist grid': {itemdblclick: this.manageClient},
});

Then, in my data grid, when the user double-clicks on a row, it retrieves the "manageClient" view referenced in the controller. I need to somehow disable that double-click event, as well as grey-out the row if the record's "type" field is set to a specific value. This will allow the user to see that the record exists, but based on its type, it can not be modified from this data grid view. Does that make sense? Thanks again.

scottmartin
9 May 2014, 7:29 AM
See if the following will help. You can convert it over to your controller simply enough
5n1

john316
9 May 2014, 10:16 AM
Scott, that worked perfectly. Thanks so much!

walid_mellouli
7 Aug 2015, 8:39 AM
In my case, I have a "checkcolumn" in my grid, and I need to disable this checkcolumn from edit (exactly what you did in beforeedit listener).
But when I add a checkcolum in your example, it's all the time editable, even if beforeedit return false.
This is the code I modified (I added a new field "checked" of type checkcolumn):


Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['checked', 'type', 'name', 'email', 'change'],
data : {'items' : [
{ 'checked' : true, 'type' : 2, 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'checked' : false, 'type' : 2, 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'checked' : true, 'type' : 1, 'name' : 'Homer', 'email' : 'homer@simpsons.com', 'change' : 23 },
{ 'checked' : false, 'type' : 1, 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1,
listeners: {
beforeedit: function(ed, rec) {
if (rec.record.get('type') === 1 ) { // no inline grid editing for parents
return false;
}
}
}
});

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Type', dataIndex : 'type' },
{ header : 'Name', dataIndex : 'name', editor : { xtype : 'textfield' } },
{ header : 'Email', dataIndex : 'email', flex : 1, editor : { xtype : 'textfield' } },
{ header : 'Change', dataIndex : 'change', editor : { xtype : 'textfield' } },
{ header : 'Checked', xtype: 'checkcolumn', dataIndex : 'bool', editor : { xtype : 'checkboxfield' } }
],
height : 500,
width : 400,
renderTo : Ext.getBody(),

viewConfig: {
stripeRows: false,
getRowClass: function(record) {
// view app.css tab below
return record.get('name') === 'Homer' ? 'dead-row' : '';
}
},

plugins : [ cellEditing ],

listeners : {
beforeselect: function(sm,record){ // or use beforeitemdblclick
console.log(record.get('name'));
if (record.get('name') === 'Homer') { // no selecting homer record
return false;
}
}
}
});

});


Is there a solution for this problem ?