Editable column in array grid?

[jaisonjames]

I am a beginner in extjs.
Can someone help me make a specific editable column in a normal array grid? Screenshot and using code are here.

/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // sample static data for the store
    var myData = [
        ['Team Member','Resources','Employees/Contractors','Text','Sequence','Asceending']
    ];

    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'object'},
           {name: 'field'},
           {name: 'displayName'},
           {name: 'type'},
           {name: 'sorttype'},
           {name: 'direction'}
        ]
    });

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

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'cate-field',header: 'Object', sortable: true},
            {header: 'Field', sortable: true},
            {header: 'Display Name', sortable: true},
            {header: 'Type', sortable: true},
            {header: 'Sort Type', sortable: true},
            {header: 'Direction', sortable: true}
        ],
        stripeRows: true,
        autoExpandColumn: 'cate-field',
        height: 175,
        width: 690,
        title: 'Category Field (Axis)',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
    
    // render the grid to the specified div in the page
    grid.render('cc-fs-right-r2');
});

Thanks

[Condor]

For an editable grid you need to:
1. Change the GridPanel to an EditorGridPanel.
2. Define an editor for every column that should be editable.

[laurentParis]

With normal GridPanel, is not possible to edit value into cell
so, ExtJs extend GridPanel with EditorGridPanel to doing that!

in your case, for edit only third column

Ext.onReady(function () {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // sample static data for the store
    var myData = [
        ['Team Member', 'Resources', 'Employees/Contractors', 'Text', 'Sequence', 'Asceending']
    ];

    // create the data store
    var store = new Ext.data.ArrayStore(
    {
        fields: [
        {
            name: 'object'
        }, {
            name: 'field'
        
        }, {
            name: 'displayName'
        }, {
            name: 'type'
        }, {
            name: 'sorttype'
        }, {
            name: 'direction'
        }]
    });

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

    // create the Grid
    var grid = new Ext.grid.EditorGridPanel(
    {
        store: store,
        columns: [
        {
            id: 'cate-field',
            header: 'Object',
            sortable: true
        }, {
            header: 'Field',
            sortable: true,
            dataIndex: 'field',
            editor: new Ext.form.TextField({
            })
        }, {
            header: 'Display Name',
            sortable: true
        }, {
            header: 'Type',
            sortable: true
        }, {
            header: 'Sort Type',
            sortable: true
        }, {
            header: 'Direction',
            sortable: true
        }],
        stripeRows: true,
        autoExpandColumn: 'cate-field',
        height: 175,
        width: 690,
        title: 'Category Field (Axis)',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'
    });

    // render the grid to the specified div in the page
    grid.render(document.body);
});

ps: don't forget to use 'dataIndex' and use tag code (=> more easy to read) !

[jaisonjames]

Excellent tips. Lot of thanks Could you suggest any nice tutorial for beginners.

For an editable grid you need to:
1. Change the GridPanel to an EditorGridPanel.
2. Define an editor for every column that should be editable.