extjs grid 自定义列 title分级

最近在做公司的一个项目，里面涉及到的是对应不同的数据，在grid显示不同的title，比如一组数据都只有name和age两个属性，那么在界面上就显示两列，如果现在一组数据有name,age,height三个属性，现在界面上也相应的显示三列。好了，意思大概懂了吧

现在主要的思路有三部

1 加载数据

2根据数据的属性设置grid的title

3把数据塞入grid中

现在直接上代码吧，下面这个方法是点击按钮后后台获取数据

1

onSearch:function(){
var form = Ext.getCmp('myform').getForm();
if(!form.isValid()){
Ext.Msg.alert("信息提示", "表单不完整！");
return;
}
var formData = form.getValues();

var _this = this;
var box = Ext.Msg.wait('正在查询...', '请稍等');
Ext.Ajax.request({
            url: g_v3.webcontext+'/workReport/search/',
            headers: {
                accept: 'application/json'
            },
            params:formData,
            method: 'GET',
            waitMsg: '正在保存信息...',
            success: function(response, opts) {
            //Ext.MessageBox.hide();
                var obj = Ext.decode(response.responseText);
                if(obj.result == 'SUCCESS') {
                if(box){box.hide();}
                Ext.getStore('dataGridStore').removeAll();
                var dataArray = obj.returnObject;
                // 1 首先生成最多的增值服务的列，前提是要获取现有数据中最多的增值服务类型
                var termData = _this.dealData(dataArray);
                termData.data; // 完整的数据
                termData.inType; // 入库增值列
                termData.outType; // 出库增值列
                termData.stockType; // 库内增值列
                // 给grid新增列标题
                _this.addGridTitle(termData.inType,termData.outType,termData.stockType)
                //  把 termData.data; 数据塞入grid中
                _this.addDataToStore(termData.data);
               
                } else {
                if(box){box.hide();}
                Ext.Msg.alert("信息提示", "查询失败，请重试~");
                Ext.getStore('dataGridStore').removeAll();
                }
            },
            failure: function(response, opts) {
                Ext.MessageBox.hide();
                Ext.Msg.show({
                    title: '提示',
                    msg: '网络连接失败',
                    buttons: Ext.Msg.OK
                });
            }
        })
},

2

addGridTitle:function(inType,outType,stockType){

var inTypeColumn = Ext.create('Ext.grid.column.Column', {  
       text: "入库增值",  
       columns:[]
   });  
var outTypeColumn = Ext.create('Ext.grid.column.Column', {  
       text: "出库增值",  
       columns:[]
   }); 
var stockTypeColumn = Ext.create('Ext.grid.column.Column', {  
       text: "库内增值",  
       columns:[]
   }); 
for(var i in inType){


inTypeColumn.insert({  
       text: i,  
       dataIndex: i,
       align:'right',
       xtype: 'gridcolumn',
   })
}
for(var out in outType){


outTypeColumn.insert({  
       text: out,  
       dataIndex: out,
       align:'right',
       xtype: 'gridcolumn',
   })
}
for(var stock in stockType){
stockTypeColumn.insert({  
       text: stock,  
       dataIndex: stock,
       align:'right',
       xtype: 'gridcolumn',
   })

}
var grid = Ext.getCmp('dataGridId');

var cc = this.initColumns(grid);
cc.push(inTypeColumn);
cc.push(outTypeColumn);
cc.push(stockTypeColumn);
grid.headerCt.removeAll();
grid.headerCt.insert(grid.columns.length, cc);


},

3

addDataToStore:function(data){
for(var i=0;i<data.length;i++){
var model = Ext.create('workReport.model.dataGridModel',data[i]);
model.data=data[i];
Ext.getStore('dataGridStore').insert(0,model);
}
},

以上就是主要的代码，以后在工作中如果遇到类似的问题，可以参考一下，其实也很简单。