Ext.Net 1.2.0_增删改 Ext.Net.GridPanel

本文内容

• 演示增删改 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.availability
  18:                     });
  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.availability
  40:                 });
  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.availability
  59:             });
  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）的变更都在这里。

 

下载 Demo