上面这种是最简单的,设定固定的某单元格中字体颜色。
//--------------------------------------------------列头
var cm = new Ext.grid.ColumnModel([
sm,
new Ext.grid.RowNumberer(), //自动添加行号
// {
// header: "序号",
// dataIndex: "id",
// tooltip: "ID",
// //列不可操作
// //menuDisabled:true,
// //可以进行排序
// sortable: true
// } ,
{
header: "房间编号",
tooltip: "房间编号",
dataIndex: "RoomNumber",
//可以进行排序
sortable: true
}, {
header: "面积(M²)",
tooltip: "房间面积",
dataIndex: "area",
//可以进行排序
sortable: true
}, {
header: "单价(元/M²)",
tooltip: "单价",
dataIndex: "singlePrice",
//可以进行排序
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank: false
}))
}, {
header: "总价(元)",
tooltip: "总价",
dataIndex: "totalPrice",
//可以进行排序
sortable: true
}, {
header: "面积(M²)",
dataIndex: "mianjiCC",
//可以进行排序
sortable: true
}, {
header: "单价(元/M²)",
dataIndex: "priceCCS",
//可以进行排序
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank: false
}))
}, {
header: "总价(元)",
dataIndex: "totalPriceCCS",
//可以进行排序
sortable: true
}, {
header: "",
tooltip: "销售状态",
dataIndex: "status",
//可以进行排序
sortable: true
}]);
//-----------------------------------------------------设置颜色
cm.setRenderer(7, getColor);
cm.setRenderer(4, getColor);
function getColor(val) {
if (val != "") {
return '<font color=blue></font><span style="color:red;">' + Ext.util.Format.usMoney(val) + '</span>';
}
}
第二种效果设置背景色的单元背是不固定的,需要程序根据数据来判断。且加入mouseover和mouseout事件,背景色会根据鼠在移动到不同行而相应的改变。
除上面的代码外,还要加入事件处理。
注意:由于加入mouseover和mouseout事件,所以只能是EditorGridPanel,Gridpanel无法响应鼠标事件!
//数据加载,根据条件改变单元格背景色
grid.getStore().on('load', function (s, records) {
var girdcount = 0;
s.each(function (r) {
if (r.get('status') == '未售') {
grid.getView().getCell(girdcount, 2).style.backgroundColor = '#CCCCCC'; //填充单元格颜色
// grid.getView().getCell(girdcount,13).disabled=true;
} else if (r.get('status') == '已售') {
grid.getView().getCell(girdcount, 2).style.backgroundColor = '#990033';
} else if (r.get('status') == '大定') {
grid.getView().getCell(girdcount, 2).style.backgroundColor = '#FF9900';
} else if (r.get('status') == '小定') {
grid.getView().getCell(girdcount, 2).style.backgroundColor = '#009900';
} else if (r.get('status') == '保留') {
grid.getView().getCell(girdcount, 2).style.backgroundColor = '#6633FF';
}
girdcount = girdcount + 1;
});
});
//添加mouseover事件
grid.on('mouseover',function(e){
var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
var colour=grid.getView().getCell(index,2).style.backgroundColor;
grid.getView().getRow(index).style.backgroundColor=colour;
}
});
//添加mouseout事件
grid.on('mouseout',function(e){
var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
var colour='';
grid.getView().getRow(index).style.backgroundColor=colour;
}
});
分享到:
相关推荐
ExtJs 4.0 Grid 单元格合并控件封装
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
利用的是Column的render实现单元格背景颜色改变,本文给予了实现代码,感兴趣的朋友可以了解下,或许对你学习ExtJS4 Grid有所帮助
100行代码解决ExtJs4.1合并单元格问题
解决extjs中的GridPanel的单元格在IE无法选中复制的问题
实现grid单元格重复数据的合并,完整的案例实现,包含合并方法和调用过程
extjs grid设置某列背景颜色和字体颜色的方法,需要的朋友可以参考下。
EXTJS实现单元格变色、行变色(文字、背景)
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
MyGridView=Ext.extend(Ext.grid.GridView,{ renderHeaders : function(){ var cm = this.cm, ts = this.templates; var ct = ts.hcell,ct2=ts.mhcell; var cb = [], sb = [], p = {},mcb=[]; for(var i = 0...
NULL 博文链接:https://dejazhan.iteye.com/blog/871259
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
NULL 博文链接:https://stanly-xia.iteye.com/blog/1534256
extjs单元格合并,gridpanel中多行合并
extjs grid设置某列背景颜色和字体颜色的实现步骤,需要的朋友可以参考下。
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0