Extjs Grid 各种Demo

grid的一个渲染效果

Ext.define('cfWeb.view.accountSetting.OrgManageView',{
    alias : 'widget.orgManageView',
    extend : 'Ext.panel.Panel',
    layout:'fit',
    items:[{
        xtype : 'gridpanel',
        store : {
            data :[
                {'orgName' : 'org1','cloudPart':'智慧城管','userOperate':'1'},
                {'orgName' : 'org2','cloudPart':'智慧城管','userOperate':'3'},
                {'orgName' : 'org3','cloudPart':'智慧城管','userOperate':'2'},
            ],
            fields :[
                {name : 'orgName'},
                {name : 'cloudPart'},
                {name : 'userOperate'}
            ]
        },
        columns :[
            {header : '名称',dataIndex : 'orgName',flex :1},
            {header : '所属云',dataIndex : 'cloudPart',flex :1},
            {
             header : '操作',
             dataIndex : 'userOperate',
             flex : 2,
             renderer : function(value) {
                            if (value=='1') {
                                return "<span style='color:green'>激活</span>";
                            } else {
                                return "<span style='color:red'>冻结</span>";
                            }
                        }
            }
        ]
    }],

    initComponent : function(){
        this.callParent(arguments);
    }
});

结果