`

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

阅读更多

本系列教程基本可以看做是ExtJS API中文版+实例演示

更多内容请参看:http://www.cnblogs.com/mrye

Ext.data.Store 用法介绍

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

 本篇讲解了如何构造并且做一些基本使用,如果有什么疑问可以联系我QQ1330771552

下面是他的属性列表

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中。

只是通常不建议这么做。因为模型就是模型,他的数据代理是数据源赋予的。这样也能让我们的程序中,可以定义很多的模型,然后根据需要选择模型来搭配代理,从而为同一个模型赋予不同的后台读取操作。

 

 

 

针对store的各种方法合理使用,我会根绝需要在后续篇章中进行讲解。

注:本篇持续更新,首版日期:2012年7月10日15:57:23 第一版

 

PS:近期会出一套关于ExtJs动态form动态grid的相关教程。2012年7月10日16:19:54

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics