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>