Extjs 动态生成表格

转载出处：http://blog.sina.com.cn/s/blog_566c8d180100tnlt.html

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());//初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载,象如果窗口中有用可拖动面板的话，你在拖动后如果启动了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');
});