魏长东

weichangdong

东邪

ExtJs开发教程Ext.data.Store使用方法详解

今天借到一个新任务,看到页面好多

var softTypeComboxDataSearch = Ext.create('Ext.data.Store',{
			fields:['value','text'],
			data:[{'value':"",'text':"无限制"}, {'value':1,'text':'游戏'},
{'value':2,'text':'视频'},{'value':3,'text':'阅读'},{'value':4,'text':'广告插件'},
{'value':5,'text':'聊天通信'},{'value':6,'text':'地图导航'},{'value':7,'text':'音乐'},
{'value':8,'text':'其他常用软件'},{'value':9,'text':'通讯录'},{'value':10,'text':'通用目录'},
{'value':11,'text':'购物'},{'value':12,'text':'支付'},{'value':13,'text':'拍照美图'},
{'value':14,'text':'新闻资讯'},{'value':15,'text':'专有APP'},{'value':16,'text':'购物隐私'}]	
		});

这种的代码,搜了下,发现了好的教程,记录下。

Ext.data.Store 用法介绍

这个组件继承自Ext.data.AbstractStore

下面是他的属性列表


autoLoad  //是否自动加载

autoSync //是否自动同步

buffered //允许缓冲(官方有个5000条数据的例子可以参看)

clearOnPageLoad //是否在加载新数据的时候清空旧数据

clearRemovedOnLoad//加载的时候把删除掉的数据彻底删除

(所谓删除掉的数据是指store.remove())

data//数据

fields//解析数据的字段

filters//过滤器(可以参看Ext.util.Filter和Ext.ux.grid.filter.Filter)

groupDir

groupField//用哪一个字段分组

leadingBufferZone//缓冲的情况下,最多缓冲多少行

listeners//监听器,可以指定各种on事件

model//解析数据的模型,模型可以代替proxy和fields配置

pageSize//每页显示多少条数据

proxy//数据代理(其实就是发送ajax来请求数据用的)

purgePageCount//多少页清除一次缓存数据(具体是和缓冲结合使用,本文不介绍缓冲)

remoteFilter//这个属性会往服务器发送过滤条件

remoteGroup//往服务器发送分组条件(同上,做法就是表单参数提交到后台)

remoteSort//往后台发送排序条件

sortOnFilter//排序的时候进行过滤

storeId//唯一标示,让Ext.data.StoreManager来管理用的

trailingBufferZone//缓冲多少条

  


// 本页的全局pageSize

var PAGESIZE = 20;

 

var demoStore = Ext.create('Ext.data.Store', {

           // fields一定要明确指定type,这样有很多好处,

  比如filter能直接设为true,

  便会默认按照store-fields设置好的

  type来确定filter的类型。

           fields : [{

                     name : 'primaryKey',

                     type : 'int'

                  },{

                     name : 'price',

                     type : 'float'

                  }, {

                     name : 'productName',

                     type : 'string'

                  }, {

                     name : 'title',

                     type : 'string'

                  }, {

                     name : 'buyDate',

                     type : 'date',

                     dateFormat : 'Y-m-d'// 此处可

    以避免IE下日期出现错误nan

                  }],

           // 数据代理服务

           proxy : {

              type : 'ajax',// 使用ajax请求

               url :'/read/demo/product.action',// 请

      求后台读取数据的地址

              // 读取数据的工具(数据代理)

              reader : {

                  // 读取方式按照json字符串格式读取

                  type : 'json',

                  // json解析成js对象之后读取所有数据

 (通常是数组)的属性名称。

                  root : 'root',

                  // json解析成js对象之后读取数据总条数的属性名称

                  totalProperty : 'totalProperty'

              }

           },

           // 自动加载

           autoLoad : true,

           // 每页显示多少条

           pageSize : PAGESIZE

       });

  

  

  

// 商品grid

       Var demoGrid = Ext.create('Ext.grid.Panel', {

                  // 不要边框能好看一些

                  border : false,

//用来进行选择的选择器

                  selModel : Ext.create('Ext.selection.CheckboxModel'),

                  // 所使用的数据源

                  store : renYuanStore,

                  // 创建列详细可以参看renYuanColumns函数

                  columns : renYuanColumns(),

                  // 需要分页、全显示按钮

                  pageChange : true,

                  // 底部toolbar,不需要进行后处理。所以使用“匿名类”

                  bbar : [{

                            // 控件类型pagingtoolbar

                            xtype : 'pagingtoolbar',

                            // 这个属性好像在extAPI中没写,但是不写还不行。

   能控制ProgressBarPager。不然ProgressBarPager会出bug

                            pageSize : PAGESIZE,

                            // 所使用的数据源

                            store : renYuanStore,

                            // 因为Ext.ux.LiveSearchGridPanel默认把tbar和bbar占用了。

   所以只能使用dockedItems添加toolbar

                            dock : 'bottom',

                            // 插件,使用ProgressBarPager插件,显示进度条

                            plugins : Ext.create('Ext.ux.ProgressBarPager')

                         }],

                  // 添加双击编辑事件监听器

                  listeners : {

                     itemdblclick : function() {

// editBtn是编辑按钮。此处做法目的是双击数据进行编辑

                         editBtn.handler();

                     }

                  }

              });

 


该组件相当于一个数据源,能够给很多呈现数据的组件提供数据。


核心工作过程是:


首先请求后台读取数据,接受后台返回的数据(其实就是个字符串)


然后按照指定格式解析数据。通常默认格式为json


我们可以自定义解析规则。详细参看Ext.data.reader.Reader


最后把解析好的数据转换成Ext.data.Model实例


我们可以自定义模型。


Ext.define('User', {

    extend: 'Ext.data.Model',

    fields: [

        {name: 'name',  type: 'string'},

        {name: 'age',   type: 'int', convert: null},

        {name: 'phone', type: 'string'},

        {name: 'alive', type: 'boolean', defaultValue: true, convert: null}

    ],

  

    changeName: function() {

        var oldName = this.get('name'),

            newName = oldName + " The Barbarian";

  

        this.set('name', newName);

    }

});

  


 


通常重复打开定义了Ext.data.Model的页面(就是加载js)

会出现一个错误,大致意思是说,重复定义某个类了。


我们可以这样避免这个问题


Var exitModel=Ext.ModelManager.get(‘modelId’)//此处modelId是

你自己给自己定义的model指定的ID。('User')

//如果不知道exitModel是什么类型,为什么可以直接取反,请参看js基础

(js中 nan,undifined,null,0,‘’都是互通的)

If(!exitModel){

//TODO 在这里定义你的model <br>}

  


自定义模型之后就可以使用该模型来构造store


改写上面的store


Ext.define('ProductModel', {

     extend: 'Ext.data.Model',

     fields: [{

                     name : 'primaryKey',

                     type : 'int'

                  },{

                     name : 'price',

                     type : 'float'

                  }, {

                     name : 'productName',

                     type : 'string'

                  }, {

                     name : 'title',

                     type : 'string'

                  }, {

                     name : 'buyDate',

                     type : 'date',

                     dateFormat : 'Y-m-d'// 此处可以避免IE下日期出现错误nan

                  }]

 });

  

 var demoStore = Ext.create('Ext.data.Store', {

     model: 'ProductModel',

     // 数据代理服务

    proxy : {

              type : 'ajax',// 使用ajax请求

               url :'/read/demo/product.action',// 请求后台读取数据的地址

              // 读取数据的工具(数据代理)

              reader : {

                  // 读取方式按照json字符串格式读取

                  type : 'json',

                  // json解析成js对象之后读取所有数据(通常是数组)的属性名称。

                  root : 'root',

                  // json解析成js对象之后读取数据总条数的属性名称

                  totalProperty : 'totalProperty'

              }

           },

           // 自动加载

           autoLoad : true,

           // 每页显示多少条

           pageSize : PAGESIZE

       });

  


 


写上面的store,这样是不是比原来简单多了,而且更清晰了。


其实proxy属性也可以定义在model中。


只是通常不建议这么做。因为模型就是模型,

他的数据代理是数据源赋予的。这样也能让我们的程序中,

可以定义很多的模型,然后根据需要选择模型来搭配代理

 

,从而为同一个模型赋予不同的后台读取操作。