ExtJS中的表格功能非常強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能。
表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype為grid。ExtJS中，表格Grid必須包含列定義信息，并指定表格的數(shù)據(jù)存儲器Store。表格的列信息由類Ext.grid.ColumnModel定義、而表格的數(shù)據(jù)存儲器由Ext.data.Store定義，數(shù)據(jù)存儲器根據(jù)解析的數(shù)據(jù)不同分為JsonStore、SimpleStroe、GroupingStore等。
我們首先來看最簡單的使用表格的代碼：

執(zhí)行上面的代碼，可以得到一個簡單的表格，如下圖所示：

上面的代碼中，第一行“var data=…”用來定義表格中要顯示的數(shù)據(jù)，這是一個[][]二維數(shù)組；第二行“var store=…”用來創(chuàng)建一個數(shù)據(jù)存儲，這是GridPanel需要使用配置屬性，數(shù)據(jù)存儲器Store負責把各種各樣的數(shù)據(jù)（如二維數(shù)組、JSon對象數(shù)組、xml文本）等轉(zhuǎn)換成ExtJS的數(shù)據(jù)記錄集Record，關(guān)于數(shù)據(jù)存儲器Store我們將在下一章中作專門介紹。第三行“var grid = new Ext.grid.GridPanel(…)”負責創(chuàng)建一個表格，表格包含的列由columns配置屬性來描述，columns是一數(shù)組，每一行數(shù)據(jù)元素描述表格的一列信息，表格的列信息包含列頭顯示文本(header)、列對應(yīng)的記錄集字段(dataIndex)、列是否可排序(sorable)、列的渲染函數(shù)(renderer)、寬度(width)、格式化信息(format)等，在上面的列子中只用到了header及dataIndex。
下面我們看簡單看看表格的排序及隱藏列特性，簡單修改一下上面的代碼，內(nèi)容如下：


直接使用new Ext.grid.ColumnModel來創(chuàng)建表格的列信定義信息，在“項目名稱“及“開發(fā)團隊”列中我們添加了sortable為true的屬性，表示該列可以排序，執(zhí)行上面的代碼，我們可以得到一個支持按“項目名稱“或“開發(fā)團隊”的表格，如圖xxx所示。

(按項目名稱排序)

(可排序的列表頭后面小按鈕可以彈出操作菜單)

(可以指定隱藏哪些列)
另外，每一列的數(shù)據(jù)渲染方式還可以自己定義，比如上面的表格中，我們希望用戶在表格中點擊網(wǎng)址則直接打開這些開源團隊的網(wǎng)站，也就是需要給網(wǎng)址這一列添加上超級連接。下面的代碼實現(xiàn)這個功能：


也就是說數(shù)據(jù)變成了一維數(shù)組，數(shù)組中的每一個元素是一個對象，這些對象包含name、organization、homepage、id等屬性。要讓表格顯示上面的數(shù)據(jù)，其實非常簡單，只需要把store改成用Ext.data.JsonStore即可，代碼如下：


上面的代碼得到的結(jié)果與前面的一樣。當然，表格同樣能顯示xml格式的數(shù)據(jù)，假如上面的數(shù)據(jù)存放成hello.xml文件中，內(nèi)容如下：



為了把這個xml數(shù)據(jù)用ExtJS的表格Grid進行顯示，我們只需要把store部分的內(nèi)容調(diào)整成如下的內(nèi)容即可：


其它的部分不用改變，完整的代碼如下：



store.laod()是用來加載數(shù)據(jù)，執(zhí)行上面的代碼產(chǎn)生的表格與前面的完全一樣。

最新評論