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

最新推荐文章于 2025-06-11 15:17:07 发布

原创最新推荐文章于 2025-06-11 15:17:07 发布 · 436 阅读

2 ·

CC 4.0 BY-SA版权

本文深入介绍了ExtJS中的Store组件及其使用方法。Store作为数据源，负责从服务器获取数据并将其转换为Model实例，供网格等展示组件使用。文章详细讲解了Store的配置选项，如数据模型定义、数据代理配置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

本篇讲解了如何构造并且做一些基本使用

下面是他的属性列表

   [java] 
   view plain copy
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//缓冲多少条  

   [java] 
   view plain copy
// 本页的全局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  
       });  
  <pre name="code" class="plain">// 商品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实例

我们可以自定义模型。

    [java] 
    view plain copy
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）会出现一个错误，大致意思是说，重复定义某个类了。

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

   [java] 
   view plain copy
Var exitModel=Ext.ModelManager.get(‘modelId’)//此处modelId是你自己给自己定义的model指定的ID。('User')  
//如果不知道exitModel是什么类型，为什么可以直接取反，请参看js基础（js中 nan，undifined，null，0，‘’都是互通的）  
If(!exitModel){  
//TODO 在这里定义你的model <br>}  

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

改写上面的store

   [java] 
   view plain copy
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中。

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