PDA

View Full Version : Enable-Disable cells of single column in Ext.grid.EditorGridPanel



bhagwatgurle
2 Oct 2012, 11:03 PM
Hi All,
I have EditorGridPanel and I want Enable-disable cell values depending on other column value of same Row and I am using Extjs 3. As I tried to find out a solution on Google there is I found that
I can able to use RowEditing plug-in. I don't want to use this plug in, so is there another way to do this?

And I want to do this enable and disable when click on Edit button, so I can able to do this on "beforeedit" event.
here I am getting issue that how I can able to access one particular cell object and how I can able to enable and disable that cell object. I know there is method to enable-disable whole column of
grid but is there any method which returns that particular cell object and enable-disable that cell object?

Is anyone knows is there any way to do this, please let me know, Thanks.

scottmartin
3 Oct 2012, 7:37 PM
See if the following helps:



Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody(),
listeners: {
beforeedit: function(grid){
if (grid.field === 'price') {
return false;
}
//console.log(grid);
}
}
});

});


Scott.

bhagwatgurle
3 Oct 2012, 11:03 PM
Hi Scott,
Thanks for reply, but this will disable whole Row. I want to disable specific cell. So that in one column some cell values can be disable and some values can enable depending on other column value of same row.

Updated:

As I previously considering "beforeedit" event is fire for row but it's fire for each cell which we click. So I get field name first as "var fldname= e.field;" and then I am returning false for matched field to make it disable for Ex:

onBeforeEdit : function(e) {
var fldname= e.field;
if(fldname == "FirstName" || fldname = "LastName"){
return false;
}

so it disables "FirstName" and "LastName" columns of grid.

scottmartin
4 Oct 2012, 7:28 AM
As shown in my code, it only disables the price field. Glad you have it working.

Scott.