ExtJs--數據存儲與傳輸-高級store
前面幾篇文章介紹了proxy、reader、store,實際開發時,并不需要每次都對proxy、reader、store這三個對象進行配置,EXT為我們提供了幾種可選擇的整合方案。
1. SimpleStore= Store+ MemoryProxy+ ArrayReader
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var ds = Ext.data.SimpleStore({
data: [
['id1','name1','descn1'],
['id2','name2','descn2']
],
fields: ['id','name','descn']
});
|
SimpleStore是專為簡化讀取本地數組而設計的,設置上MemoryProxy需要的data和ArrayReader需要的fields就可以使用了。
2.JsonStore= Store+ HttpProxy+ JsonReader
|
1
2
3
4
5
6
7
8
9
|
var ds = Ext.data.JsonStore({
url: 'xxx.jsp',
root: 'root',
fields: ['id','name','descn']
});
|
JsonStore將JsonReader和HttpProxy整合在一起,提供了一種從后臺讀取JSON信息的簡便方法,大多數情況下可以考慮直接使用它從后臺讀取數據。
3.Ext.data.GroupingStore對數據進行分組
Ext.data.GroupingStore繼承自Ext.data.Store,它的主要功能是可以對內部的數據進行分組,我們可以在創建Ext.data.GroupingStore時指定根據某個字段進行分組,也可以在創建實例后調用它的groupBy()函數對內部數據重新分組,如下面的代碼所示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
var ds = new Ext.data.GroupingStore({
data: [
['id1','name1','female','descn1'],
['id2','name2','male','descn2'],
['id3','name3','female','descn3'],
['id4','name4','male','descn4'],
['id5','name5','female','descn5']
],
reader: new Ext.data.ArrayReader({
fields: ['id','name','sex','descn']
}),
groupField: 'sex',
groupOnSort: true
});
|
上例中,我們使用groupField作為參數,為Ext.data.Grouping設置了分組字段,另外還設置了groupOnSort參數,這個參數可以保證只有在進行分組時才會對Ext.data.Grouping- Store內部的數據進行排序。如果采用默認值,就需要手工指定sortInfo參數,從而指定默認的排序字段和排序方式,否則就會出現錯誤。
創建Ext.data.GroupingStore的實例之后,我們還可以調用groupBy()函數重新對數據進行分組。因為我們設置了groupOnSort:true,所以在重新分組時,EXT會使用分組的字段對內部數據進行排序。如果不希望對數據進行分組,也可以調用clearGrouping()函數清除分組信息,如下面的代碼所示。
|
1
2
3
|
ds.groupBy('id');
ds.clearGrouping();
|