Extjs5.x grid row 背景色修改

男娘i 2022-09-21 11:39 138阅读 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);
                    }
                }
            });
        }
    });