[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

(function(){
    Ext.Loader.setConfig({
      enabled:true
    });
    Ext.onReady(function(){
        Ext.define("person",{
            extend:'Ext.data.Model',
            fields:[
               {name:'name'},
               {name:'age'}
            ],
            proxy:{
               type:'memory'
            }
        });
    var s = new Ext.data.Store({
             data:[
                 {name:'uspcat.com',age:1},
                 {name:'yfc',age:26}
             ],
             model:'person',
             autoLoad:true
        });
        s.each(function(model){
             console.log(model.get('name'));
        });
    });
})();

运行结果：

 

uspcat.com yfc

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

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

store2.js

(function(){
    Ext.Loader.setConfig({
      enabled:true
    });
    Ext.onReady(function(){
       var s = new Ext.data.Store({
             fields:[
                {name:'name'},
                {name:'age'}
             ],
             data:[
                 {name:'uspcat.com',age:1},
                 {name:'yfc',age:26}
             ],
             autoLoad:true
        });
        s.each(function(model){
            console.log(model.get('name'));
        });
    });
})();

运行结果：

 

uspcat.com yfc

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

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

store3.js

(function(){
    Ext.Loader.setConfig({
      enabled:true
    });
    Ext.onReady(function(){
       var s = new Ext.data.Store({
             fields:[
                {name:'name'},
                {name:'age'}
             ],
             proxy:{
                type:'ajax',//方式的是ajax，程序不会阻塞，这是异步的
                url:'person.jsp'
             }
             //,autoLoad:true//这个放开会自动load,加上下面我们load的，总共会有两遍
        });

    s.load(function(records,operation,success){
        Ext.Array.each(records,function(model){
           console.log(model.get('name'));
        });
    });

    });
})();

person.jsp

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

运行结果：

 

uspcat.com yfc

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

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

 

 

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

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

store4.js

(function(){
    Ext.Loader.setConfig({
      enabled:true
    });
    Ext.onReady(function(){
      var s = new Ext.data.Store({
             fields:[
                {name:'name'},
                {name:'age'}
             ],
             proxy:{
                type:'ajax',//方式的是ajax，程序不会阻塞，这是异步的
                url:'person.jsp'
             }
             //,autoLoad:true//这个放开会自动load,加上下面我们load的，总共会有两遍
        });

    s.load(function(records,operation,success){
                // s.filter('name','yfc');
                s.each(function(model){
                   console.log(model.get('name'));
                });
        });

    });
})();

运行结果：

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

 

uspcat.com yfc

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

 

yfc

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

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

store5.js

(function(){
    Ext.Loader.setConfig({
      enabled:true
    });
    Ext.onReady(function(){
    var s = new Ext.data.Store({
             fields:[
                {name:'name'},
                {name:'age'}
             ],
             proxy:{
                type:'ajax',//方式的是ajax，程序不会阻塞，这是异步的
                url:'person.jsp'
             }
             //,autoLoad:true//这个放开会自动load,加上下面我们load的，总共会有两遍
        });

    s.load(function(records,operation,success){
                var index = s.find('name','yfc',0,false,true,false);
                console.log(index);
        });

    });
})();

运行结果：

 

1

qqqqqqqqqqq