作者：电脑信息网日期：
返回目录：设置问题
EXTJS4:如何改变grid某一个单元格的背景颜色
测试环境： ext-4.1.0-gpl
JS CODE:
Ext.onReady(function () {
Ext.widget('grid', {
title: 'Users',
store: {
fields: ['name', 'email', 'online'],
data: [
{ 'name': 'Lisa', "email": "", "online": true },
{ 'name': 'Bart', "email": "", "online": false },
{ 'name': 'Homer', "email": "", "online": true },
{ 'name': 'Marge', "email": "", "online": true }
]
},
columns: [
{
header: 'Name',
dataIndex: 'name',
renderer: function (value, meta, record) {
meta.tdCls = record.get('online') ? 'user-online' : 'user-offline';
return value;
}
},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Online', dataIndex: 'online' }
],
width: 400,
renderTo: 'output'
});
});
所用到的e68a84e799bee5baa6e997aee7ad94331自定义CSS ：
.x-grid-cell.user-online
{
background-color: #9fc;
}
.x-grid-cell.user-offline
{
background-color: #ffc;
}
打开页面，选择设计模式，GridView选择编辑列
选择要编辑的列，在右侧属性中可以设置样式，包括表头、边框、字体样式都可以设置，自己试吧。
第一步， 在桌面上点击鼠标右键，依次点击“属性”、“外观”、“高级zd”按钮。
第二步， 在打开的“高级”对话框中，在“项目”下拉列表里选择“窗口”。
第三步， 再打开右边对应的“颜色”列表，选择其中的“其他”一项，在打开的对话框里，把回“色调”的参数设置为85，把“饱和度”参数设置为90，把“亮度”参数设置为205。再点击“确定”退出设置。
第四步，打开ie浏览器，选择“工具”栏中的“internet选项”，点击“辅助功能”按钮，在“不使用网页中指定的颜色”前打钩。
全部步骤完成后，网答页、文件夹、文本文档里的背景颜色都变成了绿色。其中，色调、饱和度和亮度的参数值，还可以根据个人的喜好稍作修改，让自己用电脑的候最舒服。
Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) !e799bee5baa6e58685e5aeb9337= -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
var en = {
grid: this.grid,
record: record,
field: this.dataIndex,
value: record[this.dataIndex],
cancel:false
};
if(this.grid.fireEvent("beforeedit", en) !== false && !en.cancel){
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
}
},
renderer : function(v, p, record){
p.css += x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
修改红色地方的 css 就可以实现你想要的功能