E,xtjs动态生成表格

　　在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 '' + val + '';

　　}else if(val < 0){

　　return '' + val + '';

　　}

　　return val;

　　}

　　// example of custom renderer function

　　function pctChange(val){

　　if(val > 0){

　　return '' + val + '%';

　　}else if(val < 0){

　　return '' + val + '%';

　　}

　　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: '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,