提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

ExtJS4Grid改变单元格背景颜色及Columnrender学习

学习 改变 颜色 背景 单元格
2023-06-13 09:14:45 时间

利用的是Column的render

先看效果图：

代码如下：

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<linkhref="../extjs-4.1.0/resources/css/ext-all.css"rel="stylesheet"type="text/css"/>
<scriptsrc="../extjs-4.1.0/bootstrap.js"type="text/javascript"></script>
<styletype="text/css">
.x-grid-cell.user-online
{
background-color:#9fc;
}
.x-grid-cell.user-offline
{
background-color:blue;
}
</style>
<scripttype="text/javascript">
Ext.onReady(function(){
Ext.widget("grid",{
title:"Users",
store:{
fields:["name","email","online"],
data:[
{"name":"王俊伟","email":"wangjunwei1@163.com","online":true},
{"name":"王俊伟1","email":"wangjunwei2@163.com","online":false},
{"name":"王俊伟2","email":"wangjunwei3@163.com","online":false},
{"name":"王俊伟3","email":"wangjunwei4@163.com","online":true}
]
},
columns:[
{
header:"Name",
dataIndex:"name",
renderer:function(value,meta,record){
meta.tdCls=record.get("online")?"user-online":"user-offline";
returnvalue;
}
},
{header:"Email",dataIndex:"email",flex:1},
{header:"Online",dataIndex:"online"}
],
width:400,
renderTo:Ext.getBody()
});

});
</script>
</head>
<body>

</body>
</html>

相关文章