本文内容
- 演示增删改 Ext.Net.GridPanel
- 说明
演示增删改 Ext.Net.GridPanel
grid 从服务器获得数据后，在前台对 grid 进行增删改，往往很有必要，尤其是对那些实时性不强，或是用户只操作自己的数据。操作后，再由后台处理。
标记
<div style="float: left">
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="500" Title="植物"
AutoExpandColumn="Common">
<Store>
<ext:Store ID="Store1" runat="server" OnRefreshData="MyRefreshData">
<Reader>
<ext:JsonReader IDProperty="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Common" />
<ext:RecordField Name="Light" />
<ext:RecordField Name="Price" Type="Float" />
<ext:RecordField Name="Availability" Type="Date" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Id" DataIndex="Id" />
<ext:Column Header="Common Name" DataIndex="Common" />
<ext:Column Header="Light" DataIndex="Light" />
<ext:Column Header="Price" DataIndex="Price" />
<ext:DateColumn Header="Available" DataIndex="Availability" Format="yyyy-MM-dd" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
<Listeners>
<RowSelect Fn="selectedRow" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Buttons>
<ext:Button ID="btnIsModified" runat="server" Icon="Accept" Text="是否改变">
<Listeners>
<Click Handler="myIsDirty(GridPanel1);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</div>
<div style="float: left">
<ext:FormPanel ID="FormPanel1" runat="server" Width="300" Title="操作 grid" Padding="5">
<Items>
<ext:TextField ID="txtCommon" runat="server" FieldLabel="Common Name" AllowBlank="false"
MsgTarget="Side" />
<ext:TextField ID="txtLight" runat="server" FieldLabel="Light" AllowBlank="false"
MsgTarget="Side" />
<ext:TextField ID="txtPrice" runat="server" FieldLabel="Price" AllowBlank="false"
MsgTarget="Side" />
<ext:DateField ID="dfAvailability" runat="server" FieldLabel="Availability" Editable="false"
AllowBlank="false" MsgTarget="Side" />
</Items>
<BottomBar>
<ext:Toolbar ID="toolbar_Manipulate" runat="server">
<Items>
<ext:Button ID="btnAdd" runat="server" Icon="Accept" Text="插入末尾">
<Listeners>
<Click Handler="myAdd(GridPanel1);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnInsert" runat="server" Icon="Accept" Text="插入指定行上">
<Listeners>
<Click Handler="myUpIns(GridPanel1);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnAppend" runat="server" Icon="Accept" Text="插入指定行下">
<Listeners>
<Click Handler="myDownIns(GridPanel1);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnDelete" runat="server" Icon="Accept" Text="删除行">
<Listeners>
<Click Handler="myDelete(GridPanel1);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnReset" runat="server" Icon="Accept" Text="重置">
<Listeners>
<Click Handler="#{GridPanel1}.store.load();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
<Buttons>
<ext:Button ID="btnSave" runat="server" Icon="Accept" Text="保存">
<Listeners>
<Click Handler="save(GridPanel1);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</div>
图1
备注：
- “插入末尾”用于将 Form 内容插入 grid 末尾；
- “插入指定行上”用于将 Form 内容插入到选定行的上边；
- “插入指定行下”用于将 Form 内容插入到选定行的下边；
- “删除行”用于删除选定的行；
- “重置”用于重新加载 grid；
- “保存”用于将 grid 发送到后台处理。若 grid 没有改变，则提示；
- “是否改变”用于判断 grid 是否被改变。如进行了“增删改”操作。
脚本
<script type="text/javascript">1:2: var selectedRowIndex = undefined;3:4: var selectedRow = function(o, rowIndex, record) {5: selectedRowIndex = rowIndex;6: };7:8: var myUpIns = function(grid) {9: if (selectedRowIndex != undefined) {10: var form = this.getForm();11: if (form != undefined) {12: grid.insertRecord(selectedRowIndex,13: {14: "Common": form.common,15: "Light": form.light,16: "Price": form.price,17: "Availability": form.availability18: });19: this.clear(grid);20: }21: else {22: Ext.Msg.alert('信息', '输入不完整');23: }24: }25: else {26: Ext.Msg.alert('信息', '未选择.');27: }28: };29:30: var myDownIns = function(grid) {31: if (selectedRowIndex != undefined) {32: var form = this.getForm();33: if (form != undefined) {34: grid.insertRecord(selectedRowIndex + 1,35: {36: "Common": form.common,37: "Light": form.light,38: "Price": form.price,39: "Availability": form.availability40: });41: }42: else {43: Ext.Msg.alert('信息', '输入不完整');44: }45: }46: else {47: Ext.Msg.alert('信息', '未选择.');48: }49: };50: var myAdd = function(grid) {51: var form = this.getForm();52: if (form != undefined) {53: grid.insertRecord(grid.store.getCount(),54: {55: "Common": form.common,56: "Light": form.light,57: "Price": form.price,58: "Availability": form.availability59: });60: this.clear(grid);61: }62: else {63: Ext.Msg.alert('信息', '输入不完整');64: }65: };66:67: var myDelete = function(grid) {68: grid.deleteSelected();69: };70:71: var myIsDirty = function(grid) {72: var store = grid.getStore();73: Ext.Msg.alert('是否改变', store.isDirty() ? "是" : "否");74: };75:76: var save = function(grid) {77: if (grid.store.isDirty()) {78: var records = grid.getRowsValues({ selectedOnly: false });79: Ext.net.DirectMethods.Save(Ext.encode(records),80: {81: success: function(result) {82: Ext.Msg.alert('信息', result ? "成功." : "失败.");83: },84:85: failure: function(result) {86: }87: });88: }89: else {90: Ext.Msg.alert('信息', '无变化.');91: }92: }93:94: var getForm = function() {95: if (FormPanel1.getForm().isValid()) {96: var common = txtCommon.getValue();97: var light = txtLight.getValue();98: var price = txtPrice.getValue();99: var availability = dfAvailability.getValue();100: return { common: common, light: light, price: price, availability: availability };101: }102: else {103: return undefined;104: }105: };106:107: var clear = function(grid) {108: grid.getSelectionModel().clearSelections();109: selectedRowIndex = undefined;110: }</script>
图2 插入到末尾，以及id为7的记录的上和下
说明
Ext.Net 有关于操作 grid 的完整 Demo，但是它利用的是 asp.net 处理程序，以及 store 的相关事件。但从本例可以看出，这些实现的本质。你可以用 firefox 调试一下 store.modified 属性，你对 grid（或者说 store）的变更都在这里。
