1. 程式人生 > >Extjs中Ext.data.Store的多種操作詳解

Extjs中Ext.data.Store的多種操作詳解

前言

Store是extjs中的重中之重,貼過來,備用

查詢操作

Store.getCount()

Store.getCount()返回的是store中的所有資料記錄,然後使用for迴圈遍歷整個store,從而得到每條記錄。

store.each()

除了使用getCount()的方法外,還可以使用each()函式,如下面的程式碼所示。

 store.each(function(record) {   
     alert(record.get('name'));   
 });  

Each()可以接受一個函式作為引數,遍歷內部record,並將每個record作為引數傳遞給function()處理。
如果希望停止遍歷,可以讓function()返回false。

store.getRange()

也可以使用getRange()函式連續獲得多個record,只需要指定開始和結束位置的索引值,如下面的程式碼所示。

var records = store.getRange(0, 1);   
for (var i = 0; i < records.length; i++) {  
    var record = records[i];  
    alert(record.get('name'));   
 }  

store.getById()

如果確實不知道record的id,也可以根據record本身的id從store中獲得對應的record,如下面的程式碼所示。

store.getById(1001).get('name')  

store. find()和store .findBy()

EXT還提供了函式find()和findBy(),可以利用它們對store中的資料進行搜尋,如下面的程式碼所示。
1. find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],[Boolean caseSensitive] )

在這5個引數中,只有前兩個是必須的。
第一個引數property代表搜尋的欄位名;
第二個引數value是匹配用字串或正則表示式;
第三個引數startIndex表示從第幾行開始搜尋;
第四個引數anyMatch為true時,不必從頭開始匹配;
第五個引數caseSensitive為true時,會區分大小寫。
如下面的程式碼所示:

var index = store.find('name','g');   
alert(store.getAt(index).get('name'));  

與find()函式對應的findBy()函式的定義格式如下:
1. findBy( Function fn, [Object scope], [Number startIndex] ) : Number
findBy()函式允許使用者使用自定義函式對內部資料進行搜尋。
fn返回true時,表示查詢成功,於是停止遍歷並返回行號。
fn返回false時,表示查詢失敗(即未找到),繼續遍歷,如下面的程式碼所示。

 index = store.findBy(function(record, id) {  
      return record.get('name') == 'girl' && record.get('sex') == 1;  
 });   
 alert(store.getAt(index).get('name'));  

通過findBy()函式,我們可以同時判斷record中的多個欄位,在函式中實現複雜邏輯。

store. query ()和store . queryBy ()

我們還可以使用query和queryBy函式對store中的資料進行查詢。

與find和findBy不同的是,query和queryBy返回的是一個MixCollection物件,裡面包含了搜尋得到的資料,如下面的程式碼所示。

alert(store.query('name', 'boy'));   
alert(store.queryBy(function(record) {   
     return record.get('name') == 'girl' && record.get('sex') == 1;  
}));  

更新store中的資料

store.add();

可以使用add(Ext.data.Record[] records)向store末尾新增一個或多個record,使用的引數可以是一個record例項,如下面的程式碼所示。

 store.add(new PersonRecord({   
      name: 'other',   
      sex: 0   
 }));  

Add()的也可以新增一個record陣列,如下面的程式碼所示:

 store.add([new PersonRecord({   
      name: 'other1',   
      sex: 0   
  }), new PersonRecord({   
       name: 'other2',   
      sex: 0   
})]);  

Add()函式每次都會將新資料新增到store的末尾,這就有可能破壞store原有的排序方式。如果希望根據store原來的排序方式將新資料插入到對應的位置,可以使用addSorted()函式。它會在新增新資料之後立即對store進行排序,這樣就可以保證store中的資料有序地顯示,如下面的程式碼所示。

 store.addSorted(new PersonRecord({   
       name: 'lili',   
      sex: 1   
 }));  

store會根據排序資訊查詢這條record應該插入的索引位置,然後根據得到的索引位置插入資料,從而實現對整體進行排序。這個函式需要預先為store設定本地排序,否則會不起作用。

store.insert();

如果希望自己指定資料插入的索引位置,可以使用insert()函式。它的第一個引數表示插入資料的索引位置,可以使用record例項或record例項的陣列作為引數,插入之後,後面的資料自動後移,如下面的程式碼所示。

  store.insert(3, new PersonRecord({   
      name: 'other',   
     sex: 0   
  }));   

  store.insert(3, [new PersonRecord({   
      name: 'other1',   
       sex: 0   
 }), new PersonRecord({   
    name: 'other2',   
    sex: 0   
})]);  

store. remove ()和store. removeAll()

刪除操作可以使用remove()和removeAll()函式,它們分別可以刪除指定的record和清空整個store中的資料,如下面的程式碼所示。

 store.remove(store.getAt(0));   
 store.removeAll();  

###store.getAt().set();
store中沒有專門提供修改某一行record的操作,我們需要先從store中獲取一個record。對這個record內部資料的修改會直接反映到store上,如下面的程式碼所示。
1. store.getAt(0).set(‘name’, ‘xxxx’);
修改record的內部資料之後有兩種選擇:執行rejectChanges()撤銷所有修改,將修改過的record恢復到原來的狀態;執行commitChanges()提交資料修改。在執行撤銷和提交操作之前,可以使用 getModifiedRecords()獲得store中修改過的record陣列。

與修改資料相關的引數是 pruneModifiedRecords,如果將它設定為true,當每次執行刪除或reload操作時,都會清空所有修改。這樣,在每次執行刪除或 reload操作之後,getModifiedRecords()返回的就是一個空陣列,否則仍然會得到上次修改過的record記錄

載入及顯示資料

store.load()

store建立好後,需要呼叫load()函式載入資料,載入成功後才能對store中的資料進行操作。load()呼叫的完整過程如下面的程式碼所示。

  store.load({   
      params: {start:0,limit:20},   
      callback: function(records, options, success){  
         Ext.Msg.alert('info', '載入完畢');   
      },   
     scope: store,   
     add: true  
 });  
  1. params是在store載入時傳送的附加引數。

  2. callback是載入完畢時執行的回撥函式,它包含3個引數:records引數表示獲得的資料,options表示執行load()時傳遞的引數,success表示是否載入成功。

  3. Scope用來指定回撥函式執行時的作用域。

  4. Add為true時,load()得到的資料會新增在原來的store資料的末尾,否則會先清除之前的資料,再將得到的資料新增到store中。

一般來說,為了對store中的資料進行初始化,load()函式只需要執行一次。如果用params引數指定了需要使用的引數,以後再次執行reload()重新載入資料時,store會自動使用上次load()中包含的params引數內容。

如果有一些需要固定傳遞的引數,也可以使用baseParams引數執行,它是一個JSON物件,裡面的資料會作為引數傳送給後臺處理,如下面的程式碼所示。

 store.baseParams.start = 0;   
 store.baseParams.limit = 20;  

store. Filter();

為store載入資料之後,有時不需要把所有資料都顯示出來,這時可以使用函式filter和filterBy對store中的資料進行過濾,只顯示符合條件的部分,如下面的程式碼所示。
1. filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void

filter()函式的用法與之前談到的find()相似,如下面的程式碼所示。
1. store.filter(‘name’, ‘boy’);

對應的filterBy()與findBy()類似,也可以在自定義的函式中實現各種複雜判斷,如下面的程式碼所示。

  store.filterBy(function(record) {   
      return record.get('name') == 'girl' && record.get('sex') == 1;  
 });  

如果想取消過濾並顯示所有資料,那麼可以呼叫clearFilter()函式,如下面的程式碼所示。
1. store.clearFilter();

如果想知道store上是否設定了過濾器,可以通過isFiltered()函式進行判斷。

Ext.data.Store其他功能

除了上面提到的資料獲取、排序、更新、顯示等功能外,store還提供了其他一些功能函式。

store.collect()

  1. collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array

collect函式獲得指定的dataIndex對應的那一列的資料,當allowNull引數為 true時,返回的結果中可能會包含null、undefined或空字串,否則collect函式會自動將這些空資料過濾掉。當 bypassFilter引數為true時,collect的結果不會受查詢條件的影響,無論查詢條件是什麼都會忽略掉,返回的資訊是所有的資料,如下面的程式碼所示。

  alert(store.collect('name'));  

這樣會獲得所有name列的值,示例中返回的是包含了’boy’和’girl’的陣列。

store.getTotalCount()

getTotalCount()用於在翻頁時獲得後臺傳遞過來的資料總數。如果沒有設定翻頁,get- TotalCount()的結果與getCount()相同,都是返回當前的資料總數,如下面的程式碼所示。

  alert(store.getTotalCount()); 

indexOf(Ext.data.Record record)和indexOfId(String id)

indexOf(Ext.data.Record record)和indexOfId(String id)函式根據record或record的id獲得record對應的行號,如下面的程式碼所示。

alert(store.indexOf(store.getAt(1)));   
alert(store.indexOfId(1001));  

store.loadData()

loadData(object data, [Boolean append])從本地JavaScript變數中讀取資料,append為true時,將讀取的資料附加到原資料後,否則執行整體更新,如下面的程式碼所示。
1. store.loadData(data, true);

store.sum();

Sum(String property, Number start, Number end):Number用於計算某一個列從start到end的總和,如下面的程式碼所示。

alert(store.sum('sex'));  

如果省略引數start和end,就計算全部資料的總和。

store還提供了一系列事件(見下表),讓我們可以為對應操作設定操作函式。
這裡寫圖片描述

var storeCddm=new Ext.data.Store({
    url:getAppPath()+'/bmcdxx00.do?method=QueryDataByYYDWDM',
    baseParams:{},
    reader:new Ext.data.JsonReader({
        totalProperty:'totalProperty',
        root:'rows',
        id:'BH0000'
    },[
       'BH0000',
       'MC0000',
       'YYDWDM'
       ])
});
var request = {strYydwdm:Ext.getCmp('YYDWDMS').getValue()};
storeCddm.reload({params:request});

相關推薦

ExtjsExt.data.Store多種操作

前言 Store是extjs中的重中之重,貼過來,備用 查詢操作 Store.getCount() Store.getCount()返回的是store中的所有資料記錄,然後使用for迴圈遍歷整個store,從而得到每條記錄。 store.e

extjsExt.data.Store[Grid]操作 【增刪修改】

Ext.data.Store是extjs的資料結構。 主要用於extjs的grid和combobox等控制元件的資料載入和操作。實際上對grid的增刪改可以通過對store的操作來控制. 1、增加提交:      buttons: [{             text:

ExtJsExt.data.Store

因為上次用過Ext.data.Store,覺得挺重要的,  故轉載了一篇http://blog.csdn.net/davidxj/archive/2009/04/23/4103647.aspx Ext.data.Store的基本用法在使用之前,首先要建立一個Ext.data.

requests.post()方法data、json引數

json和dict python中的dict型別要轉換為json格式的資料需要用到json庫: import json   <json> = json.dumps(<dict>) <dict> = json.loads(<json&

hive開發對分割槽的各種操作

    hive開發中,在儲存資料時,為了更快地查詢資料和更好地管理資料,都會對hive表中資料進行分割槽儲存。所謂的分割槽,在hive表中體現的是多了一個欄位。而在底層檔案儲存系統中,比如HDFS上,分割槽則是一個資料夾,或者說是一個檔案目錄,不同的分割槽,就是資料存放在根

keil c51data idata xdata code

51微控制器採用哈佛結構。記憶體空間編址有重疊。可以在不同匯流排(本文稱其為匯流排域,簡稱域)上定義不同的變數。在keilc51中定義了data idata xdata code幾種域修飾符。這些修飾符決定了變數訪問方式。 data:用mov直接訪問的內部RAM idata

手把手教你ExtJS從入門到放棄——篇二十三(示例20:Ext.dom.Element類常用增刪改查方法

方法多多,就講部分常用的 查詢系: onReady就不寫了,上核心程式碼 contains:引數可以傳id或者元素 、 child:返回該元素的子元素 down(選擇器):根據選擇器獲取該元素下層內層元素(常用) first:獲取第一個子元素

Sencha(Extjs) Ext.data.Store與Reader結合載入多重巢狀資料物件

Sencha(Extjs) Ext.data.Store與Reader結合載入多重巢狀資料物件 Ext.data.Readers常用於解析Model或Store中載入的資料,例如Ajax請求返回的資料(XML/JSON)。通過對每個Model的associations的屬性配置,Read

ExtJS教程(6)---Ext.data.Store

Store通常與Model結合使用,Store是Model的集合 Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'firstName', type:

Ext4.2Ext.data.Model和Ext.data.Store的區別

一、Ext.data.Model       (1)Model代表應用程式管理的一些物件。例如,我們可能會為 我們想在系統中建模的現實世界中的一些物體像使用者、產品和汽車等定義一個Model。這些Model在 模型管理器中註冊,被Store使用, 而這些Store又被許多 E

extjsExt.Ajax.request同步請求和非同步請求

用Ext.Ajax.request請求預設是非同步請求,這就導致定義的物件無法識別,沒有定義,因此需要將請求方式改為同步。請看程式碼。 function showFormPanel(){ if(centerPanel.getSelectionModel().hasSelection()){

sql去重複操作SQLdistinct的用法

在使用mysql時,有時需要查詢出某個欄位不重複的記錄,這時可以使用mysql提供的distinct這個關鍵字來過濾重複的記錄,但是實際中我們往往用distinct來返回不重複欄位的條數(count(distinct id)),其原因是distinct只能返回他的目標欄位,而無法返回其他欄位,例如有如下表

ext6.2分頁給加額外引數用Ext.data.Store的extraParams

我們分頁時候經常會用到 根據上一個id值在進行分頁,預設的beforload不好用,可以這樣在store里加屬性值給Ext.data.Store新增額外的預設引數 Ext.define('Tes

Python3字串操作 字串操作方法大全

1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 #Author:sking 4 #Python3字串操作方法詳解 Python3中字串操作方法大全 5 6 name = "skings" 7 8 print(nam

[Extjs6] 使用extraParames引數給Ext.data.Store新增額外的引數

定義store 注意extraParames引數的使用。 Ext.define('Test.store.Contacts', { extend: 'Ext.data.Store',

Ext.data.Store load 後觸發事件

誰要看到就當我在說胡話,只是為自己專案中使用到,怕忘記所以記錄下來. 為store新增事件 store.addListener('load', function(st, rds, opts) {         // st 是當前的store, rds是讀到的Record

ExtJsExt.Ajax.request()跟getForm().submit()得用法

//Ajax請求用回撥函式做的事情,回撥函式不管是成功還是失敗都會執行 Ext.Ajax.request({ url : '#/validEmployee.do',  params : {employee_id : employee_i

pythonlist操作

1.定義list >>> li = ["a", "b", "mpilgrim", "z", "example"] >>> li ['a', 'b', 'mpilgrim', 'z', 'example'] >>> li[

Ext.data.Store介紹

store是一個為Ext器件提供record物件的儲存容器,行為和屬性都很象資料表  先看一段程式碼: var store = new Ext.data.Store({ proxy:new Ext.data.ScriptTagProxy({url:'/xxx/xx.

Ext.data.Store動態修改url

authorStore = new Ext.data.Store( {}); 直接這樣修改store的url是不行的: authorStore.url = path; 在load與reload指定url也是不行的: authorStore.load({url:path,pa