如果要對表格進行編輯需要完成以下三步

1.將columns中需要編輯的列設為editor並提供編輯列時所要使用的控件。

2.在gridPanel渲染出來之前實例化插件類的子類，一個列編輯器對象。

3.將列編輯器對象綁定到gridPanel裏。

4.指示gridPanel的選擇模式為列選擇模式。

以下僅僅只有配置編輯列的關鍵代碼，代碼片段如下：

var columns = [
    { header: ‘編號‘, dataIndex: ‘id‘ },
    {
        header: ‘性別‘,
        dataIndex: ‘name‘,
        editor: {
            xtype: 
 
"combobox",//xtype表示實例化一個組件或控件對象，相當於new Ext.form.combobox()，對象名稱全小寫。
            allowBlank: false//不允許空值
        }
    },
    {
        header: ‘描述‘, dataIndex: ‘descn‘, editor: {
            xtype: "textfield",
            allowBlank: false,//不允許空值
            selectOnFocus: true//點開編輯時自動選中值以便於用戶刪除。
 

        }
    }
];

//new 一個列編輯器插件
var CellEditing = new Ext.grid.plugin.CellEditing({
    clicksToEdit: 0//設為0時，雙擊列使列進入編輯狀態，1時單擊列使列進入編輯狀態。
});

var grid = new Ext.grid.GridPanel({
    renderTo: ‘box‘,
    store: store,
    columns: columns,
    selType: ‘rowmodel‘,//指示為列選擇模式
    plugins:[//綁定列編輯器插件
 

        CellEditing
    ]
});

Javascript - 學習總目錄

Javascript - ExtJs - GridPanel組件 - 編輯