ExtJS 3.4.0 - 建構基本的GridPanel表格

由於最近要講解ExtJS，因此有整理了建構GridPanel(表格元件)的資料，以自己實作的簡單

範例來做說明。

如何組成GridPanel?  要建構一個GridPanel主要有此五元件所組成

Store

ColumnModel 

Column

GridView

SelectionModel

首先是Store

可以把他想像成資料的來源，在此我們要使用的是存取Server端回傳回來的JSON Format資料

，緊接著將定義一個reader來解析回傳回來的資料已轉換成每一筆資料(record)

相關語法如下：

var rawDataFormat = Ext.data.Record.create([
  {name: "EmployeeID", type:'String'},                                     
  {name: "EmployeeName", type:'String'},
  {name: "Department", type:'String'},
  {name: "Salary", type:'String'}
 ]);
 
    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: "<%=request.getContextPath()%>/EmployeeList",
  // 此讀取器可以解析JSON DATA, 並轉換成Record. Record需定義其欄位名稱與型別
        reader: new Ext.data.JsonReader({
            root: 'rows',
            id: 'EmployeeID',
            totalRecords: 'totalRows'
        },rawDataFormat) 
    });

透過此URL可以取得回傳的資料，如果沒有指定proxy屬性的話，預設為HttpProxy，如果

要存取的資料為跨網域則需要使用別種的Proxy指定。

JSON Format Data

再來需定義reader的存取方法及資料格式，要注意的是相關的key名稱要對應到

ColumnModel & Column

再來要定義的ColumnModel主要是跟要呈現的表格畫面的骨架有關係，定義的語法如下

var cm = new Ext.grid.ColumnModel([
{header: "EmployeeID", width: 120, dataIndex: 'EmployeeID', sortable: true},      
{header: "EmployeeName", width: 120, dataIndex: 'EmployeeName', sortable: true},
{header: "Department", width: 120, dataIndex: 'Department', sortable: true},
{header: "Salary", width: 110, dataIndex: 'Salary', sortable: true}
]);

header為表格欄位的title，dataIndex需要與reader設定的name對應到

Column為ColumnModel所產生出來各欄位的實體，用於描繪出表格

GridView

GridView為最外層的一個殼(介面)，例如表格的外框與標題列，而GridPanel下的屬性

viewConfig可設計您GridView的設定

var grid = new Ext.grid.GridPanel({
     renderTo: 'employee_list',
        store: store,
        colModel: cm,
        width:500,
        height:200
    });

最後執行store.load();來載入資料，並交由GridPanel呈現出整個table的全貌!

SelectionModel

當表格畫出來之後，伴隨著的是要如何取的每一列的資料，來將該列各欄的資料塞到相關

的form欄位下做編輯? 在此就可以透過SelectionModel來做到

grid.on('rowdblclick', function(grid, rowIndex, event){
    var selection= grid.getSelectionModel().getSelected();
    Ext.Element.get("EmployeeID").set({value: selection.get("EmployeeID")});
    Ext.Element.get("EmployeeName").set({value: selection.get("EmployeeName")});
    Ext.Element.get("Department").set({value: selection.get("Department")});
    Ext.Element.get("Salary").set({value: selection.get("Salary")});
});

最後，在這個範例所設定回傳回的資料格式為JSON，您也可以直接讀取一XML資料格式，

或檔案而非URL。