Results 1 to 4 of 4

Thread: Editable column in array grid?

  1. #1

    Default Editable column in array grid?

    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.

    Code:
    /*!
     * 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
    Last edited by Condor; 15 Sep 2010 at 3:54 AM. Reason: Please post using [CODE] tags!

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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.

  3. #3
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246

    Default

    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
    Code:
    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) !

  4. #4

    Default

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

    Quote Originally Posted by Condor View Post
    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.

Similar Threads

  1. Replies: 2
    Last Post: 31 Jan 2008, 1:35 AM
  2. Array-grid example, maximum column allow is 21?
    By eric_sato in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 28 Mar 2007, 8:19 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •