要達到可以在 Grid 內即時修改 Cell 的內容，我們要為 Grid 加入 Plugin 設定才可以。
### 為 Grid Panel 加入 Plugin 設定
我們需要為 Grid Panel 加入以下的設定 :
```js
{
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
}
}
```
### 參數解說
- selModel : 選擇 Grid 內容時所以使用的 Model
- ptype : Plugin 的種類
- clicksToEdit : 按多少下滑鼠可以進入修改模式
### Column 設定
除了要設定好 Grid 外，還需要為你目標相修改的 column 進行設定 :
```js
{
columns: [
{header: 'name', dataIndex: 'name', editor: 'textfield'},
{header: 'name', dataIndex: 'name',
editor: {
completeOnEnter: false,
field: {
xtype: 'textfield',
allowBlank: false
}
},
]
}
```
### 參數解說
- editor (String) - 可以直接使用 xtype 來指定修改器的種類
- editor (Object) - 可以通過使用 field 方法來指定修改器的種類，更適合像 Combobox 一類的 Component。
### 例子
以下例子是從 ExtJS 的官方說明文件中節錄出來 :
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.plugin.CellEditing.html
```js
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
completeOnEnter: false,
// If the editor config contains a field property, then
// the editor config is used to create the Ext.grid.CellEditor
// and the field property is used to create the editing input field.
field: {
xtype: 'textfield',
allowBlank: false
}
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
```