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' : '[email protected]',
                'phone' : '123',
                'rcolor': 'green'
            }, {
                'name' : '派生指標2',
                'email' : '[email protected]',
                'phone' : '123',
                'rcolor': 'yellow'
            }, {
                'name' : '派生指標3',
                'email' : '[email protected]',
                'phone' : '123',
                'rcolor': 'blue'
            }, {
                'name' : '派生指標4',
                'email' : '[email protected]',
                '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;
}

效果如圖