ExtJS笔记 Store

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

Store类封装了Model对象在客户端的缓存。store通过proxy加载数据,并且提供排序、过滤、查询model实例的函数。

Creating a Store is easy - we just tell it the Model and the Proxy to use for loading and saving its data:

创建store很简单--我们只需告诉它model和proxy:

// Set up a model to use in our 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‘}
     ]
 });

 var myStore = Ext.create(‘Ext.data.Store‘, {
     model: ‘User‘,
     proxy: {
         type: ‘ajax‘,
         url: ‘/users.json‘,
         reader: {
             type: ‘json‘,
             root: ‘users‘
         }
     },
     autoLoad: true
 });

In the example above we configured an AJAX proxy to load data from the url ‘/users.json‘. We told our Proxy to use aJsonReader to parse the response from the server into Model object - see the docs on JsonReader for details.

在上面的例子中,我们配置了一个ajax代理来从‘/users.json‘加载数据。我们告诉代理使用JsonReader解析服务端的响应到model对象。详情参见see the docs on JsonReader

Inline data  内联数据

Stores can also load data inline. Internally, Store converts each of the objects we pass in as data into Model instances:

store可通过内联方式加载数据。在内部,store转换每个我们传入的的对象为model实例:

 Ext.create(‘Ext.data.Store‘, {
     model: ‘User‘,
     data : [
         {firstName: ‘Ed‘,    lastName: ‘Spencer‘},
         {firstName: ‘Tommy‘, lastName: ‘Maintz‘},
         {firstName: ‘Aaron‘, lastName: ‘Conran‘},
         {firstName: ‘Jamie‘, lastName: ‘Avins‘}
     ]
 });

Loading inline data using the method above is great if the data is in the correct format already (e.g. it doesn‘t need to be processed by a reader). If your inline data requires processing to decode the data structure, use a MemoryProxy instead (see the MemoryProxy docs for an example).

如果数据格式是正确的(不需要我们提供reader来处理),那么使用内联数据是很好的。如果内联数据需要解析数据格式,那么要使用MemoryProxy 。

Additional data can also be loaded locally using add.

额外的数据可以通过add方法来加载。

Dynamic Loading   动态加载

Stores can be dynamically updated by calling the load method:

store可以通过调用load方法来动态更新:

store.load({
    params: {
        group: 3,
        type: ‘user‘
    },
    callback: function(records, operation, success) {
        // do something after the load finishes
    },
    scope: this
});

Here a bunch of arbitrary parameters is passed along with the load request and a callback function is set up to do something after the loading is over.

这个例子中,一组任意的参数通过load方法传入,回调函数在使得load结束时候可以做些事情。

Loading Nested Data    加载嵌套数据

Applications often need to load sets of associated data - for example a CRM system might load a User and her Orders. Instead of issuing an AJAX request for the User and a series of additional AJAX requests for each Order, we can load a nested dataset and allow the Reader to automatically populate the associated models. Below is a brief example, see the Ext.data.reader.Reader intro docs for a full explanation:

app经常需要加载一组相关的数据--例如,crm系统会加载users和它的orders。一种方式是通过一个ajax请求得到user,通过一系列额外的请求得到每个订单,我们可以加载一个嵌套的数据集,并让reader自动组装相关的模型,详见Ext.data.reader.Reader

 var store = Ext.create(‘Ext.data.Store‘, {
     autoLoad: true,
     model: "User",
     proxy: {
         type: ‘ajax‘,
         url: ‘users.json‘,
         reader: {
             type: ‘json‘,
             root: ‘users‘
         }
     }
 });

Which would consume a response like this:

我们将消费这样一个响应:

 {
     "users": [{
         "id": 1,
         "name": "Ed",
         "orders": [{
             "id": 10,
             "total": 10.76,
             "status": "invoiced"
        },{
             "id": 11,
             "total": 13.45,
             "status": "shipped"
        }]
     }]
 }

See the Ext.data.reader.Reader intro docs for a full explanation.

Filtering and Sorting     过滤和排序

Stores can be sorted and filtered - in both cases either remotely or locally. The sorters and filters are held inside MixedCollection instances to make them easy to manage. Usually it is sufficient to either just specify sorters and filters in the Store configuration or call sort or filter:

store可以被排序和过滤--并都支持远程和本地模式。MixedCollection内部管理着sorters和 filters 。通过stroe配置项指定sorters 和filters ,或直接调用sort或filter,两种方式皆可。

 var store = Ext.create(‘Ext.data.Store‘, {
     model: ‘User‘,
     sorters: [{
         property: ‘age‘,
         direction: ‘DESC‘
     }, {
         property: ‘firstName‘,
         direction: ‘ASC‘
     }],

     filters: [{
         property: ‘firstName‘,
         value: /Ed/
     }]
 });

The new Store will keep the configured sorters and filters in the MixedCollection instances mentioned above. By default, sorting and filtering are both performed locally by the Store - see remoteSort and remoteFilter to allow the server to perform these operations instead.

这个新store会在MixedCollection 实例中保存sorters 和filters 的配置。缺省的,排序和过滤都是在本地操作,--参见remoteSortremoteFilter 来允许服务器执行操作。

Filtering and sorting after the Store has been instantiated is also easy. Calling filter adds another filter to the Store and automatically filters the dataset (calling filter with no arguments simply re-applies all existing filters). Note that by default sortOnFilter is set to true, which means that your sorters are automatically reapplied if using local sorting.

store实例化后,修改过滤和排序也很简单。调用filter添加其它的过滤并自动过滤数据集(不带参数直接调用filter会重新应用现有的过滤)。注意,sortOnFilter缺省的是true,这意味着你的sorter会自动重新应用。

store.filter(‘eyeColor‘, ‘Brown‘);

Change the sorting at any time by calling sort:

任何时候,通过调用sort方法改变排序:

store.sort(‘height‘, ‘ASC‘);

Note that all existing sorters will be removed in favor of the new sorter data (if sort is called with no arguments, the existing sorters are just reapplied instead of being removed). To keep existing sorters and add new ones, just add them to the MixedCollection:

注意所有现存的排序都会被取代(如果sort以无参数形式调用,现存的sorter会重新应用而不是移除)。如果要保留现有的排序并加入新的,则将它们加到MixedCollection:

store.sorters.add(new Ext.util.Sorter({
    property : ‘shoeSize‘,
    direction: ‘ASC‘
}));

store.sort();

Registering with StoreManager   在StoreManager中注册

Any Store that is instantiated with a storeId will automatically be registered with the StoreManager. This makes it easy to reuse the same store in multiple views:

任何以一个storeId实例化的store都会自动注册到StoreManager。这使得很容易在多个视图间重用同一个store:

//this store can be used several times
Ext.create(‘Ext.data.Store‘, {
    model: ‘User‘,
    storeId: ‘usersStore‘
});

new Ext.List({
    store: ‘usersStore‘,
    //other config goes here
});

new Ext.view.View({
    store: ‘usersStore‘,
    //other config goes here
});

Further Reading   延伸阅读

Stores are backed up by an ecosystem of classes that enables their operation. To gain a full understanding of these pieces and how they fit together, see:

store基于一个类系统构建。要完整的理解它们,并清楚它们如何一起工作,请看:

  • Proxy - overview of what Proxies are and how they are used
  • Model - the core class in the data package
  • Reader - used by any subclass of ServerProxy to read a response
时间: 2024-10-04 00:49:46

ExtJS笔记 Store的相关文章

ExtJs笔记

1.Ext简介.Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面.ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架.ExtJs是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中2.Ext库文件说明                       

Extjs中Store小总结

http://blog.csdn.net/without0815/article/details/7798170 1.什么是store? Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类) 最终主要用于提供给panel去显示. Store由Proxy(数据源)和DataReader(解读数据)组成. 一.(Proxy)数据源:一般是后台的值,习惯性的把它转换成

extjs笔记(一) ext.onready()用法

定义:加载完ExtJs库之后,开始加载OnReady中指定的函数 参数:onReady( fn, scope, options ) fn回调函数 表示要执行的函数 scope表示函数的作用域 表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可. 事例探究一:加载方法的作用 a. function a(){ alert("every thing is OK!") } Ext.onReady(a); b. Ext.onReady(function(){ a

extjs model store学习笔记

http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/data_package.html // 定义一个ModelExt.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'age', type: 'int'} ] }); // 定义一个storeExt.define('MyApp.

ExtJS笔记 Tree

The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as Grid Panel, so all of the benefits of Grid Panels - feat

ExtJS笔记 Grids

参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces of Ext JS. It's an incredibly versatile component that provides an easy way to display, sort, group, and edit data. Grid 面板为 Ext JS 的大头核心之一.它是一个通用性很强

ExtJS笔记--applyTo和renderTo的差别

extjs中常常会用到renderTo或applyTo配置选项.这里,我就比較下两者的差别与使用方法.1.renderTo与render方法相应2.applyTo与applyToMarkup方法相应 一.applyTo的使用:1.applyTo所指向的el元素必需要有父节点.2.applyTo所指向的el元素实际上是充当了对象要渲染的模板,对象是渲染在其父节点内.即对象实例化后所产生的html代码是插入在el元素的父节点内,而el元素本身将仅仅作为模板,并不作为真正的在其位置上的元素,既然作为模

ExtJS中Store数据变化后刷新功能

/*删除操作*/ rmvItem : function(grid, rowIndex, colIndex) { Ext.MessageBox .confirm("提示","确认要删除该代理吗?", function(id) { if (id == "yes") { var r = this.getStore().getAt( rowIndex); /*remove请求*/ var req = { url : IsmpYH.req.SITE_RMV

ExtJS笔记 Using Events

Using Events The Components and Classes of Ext JS fire a broad range of events at various points in their lifecycle. Events allow your code to react to changes around your application. They are a key concept within Ext JS. 在ExtJS组件和类的生命周期中,会触发许多类型的事件