Ext数据处理

来源:互联网 发布:淘宝不清洗第二次排查 编辑:程序博客网 时间:2024/06/05 11:32

  Ext的确是一个很好用的Ajax框架,无论是在页面的展现还是与服务器的数据交互都做了近乎完美的封装,让使用Ext的程序员在开发过程中真正能体验到面向对象的思想,这就是Ext给我的初步感受。

  近期公司有部分需求我尝试着用Ext来实现它,整个开发过程给人感觉很轻松,而且页面美化和用户体验也是没的说,所以今天就想抽点时间做做记录。

  Ext的强大之处主要体现以下几点:

1. 将开发过程中常用的表现形式都封装成了自己内部的组件,使用起来只需要简单配置即可;

2. 与服务器进行异步数据访问封装的很好,Ajax方式来访问数据更加轻松很便利,只需要编写少量的代码;

3. 最重要的一点就是,Ext将自己的组件与Ajax完美的结合在了一起,在一些需要数据填充的组件中进行Ajax访问简单到了只需要配置一个选项便可。

  个人感觉Ext的控件使用起来还是相对比较简单的,一般只要参照api就可以轻松的使用Ext中的各种组件了,当然官方提供的那些例子也是很好的学习资料。相对灵活的部分还是Ext中数据访问那块。其实多用几次也就觉得很简单了。在Ext中的GridPanel, EditorGridPanel, ComboBox, TreePanel等很多组件都是需求数据进行填充的才能正常使用。

  和数据有关的顶级组件分别有:Connection,DataProxy, DataReader, Store,Record

  这些组件基本上就可以满足页面控件和服务器进行Ajax数据交互的要求了。他们的作用分别是:

  DataProxy用来指定数据来源的;

  DataReader与Reacord配合用来指定读取的数据以那种格式存储在客户端;

  Store相当于客户端内存中的小型数据库,数据是以Record指定的形式存放的,每一个Record对象就相当于Store中的一条记录(这样理解是不恰当的);

  前面这几个组件的使用其实都是和其他一些需要数据填充的展现控件配合使用的。

  Connection可以用来单独发出Ajax请求的一个控件,其实上面的那种结合使用的方式底层也封装了Connection对象。

  详细分说:

  Record值得说一下,(每一个Record对象就相当于Store中的一条记录)这样理解的确是不正确的,其实通常使用Record类的create()方法生成一个新类,生成的这个新类的对象才真的是Store中的一条记录,我在这里吃过亏,呵呵!

  Connection类可能在实际开发过程中很少会用到,更常见的是Ext.Ajax这个类,根据API来看Ext.Ajax应该是Ext.data.Connection的子类,其实不然从源代码中我们很容易看出来其实Ext.Ajax是Ext.data.Connection的一个全局单例实体;

  1. Ext.Ajax = new Ext.data.Connection({

Ext为了方便使用还提供了很有针对性的子类,例如:

DataProxy子类:MemoryProxy, HttpProxy, ScriptTagProxy

DataReader子类:SimpleReader, XmlReader, JsonReader

Store子类:JsonStore,SimpleStore,GroupingStore

  这些只需要了解一种,能满足自己数据访问的需求就可以了。

  单独发出Ajax请求写法也比较单一,使用也是相对比较简单的。

  在一些需要数据填充的组件中Ajax的调用方式可能就比较新鲜了,一般在那些需要用数据填充的组件的配置选项对象中都会有store这个属性,在这里指定我们配置好的Store对象或其子类就可以了,这个组件就和对象的数据访问方式结合起来了。

  在这种Ajax请求中有两种传递参数的方式:

1. 在Store对象的beforeload事件中通过Store对象的baseParams.参数名的形式服务器传递参数;

2. 通过Store对象的load({params:{arg1:'...', arg2:'...'}})的方式向后台传递参数。

 都很方便,可以根据不同需求进行选择某种方式。

  时间紧张先记录这么多吧,以上纯属个人理解记录,如果理解偏差希望有热心的朋友能够指出。

原创粉丝点击