[06]EXTJS4.0的数据集store

 store是一个存储数据对象Model的集合缓存，它可以为extjs的可视化组件提供数据(GridPanel,ComboBox)等

类结构

Ext.data.AbstractStore

     Ext.data.Store  没有特殊情况这个类就可以满足日常的开发了

            Ext.data.JsonPStore

            Ext.data.XmlStore

            Ext.data.DirectStore

            Ext.data.ArrayStore   内置辅助的类

            Ext.data.JsonStore    内置辅助的类

     Ext.data.TreeStore

Ext.data.Store 使用

    参数

       autoLoad(Boolean/Object):自动加载数据，自动调用load

       data(Array):内置数据对象的数组，初始化的是就要被装载在

       model(Model):数据集合相关的模型

       fields(Field):字段的集合，程序会自动生成 对于Model的方法

       each(Function f,[Object scope]):void 变量数据中的Model

------------------------------------------------------------------------------

这个例子主要讲Ext.data.Store，包括如何创建，设置data,model,autoLoad属性等，each方法

store.js

1. (function(){ 
2.     Ext.Loader.setConfig({ 
3.       enabled:true 
4.     }); 
5.     Ext.onReady(function(){ 
6.         Ext.define("person",{ 
7.          extend:'Ext.data.Model', 
8.             fields:[ 
9.                {name:'name'}, 
10.                {name:'age'} 
11.             ], 
12.             proxy:{ 
13.                type:'memory' 
14.             } 
15.         }); 
16.     var s = new Ext.data.Store({ 
17.              data:[ 
18.                  {name:'uspcat.com',age:1}, 
19.                  {name:'yfc',age:26} 
20.              ], 
21.              model:'person', 
22.              autoLoad:true 
23.         }); 
24.         s.each(function(model){ 
25.        console.log(model.get('name')); 
26.         }); 
27.     }); 
28. })(); 

运行结果：

 

uspcat.com yfc

-------------------------------------------------------------------------------------

这个例子主要讲Ext.data.Store的fields属性，可以提供类似Model的功能

store2.js

1. (function(){ 
2.     Ext.Loader.setConfig({ 
3.       enabled:true 
4.     }); 
5.     Ext.onReady(function(){ 
6.      var s = new Ext.data.Store({ 
7.              fields:[ 
8.          {name:'name'}, 
9.                 {name:'age'} 
10.           ], 
11.              data:[ 
12.                  {name:'uspcat.com',age:1}, 
13.                  {name:'yfc',age:26} 
14.              ], 
15.              autoLoad:true 
16.         }); 
17.         s.each(function(model){ 
18.        console.log(model.get('name')); 
19.         }); 
20.     }); 
21. })(); 

运行结果：

 

uspcat.com yfc

--------------------------------------------------------------------------------------

这个例子主要讲Ext.data.Store的load方法和使用代理的方式，和注意使用ajax代理的时候不能使用each方法，因为是异步的，不能保证数据已经取回来了。

store3.js

1. (function(){ 
2.     Ext.Loader.setConfig({ 
3.       enabled:true 
4.     }); 
5.     Ext.onReady(function(){ 
6.     var s = new Ext.data.Store({ 
7.              fields:[ 
8.          {name:'name'}, 
9.                 {name:'age'} 
10.          ], 
11.              proxy:{ 
12.          type:'ajax',//方式的是ajax，程序不会阻塞，这是异步的 
13.                 url:'person.jsp' 
14.              } 
15.              //,autoLoad:true//这个放开会自动load,加上下面我们load的，总共会有两遍 
16.         }); 
17.  
18.     s.load(function(records,operation,success){ 
19.         Ext.Array.each(records,function(model){ 
20.            console.log(model.get('name')); 
21.         }); 
22.     }); 
23.  
24.     }); 
25. })(); 

person.jsp

1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
2. <% 
3.    response.getWriter().write("[{name:'uspcat.com',age:1},{name:'yfc',age:25}]"); 
4. %> 

运行结果：

 

uspcat.com yfc

当autoLoad:false的时候，person.jsp只会访问一次：

当autoLoad:false的时候，person.jsp只会访问两次：

 

 

----------------------------------------------------------------------------

这个例子主要讲Ext.data.Store的filter方法

store4.js

1. (function(){ 
2.     Ext.Loader.setConfig({ 
3.       enabled:true 
4.     }); 
5.     Ext.onReady(function(){ 
6.      var s = new Ext.data.Store({ 
7.              fields:[ 
8.          {name:'name'}, 
9.                 {name:'age'} 
10.           ], 
11.              proxy:{ 
12.          type:'ajax',//方式的是ajax，程序不会阻塞，这是异步的 
13.                 url:'person.jsp' 
14.              } 
15.              //,autoLoad:true//这个放开会自动load,加上下面我们load的，总共会有两遍 
16.         }); 
17.  
18.     s.load(function(records,operation,success){ 
19.                 // s.filter('name','yfc'); 
20.                 s.each(function(model){ 
21.              console.log(model.get('name')); 
22.                 }); 
23.         }); 
24.  
25.     }); 
26. })(); 

运行结果：

1.去掉了s.filter('name','yfc');

 

uspcat.com yfc

2.没有去掉s.filter('name','yfc');

 

yfc

--------------------------------------------------------------------------------

这个例子主要讲Ext.data.Store的find方法，查找字符串的位置

store5.js

1. (function(){ 
2.     Ext.Loader.setConfig({ 
3.       enabled:true 
4.     }); 
5.     Ext.onReady(function(){ 
6.     var s = new Ext.data.Store({ 
7.              fields:[ 
8.          {name:'name'}, 
9.                 {name:'age'} 
10.           ], 
11.              proxy:{ 
12.          type:'ajax',//方式的是ajax，程序不会阻塞，这是异步的 
13.                 url:'person.jsp' 
14.              } 
15.              //,autoLoad:true//这个放开会自动load,加上下面我们load的，总共会有两遍 
16.         }); 
17.  
18.     s.load(function(records,operation,success){ 
19.                 var index = s.find('name','yfc',0,false,true,false); 
20.                 console.log(index); 
21.         }); 
22.  
23.     }); 
24. })(); 

运行结果：

 

1

qqqqqqqqqqq

转载于:https://blog.51cto.com/gzzjsoft/1069662