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