Ext-动态生成grid

小鱼儿 2022-06-14 09:41 194阅读 0赞

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;
    }

效果如图  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220614/c1091475803444529de17866b634eccd.png