Enable-Disable cells of single column in Ext.grid.EditorGridPanel

[bhagwatgurle]

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]

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]

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]

As shown in my code, it only disables the price field. Glad you have it working.

Scott.