ExtJS4 Grid改变单元格背景颜色及Column render学习

利用的是Column的render

先看效果图：

代码如下：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../extjs-4.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../extjs-4.1.0/bootstrap.js" type="text/javascript"></script>
<style type="text/css">
.x-grid-cell.user-online
{
background-color: #9fc;
}
.x-grid-cell.user-offline
{
background-color: blue;
}
</style>
<script type="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';
return value;
}
},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Online', dataIndex: 'online' }
],
width: 400,
renderTo: Ext.getBody()
});

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

</body>
</html>

赞 (0)

相关推荐

  • Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

    Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法

    在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中 如下图: 但是这个一般没有什么用处,只是用于后台取值的作用. so 加一个属性:hideable:false就可以搞定了 复制代码 代码如下: { header: "attendanceId", dataIndex: "attendanceId", hideable: false, hidden: true },

  • Extjs中TabPane如何嵌套在其他网页中实现思路及代码

    Extjs中TabPane如何嵌套在其他网页中实现思路及代码

    复制代码 代码如下: var tabPanel = new Ext.TabPanel({ activeTab: 0, region:'center', layoutOnTabChange : false, deferredRender: true, items:[ { title: '百度', layout: 'fit', height: 375, id: 'training_grief_rep_tab_4', border: false, deferredRender: false, //it

  • ExtJS中文乱码之GBK格式编码解决方案及代码

    ExtJS中文乱码之GBK格式编码解决方案及代码

    这几天做后台看了一些Ext的知识,在切入工作项目的时候出现了乱码情况,所以就总结了这篇ExtJS中文乱码之GBK格式编码解决办法的文章,作为记录. 1.具体情况: 在引入: 复制代码 代码如下: <title>Ext-学习|测试项目</title> 02.<link href="/js/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /&

  • Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)

    复制代码 代码如下: var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称', autoLoad: false, proxy: { type: 'ajax', url: '请求路径', getMethod: function(){ return 'POST'; },//亮点,设置请求方式,默认为GET reader: { type: 'json', root: 'Data',

  • ExtJS4 Grid改变单元格背景颜色及Column render学习

    ExtJS4 Grid改变单元格背景颜色及Column render学习

    利用的是Column的render 先看效果图: 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

    表格GridPanel概述 ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义).而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同

  • python之pyqt5通过按钮改变Label的背景颜色方法

    使用setStyleSheet方法修改得到自己想要的字体,大小,颜色 self.lab = QLabel("标签字体大小颜色", self) self.lab.setGeometry(50,50,300,200) self.setStyleSheet("QLabel{color:rgb(225,22,173,255);font-size:50px;font-weight:normal;font-family:Arial;}") color:rgb()中的四个参数,前

  • python实现对excel中需要的数据的单元格填充颜色

    python实现对excel中需要的数据的单元格填充颜色

    前言: 一般处理数据使用的是pandas和numpy库,但是填充单元格颜色需要在excel中,使用的是openpyxl库,所以不能直接达到我们的需求,需要进行两个库的链接使用,先说下openpyxl填充色,pandas是直接读取数据,但是openpyxl则不是,必须要sheet处于active状态,而且必须进行sheet选择才可以读取数据 import openpyxl from openpyxl import load_workbook # 比如打开test.xlsx wb = load_wo

  • ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri

  • Python openpyxl读取单元格字体颜色过程解析

    问题 我试图打印some_cell.font.color.rgb并得到各种结果. 对于一些人,我得到了我想要的东西(比如" FF000000"),但对于其他人,它给了我Value must be type 'basetring'.我假设后者是因为我实际上没有为这些单元格定义字体颜色. 我正在使用openpyxl 2.2.2 解决方案 我认为这是openpyxl中的一个错误,我认为你应该在这里报告. 调试以下代码(当然使用trepan3k): from openpyxl import W

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

    css代码: 复制代码 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 复制代码 代码如下: { header : '分成类型', dataIndex : 'divideType', renderer : function(v,m){ m.css='x-grid-back-red'; return v; }, width : 60 } 或者直接这样写也可以 复制代码 代码如下: { header : '编号', dataIndex :

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

    css代码: 复制代码 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 复制代码 代码如下: { header : '分成类型', dataIndex : 'divideType', renderer : function(v,m){ m.css='x-grid-back-red'; return v; }, width : 60 } 或者直接这样写也可以 复制代码 代码如下: { header : '编号', dataIndex :

  • 易语言改变编辑框背景颜色的方法

    易语言改变编辑框背景颜色的方法

    背景颜色属性 所属对象:编辑框   操作系统支持:Windows 数据类型:整数型: 例程 说明 本属性用于取得和更改编辑框的背景颜色. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • 鼠标经过tr时,改变tr当前背景颜色

    示例如下: 复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>鼠标经过给tr换颜色</title>    </head><body><table align="center" width="100%"

随机推荐