Extjs5.x grid row 背景色修改

最新推荐文章于 2021-11-25 00:57:51 发布

ctrl-zero

最新推荐文章于 2021-11-25 00:57:51 发布

阅读量2k

点赞数

分类专栏： extjs 文章标签： extjs grid row backg

extjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里有两种方式实现

1.custom css

Ext.util.CSS.createStyleSheet(''.concat(
'.test_color {',
'background-color: #FF0000;',
'}'
 ));

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            viewConfig: {
                stripeRows: false,
                getRowClass: function(record) {
                    var clazz = "";
                    if(record.dirty) {
                        clazz = 'test_color';
                    }
                    return clazz;
                }
            },
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }],
            selModel: 'rowmodel',
            plugins: {
                ptype: 'rowediting',
                clicksToEdit: 1
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

2. 动态修改属性

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224",
                    "gender": "F"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234",
                    "gender": "M"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244",
                    "gender": "M"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254",
                    "gender": "F"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody(),
            viewConfig: {
                getRowClass: function (record, rowIdx) {
                    // Needs to be deferred since the rows are not available yet
                    Ext.defer(function () {
                        Ext.get(this.getRowByRecord(record)).applyStyles({
                            'background-color': (record.get('gender') == 'F') ? 'red' : 'green' 
                        });
                    },1, this);
                }
            }
        });
    }
});