ExtJS4 Grid改变单元格背景颜色及Column render学习

下面我会详细讲解“ExtJS4 Grid改变单元格背景颜色及Column render学习”的攻略。

什么是ExtJS4 Grid？

ExtJS4 Grid是一个基于JavaScript语言和HTML/CSS技术的高性能表格控件。它是一个面向企业级应用的表格控件，提供了丰富的表格功能和易于扩展的插件机制，适合用于数据呈现、数据分析和数据展示等场景。

改变单元格背景颜色

步骤

1. 新建ExtJS4 Grid组件，并设置需要显示的列。

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {header: '姓名', dataIndex: 'name', flex: 1},
        {header: '年龄', dataIndex: 'age', flex: 1},
        {header: '性别', dataIndex: 'gender', flex: 1},
    ],
    renderTo: document.body
});

1. 在Grid的viewConfig配置项中，通过getRowClass方法来控制单元格的样式。

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store){
            if(record.get('age') < 20){
                return 'red';
            }else if(record.get('age') > 40){
                return 'blue';
            }
        }
    }
});

1. 在CSS文件中定义单元格的样式。

.red .x-grid-cell {
    background-color: red;
}

.blue .x-grid-cell {
    background-color: blue;
}

示例

在这个示例中，如果数据中的年龄小于20岁，则该单元格的背景颜色为红色；如果年龄大于40岁，则该单元格的背景颜色为蓝色。

完整示例代码：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'age', 'gender'],
    data: [
        {name: '张三', age: 25, gender: '男'},
        {name: '李四', age: 18, gender: '女'},
        {name: '王五', age: 45, gender: '男'},
        {name: '赵六', age: 30, gender: '女'}
    ]
});

Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {header: '姓名', dataIndex: 'name', flex: 1},
        {header: '年龄', dataIndex: 'age', flex: 1},
        {header: '性别', dataIndex: 'gender', flex: 1},
    ],
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store){
            if(record.get('age') < 20){
                return 'red';
            }else if(record.get('age') > 40){
                return 'blue';
            }
        }
    },
    renderTo: document.body
});

Column render学习

步骤

1. 为需要渲染的列设置renderer属性，并指定渲染函数。

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {header: '姓名', dataIndex: 'name', flex: 1},
        {header: '年龄', dataIndex: 'age', flex: 1, renderer: function(value){
            if(value < 20){
                return '<span style="color:red">' + value + '</span>';
            }else{
                return value;
            }
        }},
        {header: '性别', dataIndex: 'gender', flex: 1},
    ],
    renderTo: document.body
});

示例

在这个示例中，如果数据中的年龄小于20岁，则在年龄单元格中的文字显示为红色；否则显示默认的文字颜色。

完整示例代码：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'age', 'gender'],
    data: [
        {name: '张三', age: 25, gender: '男'},
        {name: '李四', age: 18, gender: '女'},
        {name: '王五', age: 45, gender: '男'},
        {name: '赵六', age: 30, gender: '女'}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {header: '姓名', dataIndex: 'name', flex: 1},
        {header: '年龄', dataIndex: 'age', flex: 1, renderer: function(value){
            if(value < 20){
                return '<span style="color:red">' + value + '</span>';
            }else{
                return value;
            }
        }},
        {header: '性别', dataIndex: 'gender', flex: 1},
    ],
    renderTo: document.body
});

以上就是“ExtJS4 Grid改变单元格背景颜色及Column render学习”的完整攻略。在实际的开发中，需要根据具体的场景来选择使用哪种方法，以达到最佳的效果。