ExtJS 3.4 GridPanel with etitable columns

Question

I try to implement in ExtJs 3.4 a gridpanel with editable columns. I tried to adapt this example from ExtJS but I cant get it work.

The stored values in the database are shown and as well the add button is working. But if I click in one cell (for example column name) nothing happens, but I would expect, that the cell is 'opened' so that I can enter a new value.

Any suggestions?

CODE SNIPPET

var fm = Ext.form;

var editGrid = new Ext.grid.GridPanel({
    id: 'editTable',
    title: 'Edit table SAP_SYSTEM',
    header: true,
    renderTo: 'contentDivSystem',
    height: 350,
    style: 'margin-bottom: 50px',
    columns: [{
        hidden: true,
        header: 'id',
        dataIndex: 'id',
        editable: false
    }, {
        header: 'name',
        dataIndex: 'name',
        editable: true,
        sortable: true,
        flex: 10,
        editor: new fm.TextField({
            xtype: 'textfield',
            allowBlank: false
        })
        //,
        //field : {
        //xtype : 'textfield',
        //allowBlank : false,
        //}
    }, {
        header: 'applicationserver',
        dataIndex: 'as_host',
        editable: true,
        flex: 10,
        sortable: true,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'systemnumber',
        dataIndex: 'system_number',
        editable: true,
        flex: 10,
        sortable: true,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'client',
        dataIndex: 'client',
        editable: true,
        sortable: true,
        flex: 10,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'language',
        flex: 10,
        dataIndex: 'language',
        editable: true,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'saprouterstring',
        dataIndex: 'sap_router_string',
        editable: true,
        flex: 10,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'poolcapacity',
        dataIndex: 'pool_capacity',
        editable: true,
        flex: 10,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'pool size',
        dataIndex: 'pool_size',
        editable: true,
        flex: 10,
        field: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        xtype: 'actioncolumn',
        width: 20,
        align: 'center',
        items: [{
            icon: '../images/icons/silk/delete.png',
            tooltip: 'Delete Row',
            handler: function(grid, rowIndex,
                colIndex) {
                var rec = grid.store
                    .getAt(rowIndex);
                if (rec.data.id !== null &&
                    rec.data.id !== '') {
                    deleteIds.push(rec.data.id);
                }
                grid.store.removeAt(rowIndex);

                Ext.defer(layoutfunction, 10, customobject);
            }
        }]
    }],


    selType: 'cellmodel',

    //plugins : [editor],
    /*  plugins : [ Ext.create(
                'Ext.grid.plugin.CellEditing', {
                    clicksToEdit : 1
                }) ], */

    store: myStore,
    stateful: false,
    border: true,
    enableColumnHide: false,
    enableColumnMove: false,
    //loadMask : true,
    //stripeRows : true,
    autoScroll: true,

    tbar: [{
        xtype: 'button',
        icon: '../images//icons/silk/add.png',
        dock: 'bottom',
        listeners: {
            click: function() {
                var grid = Ext.getCmp('editTable');
                var myNewRecord = new MyRecord({
                    id: '',
                    as_host: '',
                    system_number: '',
                    client: '',
                    language: '',
                    sap_router_string: '',
                    pool_capacity: '',
                    pool_size: '',
                    sap_id: ''
                });
                grid.store.add(myNewRecord);
                Ext.defer(layoutfunction, 10, customobject);
            }
        },
        afterrender: function(cmp) {
            Ext.defer(layoutfunction, 100, customobject);
        }
    }, {
        xtype: 'button',
        icon: '../images//icons/silk/disk.png',
        listeners: {
            click: function() {
                var grid = Ext.getCmp('editTable');
                save(grid.store.data.items);
            }
        }
    }],



    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: myStore, // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],

    listeners: {
        beforeChange: function(pagingToolbar, params) {
            deleteIds = [];
            updateIds = [];
            pagingToolbar.store.baseParams = {
                eventPath: 'FrontEndCRUDHandler',
                eventMethod: 'getSapSystemData',
                jsonInput: Ext.encode({
                    tableName: 'SAP_SYSTEM',
                    start: 0,
                    limit: rowLimit
                })
            }
        },
        afterlayout: function() {
            Ext.defer(layoutfunction, 10, customobject);
        },
        afterrender: function(cmp) {
            Ext.defer(layoutfunction, 100, customobject);
        }
    }
});

Answer 1

You must use Ext.grid.EditorGridPanel ;-)