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

本文内容

演示增删改 Ext.Net.GridPanel
说明
 

演示增删改 Ext.Net.GridPanel

grid 从服务器获得数据后，在前台对 grid 进行增删改，往往很有必要，尤其是对那些实时性不强，或是用户只操作自己的数据。操作后，再由后台处理。

标记

[code]<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>

[/code]





图1



脚本

[code]<script type="text/javascript"> 

var selectedRowIndex = undefined;

var selectedRow = function(o, rowIndex, record) {

selectedRowIndex = rowIndex;

};

var myUpIns = function(grid) {

if (selectedRowIndex != undefined) {

var form = this.getForm();

if (form != undefined) {

grid.insertRecord(selectedRowIndex,

{

"Common": form.common,

"Light": form.light,

"Price": form.price,

"Availability": form.availability

});

this.clear(grid);

}

else {

Ext.Msg.alert('信息', '输入不完整');

}

}

else {

Ext.Msg.alert('信息', '未选择.');

}

};

var myDownIns = function(grid) {

if (selectedRowIndex != undefined) {

var form = this.getForm();

if (form != undefined) {

grid.insertRecord(selectedRowIndex + 1,

{

"Common": form.common,

"Light": form.light,

"Price": form.price,

"Availability": form.availability

    });

}

else {

Ext.Msg.alert('信息', '输入不完整');

}

}

else {

Ext.Msg.alert('信息', '未选择.');

}

};

var myAdd = function(grid) {

var form = this.getForm();

if (form != undefined) {

grid.insertRecord(grid.store.getCount(),

{

"Common": form.common,

"Light": form.light,

"Price": form.price,

"Availability": form.availability

});

this.clear(grid);

}

else {

Ext.Msg.alert('信息', '输入不完整');

}

};

var myDelete = function(grid) {

grid.deleteSelected();

};

var myIsDirty = function(grid) {

var store = grid.getStore();

Ext.Msg.alert('是否改变', store.isDirty() ? "是" : "否");

};

var save = function(grid) {

if (grid.store.isDirty()) {

var records = grid.getRowsValues({ selectedOnly: false });

Ext.net.DirectMethods.Save(Ext.encode(records),

{

success: function(result) {

Ext.Msg.alert('信息', result ? "成功." : "失败.");

},

failure: function(result) {

}

});

}

else {

Ext.Msg.alert('信息', '无变化.');

}

}

var getForm = function() {

if (FormPanel1.getForm().isValid()) {

var common = txtCommon.getValue();

var light = txtLight.getValue();

var price = txtPrice.getValue();

var availability = dfAvailability.getValue();

return { common: common, light: light, price: price, availability: availability };

}

else {

return undefined;

}

};

var clear = function(grid) {

grid.getSelectionModel().clearSelections();

selectedRowIndex = undefined;

}

</script>

[/code]





图2 插入到末尾，以及id为7的记录的上和下

 

说明

Ext.Net 有关于操作 grid 的完整 Demo，但是它利用的是 asp.net 处理程序，以及 store 的相关事件。但从本例可以看出，这些实现的本质。你可以用 firefox 调试一下 store.modified 属性，你对 grid（或者说 store）的变更都在这里。

 


下载 Demo