1. 程式人生 > >Ext.data簡介(專門針對store和record已經collect()方法)

Ext.data簡介(專門針對store和record已經collect()方法)

@@Ext.data.Record

  Ext.data.Record就是一個設定了內部資料型別的物件,它是Ext.data.Store的最基本組成部分。如果把Ext.data.Store看作是一張二維表,那麼它的每一行就對應一個Ext.data. Record例項。

  Ext.data.Record的主要功能是儲存資料,並且在內部資料發生改變時記錄修改的狀態,它還可以保留修改之前的原始值。

  我們使用Ext.data.Record時通常都是由create()函式開始,首先用create()函式建立一個自定義的Record型別,如下面的程式碼所示。

  var PersonRecord = Ext

.data.Record.create([

  {name: 'name', type: 'string'},

  {name: 'sex', type: 'int'}

  ]);

  PersonRecord就是我們定義的新型別,包含字串型別的name和整數型別的sex兩個屬性,然後我們使用new關鍵字建立PersonRecord的例項,如下面的程式碼所示。

  var boy = new PersonRecord({

  name: 'boy',

  sex: 0

  });

  建立物件時,可以直接通過構造方法為物件賦予初始值,將'boy'賦值給name,0賦值給sex。

  現在,我們得到了PersonRecord的例項boy,如何才能得到它的屬性呢?以下三種方式都可以獲得boy中name屬性的資料,如下面的程式碼所示。

  alert(boy.data.name);

  alert(boy.data['name']);

  alert(boy.get('name'));

  這裡涉及Ext.data.Record的data屬性,這是定義在Ext.data.Record中的一個公共屬性,用於儲存當前record物件的所有資料。它是一個JSON物件,可以直接從它裡面獲得需要的資料。可以通過Ext.data.Record的get()函式方便地從data屬性中獲得指定的屬性值。

  如果我們需要修改boy中的資料,請不要使用以下方式直接操作data,如下面的程式碼所示。

  boy.data.name = 'boy name';

  boy.data['name'] = 'boy name';

  而應該使用set()函式,如下面的程式碼所示。

  boy.set('name', 'body name');

  set()函式會判斷屬性值是否發生了改變,如果改變了,就要將當前物件的dirty屬性設定為true,並將修改之前的原始值放入modified物件中,供其他函式使用。如果直接操作data中的值,record就無法記錄屬性資料的修改情況。

  Record的屬性資料被修改後,我們可以執行如下幾種操作。

  q commit()(提交):這個函式的效果是設定dirty為false,並刪除modified中儲存的原始資料。

  q reject()(撤銷):這個函式的效果是將data中已經修改了的屬性值都恢復成modified中儲存的原始資料,然後設定dirty為false,並刪除儲存原始資料的modified物件。

  q getChanges()獲得修改的部分:這個函式會把data中經過修改的屬性和資料放在一個JSON物件裡並返回。例如上例中,getChanges()返回的結果是{name:’body name’}。

  q 我們還可以呼叫isModified()判斷當前record中的資料是否被修改。

  Ext.data.Record還提供了用於複製record例項的函式copy()。

  var copyBoy = boy.copy();

  這樣我們就得到了boy的一個副本,它裡面包含了boy的data資料,但copy()函式不會複製dirty和modified等額外的屬性值。

@@Ext.data.Store

  Ext.data.Store是EXT中用來進行資料交換和資料互動的標準中介軟體,無論是Grid還是ComboBox,都是通過它實現資料讀取、型別轉換、排序分頁和搜尋等操作的。

  Ext.data.Store中有一個Ext.data.Record陣列,所有資料都存放在這些Ext.data. Record例項中,為後面的讀取和修改操作做準備。

  基本應用

  在使用之前,首先要建立一個Ext.data.Store的例項,如下面的程式碼所示。

  var data = [

  ['boy', 0],

  ['girl', 1]

  ];

  var store = new Ext.data.Store({

  proxy: new Ext.data.MemoryProxy(data),

  reader: new Ext.data.ArrayReader({}, PersonRecord)

  });

  store.load();

  每個store最少需要兩個元件的支援,分別是proxy和reader,proxy用於從某個途徑讀取原始資料,reader用於將原始資料轉換成Record例項。

  這裡我們使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader,將data陣列中的資料轉換成對應的幾個PersonRecord例項,然後放入store中。store建立完畢之後,執行store.load()實現這個轉換過程。

  經過轉換之後,store裡的資料就可以提供給Grid或ComboBox使用了,這就是Ext.data. Store的最基本用法。

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

 注:這裡的引數必須要dataIndex。如果我要得到所有的一行記錄。。是否就要record物件了嗎??

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

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

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

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

  alert(store.getTotalCount());

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

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

  alert(store.indexOfId(1001));

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

  store.loadData(data, true);

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

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

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

附加:

Ext.data.Store提供了一系列屬性和函式,利用它們對資料進行排序操作。

  可以在建立Ext.data.Store時使用sortInfo引數指定排序的欄位和排序方式,如下面的程式碼所示。

  var store = new Ext.data.Store({

  proxy: new Ext.data.MemoryProxy(data),

  reader: new Ext.data.ArrayReader({}, PersonRecord),

  sortInfo: {field: 'name', direction: 'DESC'}

  });

  這樣,在store載入資料之後,就會自動根據name欄位進行降序排列。對store使用store.setDefaultSort('name','DESC');也會達到同樣效果。

  也可以在任何時候呼叫sort()函式,比如store.sort('name', 'DESC');,對store中的資料進行排序。

  如果我們希望獲得store的排序資訊,可以呼叫getSortState()函式,返回的是類似{field: "name", direction: " DESC"}的JSON物件。

  與排序相關的引數還有remoteSort,這個引數是用來實現後臺排序功能的。當設定為remoteSort:true時,store會在向後臺請求資料時自動加入sort和dir兩個引數,分別對應排序的欄位和排序的方式,由後臺獲取並處理這兩個引數,在後臺對所需資料進行排序操作。remoteSort:true也會導致每次執行sort()時都要去後臺重新載入資料,而不能只對本地資料進行排序。

  !!從store中獲取資料

  從store中獲取資料有很多種途徑,可以依據不同的要求選擇不同的函式。最直接的方法是根據record在store中的行號獲得對應的record,得到了record就可以使用get()函式獲得裡面的資料了,如下面的程式碼所示。

  store.getAt(0).get('name')

  通過這種方式,我們可以遍歷store中所有的record,依次得到它們的資料,如下面的程式碼所示。

  for (var i = 0; i < store.getCount(); i++) {

  var record = store.getAt(i);

  alert(record.get('name'));

  }

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

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

  store.each(function(record) {

  alert(record.get('name'));

  });

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

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

  var records = store.getRange(0, 1);

  for (var i = 0; i < records.length; i++) {

  var record = records[i];

  alert(record.get('name'));

  }

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

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

  EXT還提供了函式find()和findBy(),可以利用它們對store中的資料進行搜尋,如下面的程式碼所示。

  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()函式的定義格式如下:

  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中的多個欄位,在函式中實現複雜邏輯。

  我們還可以使用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中的資料

  可以使用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設定本地排序,否則會不起作用。

  如果希望自己指定資料插入的索引位置,可以使用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

  })]);

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

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

  store.removeAll();

  store中沒有專門提供修改某一行record的操作,我們需要先從store中獲取一個record。對這個record內部資料的修改會直接反映到store上,如下面的程式碼所示。

  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({

  params: {start:0,limit:20},

  callback: function(records, options, success){

  Ext.Msg.alert('info', '載入完畢');

  },

  scope: store,

  add: true

  });

  q params是在store載入時傳送的附加引數。

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

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

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

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

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

  store.baseParams.start = 0;

  store.baseParams.limit = 20;

  為store載入資料之後,有時不需要把所有資料都顯示出來,這時可以使用函式filter和filterBy對store中的資料進行過濾,只顯示符合條件的部分,如下面的程式碼所示。

  filter( String field, String/RegExp value, [Boolean anyMatch],

  [Boolean caseSensitive] ) : void

  filter()函式的用法與之前談到的find()相似,如下面的程式碼所示。

  store.filter('name', 'boy');

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

  store.filterBy(function(record) {

  return record.get('name') == 'girl' && record.get('sex') == 1;

  });

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

  store.clearFilter();

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

相關推薦

Ext.data簡介專門針對storerecord已經collect()方法

@@Ext.data.Record   Ext.data.Record就是一個設定了內部資料型別的物件,它是Ext.data.Store的最基本組成部分。如果把Ext.data.Store看作是一張二維表,那麼它的每一行就對應一個Ext.data. Record例項。   E

LeetCode練習:蓄水池問題 內附JavaPython的實現方法

      刷了道練習題目,關於蓄水池的問題,這裡我分別用Python和Java實現一下。 題目: Given n non-negative integers a1, a2, ..., an , w

手把手教你學python第十三講MRO詳解神奇的魔法方法

如果圖片刷不出來,轉到https://www.bilibili.com/read/cv286207MRO重製關於MRO和C3演算法,我又去看了一些文章,然後發現了講的很清楚的文章http://kaiyuan.me/2016/04/27/C3_linearization/。裡面

Data Dictionary and Dynamic Performance Views數據字典動態性能視圖

exp system cat meta spa doc eas views sin Overview of the Data Dictionary Because Oracle Database stores data dictionary data in tables,

Linux下對lvm邏輯卷分割槽大小的調整針對xfsext4不同檔案系統

當我們在安裝系統的時候,由於沒有合理分配分割槽空間,在後續維護過程中,發現有些分割槽空間不夠使用,而有的分割槽空間卻有很多剩餘空間。如果這些分割槽在裝系統的時候使用了lvm(前提是這些分割槽要是lvm邏輯卷分割槽),那麼就可以輕鬆進行擴容或縮容!不同檔案系統型別所對應的建立、檢查、調整命令不同,下面就針對xf

Ext.data專題九:關於scopecreateDelegate()

關於JavaScript中this的使用,這是一個由來已久的問題了。 我們這裡就不介紹它的發展歷史了,只結合具體的例子,告訴大家可能會遇到什麼問題,在遇到這些問題時EXT是如何解決的。 在使用EXT時,最常碰到的就是使用Ajax回撥函式時出現的問題,如下面的程式碼所示: <input type

Ext.data專題一:Ext.data簡介

Ext.data簡介 Ext.data在名稱空間中定義了一系列store、reader和proxy。 Grid和ComboxBox都是以Ext.data為媒介獲取資料的,它包含非同步載入、型別轉換、分頁等功能。 Ext.data預設支援Array、JSON、XML等資料格式,

走入計算機的第四天linux的熱鍵一些簡單的命令

簡單介紹 所有 環境 信息 名稱 命令 -- log stdin 1linux的簡單介紹 linux是一款免費使用和自由傳播的內似於unix的操作系統軟件,是一個基於POSI和unix的多用戶,多任務,支持多線程和多CPU的一種操作系統。主要用於服務器,特別是網絡服務器

DOM增刪操作select動態增加刪除以及清空

select() move rip 清空 cli oct for elm pen <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><

WordPress 前端投稿/編輯發表文章插件 DJD Site Post支持遊客已註冊用戶漢化版 免費下載

blank 郵件 自定義字段 files 允許 在線 pos 編輯插件 新建 插件簡介 前面逍遙樂給大家推薦了 WordPress用戶前端化專業版WP User Frontend Pro WordPress中文漢化插件v2.1.9 今天逍遙樂給大家帶來的wordpress插

按鈕相關屬性設置按鈕文字位置 圖片位置設置

idt target cal sta brush 位置 icontrol tle 屬性 - (UIButton *)navSearBtn { if (!_navSearBtn) { _navSearBtn = [[UIButton alloc]in

Android Theme主題繼承SDK下主題v7包下主題

Android Theme 主題樣式在styles.xml文件裏,一般有兩種繼承: 繼承android主題 <style name="AppBaseTheme" parent="android:Theme.Holo"> 重寫樣式的話n

Eclipse下把jar包放到工程lib下通過buildpath加載有什麽不同解決找不到類的中級方法

導入 alt 我們 AI cli 註意 需要 分享圖片 eclips 我通過Eclipse的 User Libranry 將jar導入 Eclipse裏面,編譯沒有問題,運行的時候就報class文件沒有定義,後來上網上查了下,原因找到啦,是這樣的: 用Java Build

python 六劍客匿名函數內建函數

換行符 range 映射 append color 一行 als nta params 一. 匿名函數lambda 1.lambda只是一個表達式,函數體比def簡單很多。 2.lambda的主體是一個表達式,而不是一個代碼塊。僅僅能在lambda表達式中封裝有限的邏輯

MyBatis學習——第五篇手動分頁pagehelper分頁實現

1:專案場景介紹 在專案中分頁是十分常見的功能,一般使用外掛實現分頁功能,但是在使用外掛之前我們首先手動寫出分頁程式碼,發然對比外掛實現的分頁,利於我們理解分頁底層實現和更好的實現外掛分頁實用技術,本次使用的外掛是PageHelper(採用都是物理分頁) 在開始之前我們建立兩個表,分別是t_

層次序創建二叉樹圖形界面控制臺輸入實現

ride repaint 註冊 read public ria span performed ttext 1 2018.11.7 2 XT 3 4 /** 5 * 功能:構造二叉樹 6 * 說明: 7 * 1.主函數輸入模式有兩種,BT

MFC入門-- MFC圖片/文字控制元件迴圈顯示文字圖片的小程式

慣例附上前幾個部落格的連結: MFC入門(一)簡單配置:http://blog.csdn.net/zmdsjtu/article/details/52311107 MFC入門(二)讀取輸入字元:http://blog.csdn.net/zmdsjtu/article/details/52315088 &

9.基於FFMPEG+SDL2播放視訊解碼執行緒播放執行緒分開

參考資料: 1.雷博部落格 2. An ffmpeg and SDL Tutorial 繼續FFMPEG學習之路。。。 文章目錄 1 綜述 2 程式碼1(基礎程式碼) 3 程式碼2(播放執行緒和解碼執行緒分開) 3.1 幾個結構體

swift - xcode10 - 點選事件互動BUG - 手勢button的addTarget方法

1. 現象button 點選閃退:沒有任何原因 ,在聽雲檢測上,顯示 BUG2: 手勢 沒有任何作用,哪怕設定  isUserInteractionEnabled 和isEnabled 為true 都不行原因 及 解決方法 :沒有懶載入。。 解決方法: 1 新增lazy 2.

swift - xcode10 - 點擊事件交互BUG - 手勢button的addTarget方法

font 添加 手勢 沒有 mage 控件 xcode .com enabled 1. 現象button 點擊閃退:沒有任何原因 ,在聽雲檢測上,顯示 BUG2: 手勢 沒有任何作用,哪怕設置 isUserInteractionEnabled 和isEnabled 為tr