1

假设我有一个示例网格如下：

+-----------------+-------+-------+--------+
| PRODUCT NAME    | PRICE | STOCK | STATUS |
+-----------------+-------+-------+--------+
| PRODUCT A       |   10  |   15  |   0    |
+-----------------+-------+-------+--------+
| PRODUCT B       |   17  |   12  |   1    |
+-----------------+-------+-------+--------+

我想要做什么，根据字段更改网格行颜色STATUS。如果字段状态相等1，则行颜色应该不同。

模型 

Ext.define('Article', {
extend: 'Ext.data.Model',
fields: [
    {name: 'ID', type: 'int'},
    {name: 'ART_NR', type: 'int'},
    {name: 'ART_DESC', type: 'string'},
    {name: 'SORTEN_TEXT', type: 'auto'},
    {name: 'VAR', type: 'int'},
    {name: 'GEBI_NR', type: 'int'},
    {name: 'SUBSYS_ART_NR', type: 'int'},
    {name: 'STATUS', type: 'int'}
]
});

杰森商店 

var articles = new Ext.data.JsonStore({
model: 'Article',
proxy: {
    type: 'ajax',
    url: '<?php echo base_url() ?>create/get_article',
    reader: {
        type: 'json',
        root: 'articleList',
        idProperty: 'ID'
    }
}
});

网格面板 

            {
            xtype: 'gridpanel',
            id: 'variant-grid',
            store: articles,
            columnLines: true,
            columns: [
                {
                    text: 'TANIM',
                    width: 235,
                    dataIndex: 'SORTEN_TEXT',
                    renderer: function (value, metaData, record) {
                        if (value == null) {
                            return record.get('ART_DESC');
                        } else {
                            return record.get('SORTEN_TEXT');
                        }
                    }
                },
                {text: 'VARIANT', dataIndex: 'VAR', width: 90, align: 'center'},
                {text: 'GEBI', dataIndex: 'GEBI_NR', width: 90, align: 'center'},
                {text: 'SUBSYS', dataIndex: 'SUBSYS_ART_NR', width: 110, align: 'right'},
                {text: 'STATUS', dataIndex: 'STATUS', hidden: true}
            ],
            style: {
                fontFamily: 'DINPro-Regular',
                fontSize: '10pt',
                marginBottom: '10px'
            },
            height: 180,
            width: '100%',
            loadMask: {msg: 'Artikel bilgileri yükleniyor...'},
            selModel: selModels
        }
4

1 回答 1

6

您可以使用 getRowClass 来执行此操作：

在您的网格面板中，添加以下内容：

viewConfig: {
    getRowClass: function(record) {
        if(record && record.get('STATUS') ===  1) return 'different-color-class';
    }
}

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.Table-method-getRowClass

于 2013-07-23T07:56:42.607 回答