ExtJS 教學 Grid 介紹與常用功能
===== Ext.grid.Panel ===== Grid 是在客戶端上顯示大量表格資料的好幫手！實際上就是專門用來顯示類似資料庫Table 的格式的UI 元件。 讓大量的表格資料變得容易存取、甚至還提供 排序 和 過濾 功能。 由於 Grid 繼承自 Panel 類別，因此也可以設定上工具列 tbar 與下工具列 bbar 。 xtype 為: gridpanel, grid Grid 繼承自 Ext.panel.Panel類別 : * Ext.panel.Panel * Ext.panel.Table * Ext.grid.Panel 一個完整的Grid 分為兩個部分: 一個顯示欄位標題的Columns。 一個儲存資料的Store 元件。 === Columns 簡介 === Columns 用來Grid 的定義表格欄位，是一個具有text 與 dataIndex 屬性的物件陣列。 利用text 屬性來決定Grid 的欄位名稱。 利用dataIndex 屬性來與Store 的資料相配對。 Grid 的欄位顯示順序完全由此Columns 加入的順序決定。 === Store 簡介 === 用來存取表格的原始資料，可以是近端的二維陣列(Array )，或是遠端的JSON 或XML 資料。 利用fields 屬性來與columns 欄位相配對。 reader 用來解析原始資料，如原始資料格式為json，reader的type 就填json 。 type 可以是 array, json, xml 先來看看由json 提供近端資料的範例程式: var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], //利用fields 與Columns 的dataIndex 做配對。 data: {'...