extjs grid设置某列背景颜色和字体颜色的方法

下面是关于ExtJS Grid Panel中设置某列背景颜色和字体颜色的方法的攻略。我们先来了解一下ExtJS中的Grid Panel。

什么是 ExtJS Grid Panel？

ExtJS中的Grid Panel是一种可用于显示表格数据的面板，可以用于显示大量数据，并提供了诸如排序、过滤、分页等功能。可以用ExtJS中的Store和Model对数据进行管理和操作。

如何设置某列背景颜色和字体颜色？

方法一：使用样式代理器

在Grid Panel的column配置项中，可以使用predefinedStyles属性指定一组预定义样式，这时可以通过样式代理器Ext.util.CSS来指定样式的细节。

以下是一个例子，这里的predefinedStyles指定了四种预定义样式：positive、negative、neutral和highlight。当数据列的值为正数、负数、0或超过100时，它们将使用相应的样式。

Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {
            text: 'Data',
            dataIndex: 'data',
            predefinedStyles: {
                negative: 'color:red;background-color:pink;',
                positive: 'color:green;background-color:#d0ffb0;',
                neutral: '',
                highlight: 'background-color:highlight;background-image:none;'
            },
            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                var styleName = 'neutral';
                if (value < 0) {
                    styleName = 'negative';
                } else if (value > 0) {
                    styleName = 'positive';
                }
                metaData.style = Ext.util.CSS.createStyleSheet(this.predefinedStyles[styleName]);
                return value;
            }
        }
    ]
});

方法二：使用样式表

另外一种方法是使用样式表，可以在HTML页面中定义一组样式，然后在Grid Panel的列配置项中指定相应的样式名。

以下是一个例子，这里定义了一个CSS类highlight，并将其应用到Grid Panel的列中。

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

Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {
            text: 'Data',
            dataIndex: 'data',
            className: 'highlightrule'
        }
    ]
});

在上面的例子中，当列的单元格满足highlightrule条件时，它们将被高亮显示。

总结

为ExtJS Grid Panel中的列设置背景颜色和字体颜色的方法，主要有两种：使用样式代理器和使用样式表。两种方法的实现方式略有不同，但都可用来自定义列样式，以便更好地展示数据。