Ext.Net學習筆記18：Ext.Net 可編輯的GridPanel

Ext.Net GridPanel 有兩種編輯模式：編輯單元格和編輯行。

單元格編輯：

行編輯：

可以看出，單元格編輯的時候，只有單元格會進入編輯模式，而行編輯模式中則對編輯行的所有可編輯字段統一進行編輯，通過Update進行更新，Cancel進行取消編輯。

要對Ext.Net GridPanel進行編輯，需要進行兩步配置：

1. 配置列的編輯控件（TextField、NumberField、DateField等）
2. 配置編輯插件（CellEditing、RowEditing）

配置Grid列的編輯控件

在我們的例子中，只對姓名和年齡進行編輯，姓名使用的是TextField控件，年齡使用NumberField控件，列的配置如下：

<ColumnModel>
    <Columns>
        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn>
        <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>
        <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name">
            <Editor>
                <ext:TextField runat="server"></ext:TextField>
            </Editor>
        </ext:Column>
        <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column>
        <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age" Format="">
            <Editor>
                <ext:NumberField runat="server" MinValue="18" MaxValue="150"></ext:NumberField>
            </Editor>
        </ext:NumberColumn>
    </Columns>
</ColumnModel>

 

配置Grid編輯插件

ExtJS中有兩種Grid的編輯插件，我們將使用代碼貼出來。

單元格編輯：

<Plugins>
    <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
</Plugins>

行編輯：

<Plugins>
    <ext:RowEditing runat="server" ClicksToEdit="1"></ext:RowEditing>
</Plugins>

通過上面兩個配置，我們已經可以使用Ext.Net GridPanel的編輯功能了。