[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