Ext JS 6學習文檔-第5章-表格組件(grid)

使用 Grid

本章將探索 Ext JS 的高級組件 grid 。還將使用它幫助讀者創建一個功能齊全的公司目錄。本章介紹下列幾點主題：

• 基本的 grid
• 排序
• 渲染器
• 過濾
• 分頁
• 單元格編輯
• 行編輯
• 分組
• 分組 grid（pivot grid）
• 公司目錄 —一個示例項目

轉載請註明出處：http://www.jeeboot.com/archives/1225.html

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 。以及最後的示例項目。