extjs grid 整行变颜色_ExtJS4 Grid改变单元格背景颜色及Column render学习

利用的是Column的render实现单元格背景颜色改变,本文给予了实现代码，感兴趣的朋友可以了解下，或许对你学习ExtJS4 Grid有所帮助

利用的是Column的render

先看效果图：

代码如下：

.x-grid-cell.user-online

{

background-color: #9fc;

}

.x-grid-cell.user-offline

{

background-color: blue;

}

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()

});

});