ext--创建store

　　如何通讯?通过ajax,获取到的数据如何管理?大多数时候我会认为,完全没有必要,通过ajax获取数据以后,整个流程就已经结束了...

　　在基础数据维护或者大多数后台管理系统中,登陆的目的就是为了增删改,单独用ajax时,对于数据的修改,依赖于额外引入的一个变量'data'或者将其置入一个容器form,通过form.submit自动获取所需要修改的数据...另一种更为oo的方式就是在提出一层,该层管理缓存数据与平台数据,在ext中,这就是store

　　以下内容基于extjs5

意义

　　两年前我喜欢'扁平化代码',总的来说就是减少分层,后台的三层架构给改成两层,前端的ext的store就直接使用ajax代替或者使用一个自定义的通用类(其功能类似且小与store),好听点叫,接收的业务简单,不需要那么多的分层,提高笑率(没错,是笑),难听点就是完全不懂其分层的意义

　　store, 仓库,对客户端缓存的封装,用于存储model对象,可以通过proxy进行数据的增删改,也可以配合各种自带工具,进行前端的个性化查询

The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.

so,需要理解model与proxy

创建

根据描述store是模型的数据的封装,so,只要有模型的描述和data的描述就对了,大致是这个样子(参考官网demo)

Ext.create('Ext.data.Store', {
    fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ],
    data : [
         {firstName: 'Ed',    lastName: 'Spencer'},
         {firstName: 'Tommy', lastName: 'Maintz'},
         {firstName: 'Aaron', lastName: 'Conran'},
         {firstName: 'Jamie', lastName: 'Avins'}
     ]
});

验证,先使用grid进行验证,而后在通过方法的方式,第一个栗子大致是这样的

Ext.onReady(function() {

var store=Ext.create('Ext.data.Store', {
    fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ],
    data : [
         {firstName: 'Ed',    lastName: 'Spencer'},
         {firstName: 'Tommy', lastName: 'Maintz'},
         {firstName: 'Aaron', lastName: 'Conran'},
         {firstName: 'Jamie', lastName: 'Avins'}
     ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [
        { text: 'firstName',  dataIndex: 'firstName' },
        { text: 'lastName', dataIndex: 'lastName'},
        { text: 'age', dataIndex: 'age' },
        {text: 'eyeColor', dataIndex: 'eyeColor' }
    ],
    height: 200,
     400,
    renderTo: Ext.getBody()
});

});

从这个栗子上看到定义了两次fields,第一次用以描述model(数据),第二次用以描述columns(渲染),这是我最喜欢吐槽的地方,不够扁平化-.-先无视吐槽,这里已经可以发现store就是以往的data,so,先看看fields

fields

代替model的参数, fields值应该是一个Ext.data.Field属性对象的集合. store对象将自动使用此参数的值来创建一个Ext.data.Model数据模型. 通常应该避免使用此参数, 它只是为了向下兼容而存在. 对于任何稍复杂的情况, 比如制定一个特定的ID或关联关系, 都应该定义一个Ext.data.Model模型对象并通过 model参数指定给当前store.

This may be used in place of specifying a model configuration. The fields should be a set of Ext.data.Field configuration objects. The store will automatically create a Ext.data.Model with these fields. In general this configuration option should only be used for simple stores like a two-field store of ComboBox. For anything more complicated, such as specifying a particular id property or associations, a Ext.data.Model should be defined and specified for the model config.

官方推荐使用model,store会使用这个参数自动产生模型以做对应,如果缺少model,它可以为[](空缺的描述默认为string),但不能同时空缺,总之一句话,store依赖model对象,so,要想先创建store,最好先创建model

model

创建model以替代fields,修改部分如下:

Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });

var store=Ext.create('Ext.data.Store', {
    model:'User',
    data : [
         {firstName: 'Ed',    lastName: 'Spencer',    age: 'Spencer',    eyeColor: 'Spencer'},
         {firstName: 'Tommy', lastName: 'Maintz'},
         {firstName: 'Aaron', lastName: 'Conran'},
         {firstName: 'Jamie', lastName: 'Avins'}
     ]
});

常见model类,删除store下的fields属性,新增model,并添加模型名称,此时,作为仓库,模型/模板/结构已经建立好了,接下来需要管理数据,data肯定是数据的填充,但并不包含数据的管理

proxy

proxy对增删改查进行了封装,包含两部分Client/Server,其中server根据传输的方式/协议分ajax,jsonp,rest,direct,使用每一传输的场景,又有诸多的配置,这就是proxy,举个例子

 var proxy=Ext.create('Ext.data.proxy.Ajax',//最常用的ajax,也可以选择jsonp
    {
         url: 'api/user/users',//请求地址
         reader: {
             type: 'json',//返回json对象,至少还有xml,至少res中的Content-Type:application/json还需要对应
             root: 'users'//返回对象的根key,json对象的传输,并需是{},不能是[]
         }
     })
var operation = proxy.createOperation('read');
proxy.read(operation);

Operation:用于仓库和代理之间的通信。应用程序开发者应该尽可能少地直接与Operation对象交互。

operation是对参数的封装,比如分页,过滤,排序,通过创建proxy就可以与后台进行交互了,虽然叫做ajax但并不像标准的ajax一样需要自定义回调,proxy的回调在reader中进行描述,最重要的是,它还可以通过描述api参数,对不同的操作进行不同的请求,proxy也是对ajax的进一步封装(换句话说,他们的关系大致是:通过proxy关联模型与api进行ajax封装,通过store保存数据,增加过滤,排序等功能封装,单可以通过继承的方式proxy继承store的模型,so,用起来也就像是store封装ajax了-.-)

基于少用Operation的原则,和一个store一般一个proxy,并不会复用的业务,一般描述一个store也就变成了这个样子:

//模型描述
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });

//仓库整合
Ext.define('UserStore', {
    extend:'Ext.data.Store',
     autoLoad: true,
     model: "User",
     ////链接描述
     proxy: {
        type:'ajax',
         url: 'api/user/users',//请求地址
         reader: {
             type: 'json',//返回json对象,至少还有xml,至少res中的Content-Type:application/json还需要对应
             root: 'users'//返回对象的根key,json对象的传输,并需是{},不能是[]
         }
     }
 });

而后根据ext的框架结构, 讲不同的描述防治不同的目录下,万事就ok了