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属性值。后天拿到列明去拼装！网上其他站也有，但是将的都不详细。还是将自己开发出来的共享一下，如有不妥，请指教....