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