extjs 動態生成表格

在web顯示數據時，會遇到grid的列數和行數不確定的這種情況。如何來根據數據動態的創建表格呢？
Extjs 的json data給我們帶來了一個很好的比較簡單的方法。
   要創建一個grid需要確定它的列數，再根據數據的數量就可以確定行數了。
   看到有人用過一種方法就是講列的屬性和數據一起放在json data里去，這樣可以達到效果，但是不難發現，這樣的話，就很難進行分頁或者更新表格里的數據。
   其實我們可以結合extjs官網上的那種固定列數的訪問方法來動態生成表格。
   首先通過Ajax從服務端反回列的信息，封裝成json ,表格數據通過另一個ajax請求來獲得，因為列已經獲得，所以可以將此封裝成一個store.這樣大功告成，生成grid所需要的，store,和cm
   demo 源碼如下：（由於考慮到代碼簡介明了，我將數據寫死在了js 中）：



Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var myData =[[1,1,1,1],
                 [2,2,2,2]
                 ];
      
    // example of custom renderer function
    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;
    }
    // example of custom renderer function
    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;
    }
    // create the data store
  
    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);
   // var ds = new Ext.data.JsonStore({
   //         data:store.toSource(),
   //         fields:json.fieldsNames
   //         });


    // create the 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');
});