+ -
当前位置:首页 → 问答吧 → EXT 4 grid中如何根据条件改变行背景色?

EXT 4 grid中如何根据条件改变行背景色?

时间:2011-12-08

来源:互联网

请问以下代码为何不能显示正确行背景色(查看元素时页面中行元素是tr不是div):
(根据sex判断结果,‘女’则显示红色背景,‘男’则显示蓝色背景)

CSS code

.x-grid-record-0 table{  
background: rgb(255,0,0);  
} 
.x-grid-record-1 table{  
background: rgb(0,0,255);  
}



JScript code

Ext.onReady(function() {
    Ext.define('list_info',{
        extend: 'Ext.data.Model',
        fields: ['no', 'name', 'cname', 'ename', 'sex']
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'list_info',
        autoLoad: true,
        //sorters: {property: 'due', direction: 'ASC'},
        proxy: {
            type: 'ajax',
            url: 'data.php',
            reader: {
                type: 'xml',
                record: 'item',// "Item"标记
                idProperty: 'ASIN',
                totalRecords: '@total'
            }
        }
    });
    
    var window_height = document.documentElement.clientHeight - 2;
    var window_width = document.documentElement.clientWidth - 2;
    
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,//数据池
        //columnLines: true,//列分隔线
        height: window_height,//区域高度
        width: window_width,//区域宽度
        title: '人员清单',//标题
        applyTo: 'staff_list',//加载对象DIV
        viewConfig: {
            //行背景色间隔显示
            getRowClass : function(record, rowIndex, rp, ds){  
                if(record.data.sex == '')
                {
                    return 'x-grid-record-0';//红色
                }
                else
                {
                    return 'x-grid-record-1';//蓝色
                }
            }
        },
        columns: [{
            text     : '工号',
            width    : 100,
            align: 'center',
            sortable : true,
            renderer : 'no',
            dataIndex: 'no'
        }, {
            text     : '用户名',
            width    : 120,
            align: 'center',
            sortable : true,
            renderer : 'name',
            dataIndex: 'name'
        }, {
            text     : '中文名',
            width    : 150,
            align: 'center',
            sortable : true,
            renderer : 'cname',
            dataIndex: 'cname'
        }, {
            text     : '英文名',
            width    : 100,
            align: 'center',
            sortable : true,
            renderer : 'ename',
            dataIndex: 'ename'
        }, {
            text     : '性别',
            width    : 150,
            align: 'center',
            sortable : true,
            renderer : 'sex',
            dataIndex: 'sex'
        }]
    });
});

作者: leonli188   发布时间: 2011-12-08

顶起来,请知情人指点一下啊!

作者: leonli188   发布时间: 2011-12-08