ExtJS 動態生成 Grid 表格：根據後端資料自適應欄位與列數

應用場景

Web 應用中常遇到表格欄位數與資料筆數皆不固定的情況，需根據後端回傳的中繼資料動態建構 Grid。

核心思路

1. 先以 AJAX 向後端請求欄位定義，封裝為 JSON 回傳。
2. 再以另一 AJAX 請求實際資料集。
3. 利用 ExtJS ColumnModel 與 Store 分離定義與資料，支援分頁、排序、更新等進階功能。

完整範例程式碼 (ExtJS 3.x 風格)

Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // 模擬後端回傳資料
    var myData = [
        [1,1,1,1],
        [2,2,2,2]
    ];

    // 自訂渲染函數
    function change(val){
        if(val > 0) return '<span style="color:green">' + val + '</span>';
        else if(val < 0) return '<span style="color:red">' + val + '</span>';
        return val;
    }
    function pctChange(val){
        if(val > 0) return '<span style="color:green">' + val + '%</span>';
        else if(val < 0) return '<span style="color:red">' + val + '%</span>';
        return val;
    }

    // 模擬後端回傳的欄位定義 JSON
    var fieldDatas = "{'columModle':[" +
        "{'header': 'seq','dataIndex': 'number','width':40}," +
        "{'header': 'code','dataIndex': 'text1'}," +
        "{'header': 'name','dataIndex': 'info1'}," +
        "{'header': 'price','dataIndex': 'special1'}" +
    "],'fieldsNames':[{name: 'number'}," +
        "{name: 'text1'}, {name: 'info1'}," +
        "{name: 'special1'}]}";

    var json = new Ext.util.JSON.decode(fieldDatas);
    var cm = new Ext.grid.ColumnModel(json.columModle);

    var store = new Ext.data.SimpleStore({
        fields: json.fieldsNames
    });
    store.loadData(myData);

    // 建立 Grid
    var grid = new Ext.grid.GridPanel({
        height:200,
        width:400,
        region: 'center',
        split: true,
        border:false,
        store:store,
        cm:cm
    });

    grid.render('grid-example');
});

關鍵類別說明

• Ext.grid.ColumnModel：定義欄位標題、資料索引、寬度、渲染器等。
• Ext.data.SimpleStore：輕量級 Store，適合簡單陣列資料。
• Ext.grid.GridPanel：表格元件，綁定 Store 與 ColumnModel 即可顯示。

進階應用建議

• 實際專案中，將 fieldDatas 由後端動態生成 (如 Java 端用 JSONArray 組裝)。
• 搭配 Ext.data.JsonStore + HttpProxy 實現分頁、遠端排序。
• 利用 Ext.ux.grid.RowExpander 或 Ext.grid.PropertyGrid 擴展更多互動。