Ext JS 增删改 Ext.Net.Store详细教程

本文内容
引入
演示用 Ext JS 增删改 Ext.Net.Store
说明
参考资料
 

引入
当我使用 Ext.Net 时，始终不能摆脱最初开发 asp.net 应用程序的方式，也就是，前后台的交互。当你用 asp.net 的思维方式，开发 Ext.Net 时，你会发现应用程序问题很多，我所见过的，比如，页面闪的厉害（刷新次数太多，虽然也是局部刷新）；页面脚本错误；页面 CSS 错误等等。这充分说明，错误地使用了 Ext.Net。没有理解 Ajax。知道与会用往往是两回事。

现在，我既不想使用 asp.net 近乎全部刷新页面的方式（虽然可以完全做到局部刷新，但还是不够方便，尤其是对开发），也不想使用类似 jQuery+HTML 的局部刷新，因为这要写太多脚本。

Ext.Net 这个 Ajax 框架，提供了一个很好的方式。让你在脚本代码与后台代码做出权衡。因为，Ext.Net 是用 .Net 封装的 Ext JS，你可以使用 Ext.Net，也可以随意写 Ext JS 代码。

比如，用 Ext.Net 向页面拖放控件，而不是写一堆 Ext JS 脚本来创建，并在必要时，编写 Ext JS 脚本操作页面元素。所有操作都是前台进行，最后才发送给服务器端。

 

演示用 Ext JS 增删改 Ext.Net.Store
GridPanel 标记
假设页面有个 Ext.Net.GridPanel 和 Ext.Net.Store。但在页面初始化（第一次初始化）时，不加载任何数据，store 也没有 OnRefreshData 事件。

 代码如下 复制代码

<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="500" Title="植物">

       <Store>

           <ext:Store ID="Store1" runat="server">

               <Reader>

                   <ext:ArrayReader IDProperty="IntColumn">

                       <Fields>

                           <ext:RecordField Name="IntColumn" Type="Int" />

                           <ext:RecordField Name="DoubleColumn" Type="Float" />

                           <ext:RecordField Name="StringColumn" Type="String" />

                           <ext:RecordField Name="DateTimeColumn" Type="Date" DateFormat="Y-m-d" />

                           <ext:RecordField Name="BoolColumn" Type="Boolean" />

                       </Fields>

                   </ext:ArrayReader>

               </Reader>

               <SortInfo Field="IntColumn" Direction="ASC" />

           </ext:Store>

       </Store>

       <ColumnModel ID="ColumnModel1" runat="server">

           <Columns>

               <ext:Column Header="IntColumn" DataIndex="IntColumn" />

               <ext:Column Header="DoubleColumn" DataIndex="DoubleColumn" />

               <ext:Column Header="StringColumn" DataIndex="StringColumn" />

               <ext:DateColumn Header="DateTimeColumn" DataIndex="DateTimeColumn" Format="Y-m-d" />

               <ext:Column Header="BoolColumn" DataIndex="BoolColumn" />

           </Columns>

       </ColumnModel>

       <SelectionModel>

           <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false">

           </ext:RowSelectionModel>

       </SelectionModel>

       <View>

           <ext:GroupingView ID="GroupingView1" runat="server" ForceFit="true" />

       </View>

   </ext:GridPanel>

 

操作 store 的按钮标记

 代码如下 复制代码

<div style="float: left">

    <div>

        <ext:Button ID="Button1" runat="server" Icon="Accept" Text="演示 store.add">

            <Listeners>

                <Click Handler="yourAdd(Store1);" />

            </Listeners>

        </ext:Button>

    </div>

    <br />

    <div>

        <ext:Button ID="Button2" runat="server" Icon="Accept" Text="演示 store.insert">

            <Listeners>

                <Click Handler="yourInsert(Store1);" />

            </Listeners>

        </ext:Button>

    </div>

    <br />

    <div>

用 Ext JS 增删改 Store

 代码如下 复制代码

add( Ext.data.Model[] records ) : Array

addSorted( Ext.data.Model[] records ) : Array

insert( Number index, Ext.data.Model[] records ) : void

remove( Ext.data.Model/Array records, Object isMove ) : void

removeAll( Boolean silent ) : void

removeAt( Number index ) : void

下面演示用 Ext JS 增删改 store。

 代码如下 复制代码

<script type="text/javascript">

    var key = 0;

 

    var data = [

        [1, 33.33, "string_0", "2012-01-01", true],

        [3, 33.33, "string_1", "2012-01-01", false],

        [5, 33.33, "string_2", "2012-01-01", true],

        [7, 33.33, "string_3", "2012-01-01", false]

    ];

 

    Ext.onReady(function() {

        Store1.proxy = new Ext.data.MemoryProxy(data),

        Store1.loadData(data, true);

    });

 

    //var ds_model = Ext.data.Record.create([

    //    'IntColumn',

    //    'DoubleColumn',

    //    'StringColumn',

    //    'DateTimeColumn',

    //    'BoolColumn'

    //]);

    var ds_model = Ext.data.Record.create([

        { name: 'IntColumn', type: 'Int' },

        { name: 'DoubleColumn', type: 'float' },

        { name: 'StringColumn', type: 'String' },

        { name: 'DateTimeColumn', type: 'Date' },

        { name: 'BoolColumn', type: 'Boolean' }

    ]);

 

    var yourAdd = function(store) {

        key++;

        key++;

        var newData = new ds_model(

        {

            IntColumn: key,

            DoubleColumn: (key * 100) / 3,

            StringColumn: "string_" + 99,

            DateTimeColumn: '1999-01-01',

            BoolColumn: false

        })

        newData.commit();

        store.add(newData);

    };

 

    var yourAddSorted = function(store) {

        key++;

        key++;

        var newData = new ds_model(

        {

            IntColumn: key,

            DoubleColumn: (key * 100) / 3,

            StringColumn: "string_" + 99,

            DateTimeColumn: '1999-01-01',

            BoolColumn: false

        })

        newData.commit();

        store.addSorted(newData);

    };

 

    var yourInsert = function(store) {

        key++;

        key++;

        var newData = new ds_model(

        {

            IntColumn: key++,

            DoubleColumn: (key * 100) / 3,

            StringColumn: "string_" + key,

            DateTimeColumn: '1999-01-01',

            BoolColumn: false

        })

        newData.commit();

        store.insert(0, newData);

    };

 

    var yourRemove = function(store, grid) {

        var record = grid.getSelectionModel().getSelected();

        if (record != undefined) {

            store.remove(record);

            grid.getSelectionModel().clearSelections();

        }

        else {

            alert('未选择.');

        }

    };

 

    var yourRemoveAt = function(store, removeAtValue) {

        store.removeAt(removeAtValue);

    };

 

    var yourRemoveAll = function(store) {

        store.removeAll();

    };

 

    var yourLoadData = function(store) {

        store.loadData(data);

    };

</script>

可以做个类比，Store 相当于 .net framework DataTable，而 Record 相当于 DataRow。

 代码如下 复制代码

Ext.Net.Store（Ext.Net）/ Ext.data.Store（Ext JS）相当于 Syste.Data.DataTable

Ext.Net.RecordField（Ext.Net）/ Ext.data.Recrod（Ext JS）相当于 System.Data.DataRow

说明

官网 add 方法的原型是：add( Object data ) : Array。与 insert 方法不一样。按理说应该一样的。个人觉得官网笔误，试了半天报错。按 insert 的参数就没问题了。

其实，在我看来，用 Ext JS 直接操作 Ext.Net.Store 意义不大，除非你想把 store 单纯地作为一个数据缓存容器，不在页面呈现。因为，往往操作 grid 同时，就是在操作 store，而且通过 grid 操作 store，会在页面上看到数据式样的变化（当你编辑 grid 某列的数据后，其右上角有个红色三角）。

但是，了解直接操作 store，会加深通过 grid 操作 store 的理解。

本例的 store 是 ArrayReader，也可以使用 JsonReader。

 代码如下 复制代码

<ext:Store ID="Store1" runat="server">

    <Reader>

        <ext:JsonReader IDProperty="IntColumn">

            <Fields>

                <ext:RecordField Name="IntColumn" Type="Int" />

                <ext:RecordField Name="DoubleColumn" Type="Float" />

                <ext:RecordField Name="StringColumn" Type="String" />

                <ext:RecordField Name="DateTimeColumn" Type="Date" DateFormat="Y-m-d" />

                <ext:RecordField Name="BoolColumn" Type="Boolean" />

            </Fields>

        </ext:JsonReader>

    </Reader>

</ext:Store>

但是数据需要改成类数组，而不是前面数组的数组。

 代码如下 复制代码

var data = [

    { IntColumn: 1, DoubleColumn: 33.33, StringColumn: "string_0", DateTimeColumn: "2012-01-01", BoolColumn: true },

    { IntColumn: 3, DoubleColumn: 33.33, StringColumn: "string_1", DateTimeColumn: "2012-01-01", BoolColumn: false },

    { IntColumn: 5, DoubleColumn: 33.33, StringColumn: "string_2", DateTimeColumn: "2012-01-01", BoolColumn: true },

    { IntColumn: 6, DoubleColumn: 33.33, StringColumn: "string_3", DateTimeColumn: "2012-01-01", BoolColumn: false },

    { IntColumn: 7, DoubleColumn: 33.33, StringColumn: "string_4", DateTimeColumn: "2012-01-01", BoolColumn: true }

];
时间： 2024-08-03 19:46:08

Ext JS 增删改 Ext.Net.Store详细教程的相关文章

C#在winform中实现数据增删改查等功能_C#教程

winform中利用ado.net实现对单表的增删改查的详细例子,具体如下: 1.前言: 运行环境:VS2013+SQL2008+Windows10 程序界面预览: 使用的主要控件:dataGridview和menuStrip等.  2.功能具体介绍: 1.首先,我们要先实现基本的数据操作,增删改查这几个操作. (1)先定义一个数据库操作的公共类: using System; using System.Collections.Generic; using System.Linq; using S

C#访问SQLServer增删改查代码实例_C#教程

一个专门实现访问sql server数据库增删改查的操作代码,分享给大家,具体内容如下 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data; usi

《Ext JS 4 First Look》翻译之一：新特性

第一章 新特性   Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,并且让开发人员更容易上手. 在本章我们将学习到下列内容: 1.1. 入手Extjs 4 1.1.1. 包和命名空间的改进 1.1.2. API文档的使用(日后经常和它打交道) 1.2. Extjs新平台的架构 1.3.  Extjs 4的类系统 1.3.1. 类定义与对象实例化 1.3.2

《Ext JS 4 First Look》翻译之五：Grid、Tree和Form 　　

5.1. Grid panel      Grid应该是我们在开发时使用的最多的组件之一.Extjs4对其进行了重大的改进.      Extjs4与Extjs3的Grid生成不同的HTML.Sencha称其为智能渲染(Intelligent Rendering).Extjs3中即使不需要Grid的所有特性,它也会生成整套HTML.而Extjs4就只会渲染Grid所用到的特性,这样就使 渲染最小化且提高了性能.      在学习Extjs4中Grid的新特性前,让我们先了解在Extjs4中如何创

《Ext JS 4 First Look》翻译之五：Grid、Tree和Form

<Ext JS 4 First Look>翻译之五:Grid.Tree和Form      至此我们已经学习了Data包和布局等API.下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid.Tree和Form吧! 目录: 5.1. Grid panel 5.1.1. Columns 5.1.2. Feature 5.1.2.1. Ext.grid.feature.Grouping 5.1.2.2. Ext.grid.feature.Summary 5.1.2.3. Ext.g

介绍Ext JS 4 MVC给Web开发带来的变化

文章最后将与大家一起讨论作者在运用过程中碰到的问题以及解决办法,并提出 MVC 需要进一步完善的地方. Ext JS 4 目前是 Sencha 的产品,4.x 的正式版本号是 4.0.7.Ext JS 4 提供商业版本,但如果您的项目是开源的,则可以http://www.aliyun.com/zixun/aggregation/17944.html">免费使用 Ext JS 4.Ext JS 的论坛目前非常活跃:Ext JS 还在不但地升级改进,据 Sencha 官方统计,使用 Ext J

Ext JS 5 对平板的支持 【已翻译100%】

Ext JS 已经被公认为桌面web应用的领衔框架. 计算机应用市场,无论是在个人还是企业领域,都因为平板开始挑战全球个人PC的销售量而变得云诡波谲起来. Sencha 认识到了这种变化,并在其 Ext JS 5 中退出了新的特性和功能优化. Ext JS 5 从 Sencha Touch 2 那里学到了一堆的新花样. 多年在最佳移动web应用框架领域的经验集于一身,使得其在台式机上面的产品也能在现在平板上得到完美的呈现. 我们可以从整个全线的更新中看到这些更新 - 类系统,事件管理,小窗口,还

《Ext JS权威指南》——2.1节获取Ext JS 4

第2章 从"Hello World"开始 "Hello World"几乎已经成为所有开发类图书的必用案例,本书也不能免俗.本章将通过编写"Hello World"程序来让大家对如何使用Ext JS进行开发有初步的了解,如Ext JS代码是如何运行的.代码书写风格是怎样的.如何实现本地化等.2.1 获取Ext JS 4 要下载Ext JS 4,可访问地址:http://www.sencha.com/products/Ext JS/download/

JS对HTML表格进行增删改操作_javascript技巧

要求如下:  写一个html页面,里面有一个表格,储存用户信息,包括:用户名,密码,姓名,邮箱,电话,qq,身份证号.  现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录:  有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空:  用户名:英文+数字+下划线:  密码:英文+数字+下划线+6位以上:  姓名:中文:  邮箱,电话,qq,身份证号符合格式:  每条记录有修改.删除:  修改类似增加,要把原