Extjs动态颜色处理：单元格与行状态样式

在Extjs中，表格的颜色可以根据数据的值进行动态渲染，以提供更丰富的视觉反馈。首先，让我们探讨如何基于单元格的值来改变其样式。 **单元格颜色动态化** 当你使用Extjs创建网格（grid）时，可以利用ColumnModel的`renderer`属性来定制单元格的呈现方式。在提供的代码片段中，我们看到一个例子： ```javascript var cm = new Ext.grid.ColumnModel([ // 其他列定义... { header: '性别', dataIndex: 'sex', renderer: function(value) { if (value == 'male') { return '<span style="color: red; font-weight: bold;">红男</span>'; } else { return '<span style="color: green; font-weight: bold;">绿女</span>'; } } }, // ... ]); 这里的`renderer`函数接收单元格的数据值，如果性别为'male'，则显示红色粗体文本；否则显示绿色粗体文本。这样，当用户查看网格时，性别为'male'的行会以红色高亮，而性别为'female'的行则以绿色突出。 **行颜色根据业务状态变化** 除了单元格级别的颜色设置，还可以根据数据的特定状态改变整行的背景色。在这个示例中，`grid.getStore().on('load', function(s, records)`监听了数据加载完成的事件。当数据加载后，遍历每一项记录并检查其状态（如'state'字段）： - 如果行号`girdcount`是偶数，行的背景颜色设置为`#F1E1FF`，可能是为了区分偶数行。 - 如果状态为'未审核'，背景颜色设为`#FF2D2D`，表示警告或错误状态。 - 如果状态为'通过审核'，背景颜色设为`#02C874`，表示成功或已完成状态。 这种做法有助于用户快速识别不同状态的行，并且提供了清晰的视觉提示。 总结起来，Extjs允许开发者灵活地控制表格的颜色，既可以通过单元格级别的`renderer`自定义单个字段的样式，也可以根据数据状态动态调整整个行的外观。这在数据展示和用户交互中起到了增强可读性和指导性的效果。