Ext JS 6學習文檔-第5章-表格組件(grid)
使用 Grid
本章將探索 Ext JS 的高級組件 grid 。還將使用它幫助讀者建立一個功能齊全的公司目錄。本章介紹下列幾點主題：
- 基本的 grid
- 排序
- 渲染器
- 過濾
- 分頁
- 單元格編輯
- 行編輯
- 分組
- 分組 grid（pivot grid）
- 公司目錄 —一個示例項目
grid 組件是 Ext JS 中最強大的一個組件。它有很多的選項和配置，能以任何你希望的形式來構建 grid。
Ext JS 的 grid 組件提供完整的支持分頁，排序，過濾，搜索，編輯行，編輯單元格，分組，工具欄，滾動緩沖，列的調整和隱藏，列分組，多重排序，行擴展等，強大且實用的功能。
本章的主要目標是為你展示 Ext JS 的 grid 組件的功能以及如何利用這些提供的功能來構建一個簡單的應用 公司目錄(Company Directory)。最終的設計如下圖所示：
這個示例項目中使用的最重要的組件就是 grid ，分頁欄，和行編輯插件。同時這個示例項目中也涉及了其他的前面章節所學過的內容。
基本的 grid
讓我們從最基本的 grid 開始，創建一個 grid 組件，使用 Ext.grid.Panel ，你至少需要制定 grid 面板有哪些列和指定 store 來獲取數據。這個類名，在現代化工具包（modern toolkit）中是 Ext.grid.Grid，但是在經典工具包（classic toolkit）中是 Ext.grid.Panel 。這兩者有一些細微的區別，但是大多數概念是相同的。
我們首先創建一個 store 使用內置硬編碼的 model 數據。
下列 model 使用的三個字符串類型的字段，store 使用內置數據並指定了所使用的 model ：
|
1
2
3
4
|
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [ 'id', 'productname', 'desc', 'price' ]
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var productStore = Ext.create('Ext.data.Store', {
model: 'Product',
data: [{
id: 'P1',
productname: 'Ice Pop Maker',
desc: 'Create fun and healthy treats anytime',
price: '$16.33'
}, {
id: 'P2',
productname: 'Stainless Steel Food Jar',
desc: 'Thermos double wall vacuum insulated food jar',
price: '$14.87'
},{
id: 'P3',
productname: 'Shower Caddy',
desc: 'Non-slip grip keeps your caddy in place',
price: '$17.99'
}, {
id: 'P4',
productname: 'VoIP Phone Adapter',
desc: 'Works with Up to Four VoIP Services Across One Phone Port',
price: '$47.50'
}]
});
|
OK，現在可以使用 Ext.grid.Panel 來創建 grid 了，記得要指定 store 。每一列都可以設置 width 和 flex 。我們將 ‘Description’ 列設置 flex 為 1 ，指定這個屬性，這一列會使用其他兩列余下的所有寬度。
列的 dataIndex 屬性是指定對應 Product 模型中的哪個字段。為 id 列設置 hidden 屬性 為 true 使該列保持隱藏，如以下代碼所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
width: 600,
title: 'Products',
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
},{
text: 'Name',
width:150,
dataIndex: 'productname'
},{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1
},{
text: 'price',
width: 100,
dataIndex: 'price'
}]
});
|
下列截圖為以上代碼的輸入。默認的列寬度是可調整的；如果需要你可以指定一個固定寬度。
排序
這是默認的列菜單，可以用來排序，隱藏或顯示列。點擊每一列上的細箭頭圖標，這個列菜單就會顯示。排序功能可以從界面或代碼上添加：
使用代碼的寫法，為列 Description 設置 sortable 屬性為 false ，此選項將為這個列隱藏排序。
默認的排序是客戶端排序。如果想開啟服務端排序，你需要為 store 設置 remoteSort 屬性 為 true 。這時候你界面選擇排序后，store 將會把排序信息（字段和排序次序）作為參數發送到服務器。
renderer
列的 renderer 配置可以用來改變列內容的呈現方式。你也許已經注意到 price 列並沒有顯示貨幣符號。現在我們使用 renderer 屬性為 price 列的值增加 $ 作為前綴：
|
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
28
|
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
width: 600,
title: 'Products',
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
}, {
text: 'Name',
width:150,
dataIndex: 'productname'
}, {
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1
}, {
text: 'price',
width: 100,
dataIndex: 'price',
renderer: function(value) {
return Ext.String.format('${0}', value);
}
}]
});
|
輸出如下所示：
同樣的，你可以使用 renderer 來描繪 HTML 標簽到列中。還有 URL 和圖片。
過濾
通過添加 Ext.grid.filters.Filters (ptype: gridfilters) 插件到 grid 並對列進行配置可以很容易實現過濾功能：
|
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
28
29
30
31
32
|
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
plugins: 'gridfilters',
width: 600,
title: 'Products',
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
},{
text: 'Name',
width:150,
dataIndex: 'productname',
filter:'string'
},{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1,
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for…'
}
}
},{
text: 'price',
width: 100,
dataIndex: 'price'
}]
});
|
對每一列你都可以指定過濾類型，例如 string， bool， 等等，還有檢索字段的額外配置（例如 emptyText 就是空文本時的提示內容）。
這里是演示的在創建時添加過濾器，但也是可以在 grid 創建后再添加的。
分頁
如果你有成千上萬的數據，你肯定不想一次加載上萬條記錄(這句是廢話啊)，更好的方法是添加分頁工具欄，或者使用緩沖滾動條。
現在我們在之前的例子上添加分頁工具欄 Ext.toolbar.Paging (xtype: pagingtoolbar)。這里我們將會把分頁工具欄添加到 dockedItems ，它是Ext.panel.Panel 的一個屬性， 並且 dockedItems 里配置的項可以設置停駐在 panel 的任意 上，下，左或右邊。
|
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
28
29
30
|
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
width: 600,
title: 'Products',
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
},{
text: 'Name',
width:150,
dataIndex: 'productname'
},{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex:1
},{
text: 'price',
width: 100,
dataIndex: 'price'
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: productStore,
dock: 'bottom',
displayInfo: true
}]
});
|
然后，下面這是 store 的代碼，store 從 JSON 文件中讀取數據：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var productStore = Ext.create('Ext.data.Store', {
model: 'Product',
pageSize: 10,
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
}
});
|
rootProperty 屬性告訴 store 從 JSON 文件中哪個地方查找記錄，同時 totalProperty 屬性讓 store 知道從哪里讀取記錄總數。 為了得到正確的結果，當你使用服務器分頁時，需要指定 totalProperty 屬性，因為這個值將用於分頁工具欄。
pageSize 屬性的值為 10 它為每頁顯示的記錄數。
- 這個參數用於服務器處理分頁，並且返回所請求的數據，而不是整個集合。如果你是從文件中讀，那么響應將包含 JSON 文件中的所有記錄。
使用了分頁工具欄的結果輸出：
單元格編輯
grid 中的單元格編輯插件為 Ext.grid.plugin.CellEditing 。可以為 grid 添加單元格編輯的支持。
OK，現在為 grid 添加單元格編輯的功能，簡單的添加 cellditing 插件並為必要的列設置編輯器。你可以添加所有列都可以支持單元格編輯，或者為指定列添加編輯器。
單元格編輯器可以是簡單的文本框，或者你也可以添加一些復雜的組件，例如 combobox（附帶的為 combobox 添加 store 支持）。
下列例子添加了一個文本框編輯器到一個列，和添加了一個 combobox （附帶的為 combobox 添加 store 支持）到另一個列：
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
plugins: ['cellediting','gridfilters'],
width: 600,
title: 'Products',
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
},{
text: 'Name',
width:150,
dataIndex: 'productname',
filter:'string',
editor: {
allowBlank: false,
type: 'string'
}
},{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1
},{
text: 'Price',
width: 100,
dataIndex: 'price'
},{
text: 'Type',
width: 100,
dataIndex: 'type',
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
[ 'Bath','Bath'],
[ 'Kitchen','Kitchen'],
[ 'Electronic','Electronic'],
[ 'Food', 'Food'],
[ 'Computer', 'Computer' ]
]
})
}]
});
|
上面的例子中，以下代碼是用於設置編輯器的 Type ，不過這里我們使用了硬編碼的內置數據，但是它是可以配置從服務器讀取數據的：
|
1
2
3
4
5
6
7
8
9
10
11
|
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
['Bath','Bath'],
['Kitchen','Kitchen'],
['Electronic','Electronic'],
['Food', 'Food'],
['Computer', 'Computer']
]
})
|
Type 可以是任意的受支持的表單組件，例如日期選擇器，復選框，單選按鈕，數字文本框等等。另外也可以為編輯器添加表單校驗功能。
截圖為以上代碼的輸出結果：
一旦編輯了記錄，默認不會存到服務器。你可以設置 store 的 autosync 屬性為 true ，這將會觸發一個 CRUD 的請求到服務器。
如果你不希望同步立即發生，那么你可以在需要時調用 store 的 save 或 sync 方法。例如可以在 grid 的頭部添加 Save 按鈕 來調用 store 的 save 或 sync方法。
文本框編輯器，注意有一個小紅色標記在第一行第一列的左上角。這個標記是讓用戶知道這行記錄有更新。
行編輯
在單元格編輯的一節中，你每次只能編輯一個單元格，但是在行編輯中，你每次可以編輯一行內容。
使用行編輯插件：Ext.grid.plugin.RowEditing 替換掉單元格編輯插件。你只需要在上面的代碼中把 [‘cellediting’,‘gridfilters’] 替換為 [‘rowediting’,‘gridfilters’] 你將得到以下輸出：
這個行編輯插件也會應用到本章接下來的示例項目中，你會在那里找到額外的一些內容。
分組
為了對列進行分組，你需要在 store 的 groupField 屬性上指定分組字段，並且我們需要在 grid 設置 Ext.grid.feature.Feature ，如以下代碼所示：
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
var productStore = Ext.create('Ext.data.Store', {
model: 'Product',
pageSize: 10,
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
},
groupField: 'type'
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: productStore,
width: 600,
title: 'Products',
features: [{
id: 'group',
ftype: 'grouping',
groupHeaderTpl : '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
}],
columns: [{
text: 'Id',
dataIndex: 'id',
hidden: true
},{
text: 'Name',
width:150,
dataIndex: 'productname'
},{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1,
groupable:false
},{
text: 'Price',
width: 100,
dataIndex: 'price'
},{
text: 'Type',
width: 100,
dataIndex: 'type'
}]
});
|
以上代碼所示的輸出：
下圖顯示了分組菜單。使用此菜單，可以在運行時通過 grid 的其他字段分組。這個選項可以設置 enableGroupingMenu 屬性為 false 來關閉，上面的代碼已經有例子了。
分組的模板可以用來添加一些額外的信息，例如分組后的數量或其他任何你想要的信息，通過 groupHeaderTpl : ‘{name}’，來實現。現在將上面的代碼修改為 groupHeaderTpl : ‘{columnName}: {name} ({rows.length} Item{[values. rows.length > 1 ? “s” : “”]})’, 得到下列輸出：
pivot grid
這可以讓你重新整理和匯總選定的列數據和行數據，以獲得所需的報表。
比方說你有一個公司的員工提交的費用數據列表，然后你想看到每個類別，每個員工要求的總費用合計。
在 grid 里，你需要組織和總結列得到這樣的結果，而不是得到費用列表。使用 pivot grid 可以很容易做到。注意除了第一列，其他的列標題的值為這個費用列表中費用類別的值，所以，你看到的數據是已經重新匯總和整理過的。
當你使用 pivot grid ，有兩個重要的事需要你准備： axis(軸)和aggregates(聚合) 。 你應該使用 axis 指定行和列的位置以及使用聚合進行分組計算。
這是一個例子：
|
1
2
3
|
leftAxis: [{ width: 80, dataIndex: 'employee', header: 'Employee'}]
topAxis: [{ dataIndex: 'cat', header: 'Category', direction: 'ASC' }]
|
在軸中你可以指定排序，排序方向，過濾器等等。
|
1
2
3
4
5
6
7
8
|
aggregate: [{
measure: 'amount',
header: 'Expense',
aggregator: 'sum',
align: 'right',
width: 85,
renderer: Ext.util.Format.numberRenderer('0,000.00')
}
|
這里聚合可以進行 sum ，avg ， min ， max ，等等and so on.
在 pivot grid 中，你也可以指定 renderer 屬性自定義格式化數據：
|
1
2
3
|
renderer: function(value, meta, record) {
return Ext.util.Format.number(value, '0,000.00');
}
|
現在可以創建 pivot grid 了。 這是用於 pivot grid 的 store 組件：
|
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
28
29
30
31
32
33
|
var store = new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: 'expense.json',
reader: {
type: 'json',
rootProperty: 'rows'
}
},
autoLoad: true,
fields: [{
name: 'id',
type: 'int'
},{
name: 'employee',
type: 'string'
},{
name: 'amount',
type: 'int'
},{
name: 'date',
type: 'date',
dateFormat: 'd/m/Y'
},{
name: 'cat',
type: 'string'
},{
name: 'year',
convert: function(v, record){
return Ext.Date.format(record.get('date'), "Y");
}
}]
});
|
下面是 pivot grid 的例子代碼。這里你可以看到 leftAxis 是固定的，而 topAxis 為動態的，基於一個下拉選擇來改變 topAxis 。
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
var pivotGrid = Ext.create('Ext.pivot.Grid', {
renderTo: Ext.getBody(),
title: 'Pivot Grid - Employee Expense Claims',
height: 600,
width: 700,
enableLocking: false,
viewConfig: {
trackOver: true,
stripeRows: false
},
tbar: [{
xtype: 'combo',
fieldLabel: 'Select report',
flex: 1,
editable: false,
value: '1',
store: [
['1', 'How much an employee claimed in total?'],
['2', 'What are the expense amounts of each employee in each category?'],
['3', 'How much an employee claimed in a specific year?']
],
listeners: {
select: function(combo, records, eOpts){
switch(records.get('field1')){
case '1':
pivotGrid.reconfigurePivot({
topAxis: []
});
break;
case '2':
pivotGrid.reconfigurePivot({
topAxis: [{
dataIndex: 'cat',
header: 'Category',
direction: 'ASC'
}]
});
break;
case '3':
pivotGrid.reconfigurePivot({
topAxis: [{
dataIndex: 'year',
header: 'Year',
direction: 'ASC'
}]
});
break;
}
}
}
}],
store: store,
aggregate: [{
measure: 'amount',
header: 'Expense',
aggregator: 'sum',
align: 'right',
width: 85,
renderer: Ext.util.Format.numberRenderer('0,000.00')
}],
leftAxis: [{
width: 80,
dataIndex: 'employee',
header: 'Employee'
}],
topAxis: []
});
|
下面的截圖顯示以上代碼的輸出：
公司目錄 – 一個示例項目
好了，現在我們將使用所學知識創建一個示例項目。以下截屏顯示示例項目的最終效果：
通過查看設計效果，想必你已找到這個項目中最重要的組件就是 grid 了。本示例中所應用的組件和概念有：
- Grid panel
- ViewModel
- Model
- 數據 store 和 rest 代理
- 容器和布局
- 行編輯插件
- 分頁
- go 語言實現的 REST API
- 參考資料
下列截圖展示了使用了行編輯插件的 修改/新增 操作：
現在讓我們看看這個示例項目中的一些重要文件。
- 完整的源碼沒有在這里提供，但是你可以從此地址去下載。 https://github.com/ ananddayalan/extjs-by-example-companydirectory
截圖展示了示例項目的文件結構：
以下視圖代碼是本例中的重要部分。這個視圖顯示了這個應用的大部分的可視部分。它使用了 grid panel 和 行編輯插件：
plugins: [{ ptype: ‘rowediting’, clicksToMoveEditor: 1, autoCancel: false }] ,
為 grid 添加行編輯功能，最簡單的方法就是使用 RowEditing 。使用 RowEditing 插件並不是必要的，如果你想，你也可以使用表單來做 新增/修改。
為了能夠使用編輯功能，我們還需要設置字段的屬性或者列的 editor 屬性。下面這一行默認為所有的列都提供編輯功能：
editor: { xtype: ‘textfield’, allowBlank: false }
在編輯器中設置校驗規則，這樣可以只允許滿足驗證的數據提交。另外 Update 按鈕在插件里將是不可用的。
- 這個視圖的代碼有點長，這段代碼中我已經截出來了重要部分的代碼，完整的代碼在這里。 https://github.com/ ananddayalan/extjs-by-example-company-directory
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
Ext.define('CD.view.contactList.ContactList', {
extend: 'Ext.panel.Panel',
requires: ['CD.view.contactList.ContactListController' ],
xtype: 'app-contactList',
controller: 'contactList',
items: [{
cls: 'contact-list',
xtype: 'grid',
reference: 'contactListGrid',
scrollable: true,
autoScroll: true,
plugins: [{
ptype: 'rowediting',
clicksToMoveEditor: 1,
autoCancel: false
}],
listeners: {
selectionchange: 'onSelectionChange'
},
flex:1,
store: 'contactList',
pageSize: 10,
title: 'Company Directory',
columns: {
defaults: {
editor: {
xtype: 'textfield',
allowBlank: false
}
},
items: [{
text: 'First Name',
width: 100,
dataIndex: 'fname'
},{
text: 'Email',
width: 250,
dataIndex: 'email',
editor: {
vtype: 'email'
}
}]
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'contactList',
dock: 'bottom',
displayInfo: true
},{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
defaults: {
cls: 'btn-orange'
},
items: ['->', {
text: 'Remove',
disabled: true,
reference: 'btnRemoveContact',
listeners: {
click: 'onRemove'
},
}]
}]
}]
});
|
以上代碼中，grid 使用了兩個工具欄：一個分頁工具欄和一個 grid 上方的包含按鈕的工具欄。這些工具欄使用 dockedItems 屬性配置，以下為示例代碼。
在本章的早些時候你學過這個。‘dockedItems’ 是 panel 的屬性；它允許你設置一個組件停駐在 panel 上下，左邊或右邊。盡管通常它用於工具欄，但你可以停駐任意你想要的組件。
- 分頁工具欄為了正確設置頁碼，數據數量等等，需要設置 store 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'contactList',
dock: 'bottom',
displayInfo: true
} , {
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
//This sets style to the component. The 'ui' is a property of the component. The default value of this property for all the component is 'default'. For details are given in the chapter that focus on theming and styling.
defaults: { cls: 'btn-orange' },
items: ['->', {
text: 'Remove',
disabled: true,
//We set disabled by default, and this will be enabled when a row in the grid is selected. Check the onSelectionChange method in the controller. reference: 'btnRemoveContact', listeners: { click: 'onRemove' },
}]
}]
|
這個 ViewController 的代碼非常簡單。它只處理了添加，刪除，和 ContactList 視圖的 selection change 事件。
看一下視圖引用是如何訪問到控制器的。例如，下列代碼返回 grid 的引用：
var grid = this.lookupReference(‘contactListGrid’);
在這兒，contactListGrid 在前面視圖中標記為一個引用：
下列代碼中，訪問 store 使用 grid.getStore() ； 也可以使用 Ext.getStore(contactList) 訪問 store ：
|
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
28
29
30
31
|
Ext.define('CD.view.contactList.ContactListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.contactList',
views: ['CD.view.contactList.ContactList'],
requires: ['CD.store.ContactList'],
onSave: function() {
//Note, this will trigger one or more calls to the server based on the number of operations performed in the store.
Ext.getStore('contactList').save();
},
onSelectionChange: function() {
this.lookupReference('btnRemoveContact').enable();
},
onRemove: function() {
var grid = this.lookupReference('contactListGrid');
var sm = grid.getSelectionModel();
//This line cancels the row/cell edit if it is active before we remove the item.
grid.plugins[0].cancelEdit();
grid.getStore().remove(sm.getSelection());
if (grid.getStore().getCount() > 0) {
sm.select(0);
}
},
onCreate: function() {
var grid = this.lookupReference('contactListGrid');
grid.plugins[0].cancelEdit();
//Create a model instance
var r = Ext.create('Contact');
grid.getStore().insert(0, r);
grid.plugins[0].startEdit(0, 0);
}
});
|
模型和視圖的代碼如下所示。rootProperty 屬性讓 store 知道在 API 響應的 JSON 數據中從哪里開始讀取數據。
|
1
2
3
4
|
Ext.define('Contact', {
extend: 'Ext.data.Model',
fields: ['fname', 'lname', 'email', 'address','city','state','phone','type']
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
Ext.define('CD.store.ContactList', {
extend: 'Ext.data.Store',
storeId: 'contactList',
model: 'Contact',
pageSize: 10,
proxy: {
type: 'rest',
url: 'contactlist',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
}
});
|
|
1
|
Ext.create('CD.store.ContactList').load();
|
totalProperty 字段讓 store 知道服務器可獲得的記錄總數。grid 的分頁工具欄會控制在視圖中顯示的分頁信息例如 “Displaying 1 to 10 of 50” ；這里，50 是 totalProperty 的值。同時基於這個值，grid 知道什么時候該禁用下一頁的按鈕。
當你不指定模型的字段的類型。默認的類型將是自動的，如果需要你可以指定類型和驗證規則。
再來一次，完整的源碼在這里啊。 https://github.com/ananddayalan/extjs-byexample-company-directory
總結
在本章中我們詳細探討了 grid 。grid 有許多有用的配置和選項，還有 grid 的過濾，排序，和分組功能。你還學習了如何在 grid 使用不同的插件。還有用來做數據匯總報表的 pivot grid 。以及最后的示例項目。