Extjs動態生成gridPannel(動態的列，動態的table)

最近項目組決定用Extjs做個管理系統，本人以前沒有用過EXTJS，所以懷着激動的心情開始了EXT之旅。現在講自己的旅行分享如下：

// 每頁顯示行數
var pageSize = 20;
// 各種參數
var queryForm;
//保存選中的Record主鍵列id列表
var recordIds = new Array();
//保存選中的Record對象
var recordObjs = new Array();
var queryListUrl = REQUEST_URL_BASE + "dmpTrackErrorDataHandler/getErrorDataList";
//創建服務基本信息表單面板
var LABEL_WIDTH = 340;

Ext.onReady(function() {
  
  
  //顯示明細按鈕
  function rendBtn(value, metadata, record, rowIndex, colIndex, store){
   return "<button type='button' οnclick='showDetail(\"" + record.get('tableCode') + "\", \"" + record.get('startDate') + "\", \"" + record.get('endDate') + "\", \"" + record.get('tableName') + "\")'>明細</button>"
  }
  
});

function showDetail(tableCode, startDate, endDate, tableName){
 var url = REQUEST_URL_BASE + "dmpTrackErrorDataHandler/getExceptionTableInfo?tableCode="+tableCode;
 var getColumnInfoUrl = REQUEST_URL_BASE + "dmpTrackErrorDataHandler/getTableColumnInfo?tableCode="+tableCode;
 
 var cm='',columnName='',columnStr='';
 
 var requestConfig = {
   url : getColumnInfoUrl,
   callback : function(options, success, response) {
    var jsonStr = response.responseText;
    var o = Ext.util.JSON.decode(response.responseText);
    columnStr = o.columnModelIndex;
    columnName = o.columnModelName;
    var colMArr = columnStr.split("&");
    var colNameArr = columnName.split("&");
       var colMArray = new Array();
       var str = "{'fields':[";
       for(var i=0; i<colMArr.length; i++) {
        //此處的fieldArray[i]是fields的數據
        var widthValue = 150;
        if('EXCEPITION_INFO' == colMArr[i]){
         widthValue = 250;
        }else if('DOFLAG' == colMArr[i]){
         widthValue = 80;
        }else if('INTIME' == colMArr[i]){
         widthValue = 175;
        }
        colMArray[i] = {header:colNameArr[i],width:widthValue,dataIndex:colMArr[i]}
        str = str +"{name:'"+colMArr[i]+"',mapping:'"+colMArr[i]+"'},";
       }
      
       var field = str.substring(0,str.length-1)+']}';
       var jsonField = new Ext.util.JSON.decode(field);
      
       cm = new Ext.grid.ColumnModel(colMArray);
      
       errorDataResultStore = new Ext.data.JsonStore(
    {
     autoLoad : true,
     baseParams :
     {
      start : 0,
      limit : pageSize,
      detailTableName : tableName
     },
     url : url,
     root : 'data',
     totalProperty : 'totalProperty',
     messageProperty : 'msg',
     fields : jsonField.fields
    });
    
    
    // 分頁顯示控件
    pagingServiceToolbar = new Ext.PagingToolbar(
    {
     pageSize : pageSize,
     store : errorDataResultStore,
     displayInfo : true,
     displayMsg : '<span style="padding-right: 150px;padding-left: 40px">顯示記錄 {0} - {1}條 &nbsp;&nbsp;總共 {2}條<span>',
     emptyMsg : '<span style="padding-right: 200px;padding-left: 40px">沒有記錄</span>'
    });
    
    var grid = new Ext.grid.GridPanel({
              region: 'north',
              autoHeight:true,
        autoScroll : true,
        loadMask : true,
        store: errorDataResultStore,
              cm: cm,
              frame: true,
              bbar : pagingServiceToolbar
       });
    
    var serviceInfoWin = new Ext.Window(
    {
       layout:'fit',
             width:1000,
             height:522,
             title : '異常表詳細錯誤信息',
             closeAction:'hide',//關閉窗口時漸漸縮小
             plain: true,
             items:[grid]
    });
    serviceInfoWin.show();
 }}
 Ext.Ajax.request(requestConfig);
}

主要是點某個詳情，去查詢某張表，但是某張表裏面的列名和列表個數不一樣，所以需要動態去添加jsonStore的field屬性值。後天拿到列明去拼裝！網上其他站也有，但是將的都不詳細。還是將自己開發出來的共享一下，如有不妥，請指教....