Sencha Touch 2 : Store 操作

一 Store用途
Store用來儲存資料，並提供對資料作sorting,filtering與query的功能
Store利用Proxy與Server連線取得資料，Proxy內的Reader解析取得的資料
會對取得的資料再加工，然後將所有解析完資料轉成model物件
儲存在Store內以供使用

二.Store定義
1.storeId:
當store有設定storeId,即會被註冊到storeManager，
若沒設定會預設以該Store的Class Name當storeId
在Project的任何地方都可以透過
Ext.getStore(storeId)來參考到該store做操作
Ext.data.StoreManager.lookup('myStore')一樣
例

Ext.create('Ext.data.Store', {
    model: 'SomeModel',
    storeId: 'myStore'
});
var store = Ext.data.StoreManager.lookup('myStore');

2.model
設定載入的資料要以哪種model物件型態儲存
3.proxy
設定要使用哪種Proxy與Server溝通取得資料
4.clearOnPageLoad
設定當載入資料後，是否將原有在Store內的資料清掉，預設值為true，
若要多次載入多頁分頁資料，則這裡要設定true
5.sample

Ext.define("MyApp.store.MyStore", {
    extend: "Ext.data.Store",
    config: {      
        model: "MyApp.model.ItemModel",      
        proxy: {
            type: 'ajax',                  
            reader: {
                type: 'json',              
                rootProperty: function(data) {
                    ...
                    return data;                             
                }              
            }
        },      
        clearOnPageLoad:true,
        listeners:{
            load:function(store,records,_success,operation,opts){                
                .....        
            }
        }      
    }  
});

三.Store功能
1.sorters:設定這個Store內資料的排列規則
設定以哪個欄位來做排序
例：會依照artist欄位由大到小排列

sorters: [{
    property: 'artist',
    direction: 'DESC'
}]

DESC:由大到小
ASC:由小到大

2.filter:設定要取出store內的哪些資料
例：只有欄位name值=Ed的資料才會取出來

filters: [{
    property: 'name',
    value   : 'Ed'
}]

3.groupField,groupDir,grouper
4.sample

Ext.create('Ext.data.Store', {
    model: 'User',
    sorters: ['name', 'id'],//取得的資料會以name,id依序排列
    filters: {
        property: 'name',//只有欄位name值=Ed的資料才會取出來
        value   : 'Ed'
    },
    groupField: 'age',//以age欄位來group資料,
    groupDir: 'DESC'//用由大往小方式排列
});    

四.Store載入資料
1.使用data,直接設定資料內容與使用MemoryProxy
直接把資料寫在store內,這時會把data內的資料,直接
轉成model,這時在Store內不需要使用到proxy,但若需要將資料先處理過
再轉成model使用，則可以用MemoryProxy來處理

注意：MemoryProxy只能對array做一次性的讀取與處理,而無法對現存的array做add與update動作
例

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

2.load(options,scope)載入資料
參數
options:設定選項，這是一個非必填的Ext.data.Operation物件
scope:非必填，設定在這function內的this會指到哪個物件
預設是this(也就是執行store.load所在的view)

3.loadPage(page,options)分批載入的資料不斷累積

1. page:Number,要載入的分頁，這是必填欄位，但如果你並未在options內用設定使用到start,end..等分頁資訊，這裡可以隨便填一個數字，如1即可
   options:設定選項，這是一個非必填的Ext.data.Operation物件
2. clearOnPageLoad要設成false,否則前次載入的資料會被清除
3. 建議不要使用sorter功能，因為新載入資料後，全部資料會被重新排序，有可能會影響之前顯示的順序

4.Ext.data.Operation物件
在執行load或loadPage都會使用到options物件來設定
最常用的會是像設定callback，在載入完成後會被自動觸發
例

store.load({
    callback:function(records, operation, success){}
})

五.使用Store內的資料
1.當執行load取回傳資料一定要是array
若資料來源本身並非array,則要在reader內的root內先行處理
2.使用index找model
會找到位在index的model

store.getAt(index)

3.使用指定欄位值找model
會找到fielName值=value的那個model

store.findRecord(fieldName,value)

4.注意
取到model後，可以透過model.getData()或model.raw來使用資料
兩者都是取得Object物件，model.raw是載入的最原始資料內容
如果在載入資料後有使用rootProperty或是load event對資料處理過
那一定要取model.getData()來應用
model.raw是原始資料，可能會出錯

4.取得store資料數量

store.getData().length(取得目前資料數量)

或

store.getCount()

5.使用在callback內取得的資料
在執行load或loadPage時會設定Ext.data.Operation物件
使用options物件設定callback，在資料載入完成後，
即可在裡面做一些處理
callback會接收到3個參數

• records:
  當次所取得的資料array，如果在clearOnPageLoad=false情況下當次取得的資料並不一定會完全等於store內的資料
• operation:Operation物件本身
• success:boolean值

例

var _url="server/proxy.php?type=song&songid="+id;
Ext.getStore("SongFileStore").getProxy().setUrl(_url);         
Ext.getStore("SongFileStore").load({
    callback: function(records, operation, success) {
        console.log(records[0].data.url);            
    },
    scope: this        
});

六.Store應用
1.store與listView綁定
只要在listview設定使用哪個store
當該store更動時,listview會自動update不需自己設定
例

var list={            
    xtype:'itemList',
    itemId:'list',
    store:Ext.getStore('GroupItemsStore'),
    listeners:{
        itemsingletap:{
            fn:this.onClickItem,
            scope:this
        }                
    }           
}

2.callBack scope
在執行store.load設定其callback時
scope若設成this,則callback內部的this會指到這程式所在的View Class
若scope指到store上，則this就會指到這個store
例

Ext.getStore("SongCardStore").load({
    callback: function(records, operation, success) {
        //console.log('load song card compllete='+)
        console.log('this');
        console.log(this);
    },
    scope: Ext.getStore("SongCardStore")
});