Ext-动态生成grid

Ext.define('V5.auditoper.quekeyword.view.DynTestGrid', {
extend : 'Ext.grid.Panel',
xtype : 'dyntestgrid',
selType : 'rowmodel',
selModel : {
mode : 'MULTI'
},
store : createStore(),
plugins : [{
ptype : 'tbarbtncontrol'
}],
columns : createColumns()
});

//动态生成store
function createStore() {
//定义model
var fd = ['name', 'email', 'phone','rcolor'];
//定义数据
var data = [{
'name' : '派生指标1',
'email' : '123@qq.com',
'phone' : '123',
'rcolor': 'green'
}, {
'name' : '派生指标2',
'email' : '1232@qq.com',
'phone' : '123',
'rcolor': 'yellow'
}, {
'name' : '派生指标3',
'email' : '1234@qq.com',
'phone' : '123',
'rcolor': 'blue'
}, {
'name' : '派生指标4',
'email' : '12233@qq.com',
'phone' : '123',
'rcolor': 'red'
}];
var store = Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : fd,
data : data,
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});
return store;
}

//动态生成列
function createColumns() {
var cm = [];
cm.push(Ext.create('Ext.grid.column.Column', {
dataIndex : 'name',
text : '指标名称',
flex : 1
}));
cm.push(Ext.create('Ext.grid.column.Column', {
dataIndex : 'email',
text : '邮箱',
flex : 1
}));
cm.push(Ext.create('Ext.grid.column.Column', {
dataIndex : 'phone',
text : '电话',
flex : 1
}));
cm.push(Ext.create('Ext.grid.column.Column',{
dataIndex: 'rcolor',
text: '预警颜色',
renderer : function(v){
return "<div style='width:20px;height:20px;background-color:"+v+";float:left;'><div><label style='margin-left:22px;'>Male</label>"
}
}));
return cm;
}