Question

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

+-----------------+-------+-------+--------+
| 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'}
]
});

Json Store

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
        }

Answer 1

您可以使用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

Gridpanel - 根据字段值条件更改行颜色

1 个答案: