ExtJS4 Grid改變單元格背景顏色及Column render學(xué)習(xí)
更新時間：2013年02月06日 11:26:14 作者：
利用的是Column的render實現(xiàn)單元格背景顏色改變,本文給予了實現(xiàn)代碼，感興趣的朋友可以了解下，或許對你學(xué)習(xí)ExtJS4 Grid有所幫助
利用的是Column的render
先看效果圖：
代碼如下：
復(fù)制代碼 代碼如下:
<!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>
相關(guān)文章
最近在學(xué)習(xí)使用ExtJS進行富客戶端開發(fā)。使用ExtJS 2.2.1的grid控件時，發(fā)現(xiàn)在ie6中運行存在一個問題2009-05-05
ExtJS中窗口是由Ext.Window類定義，該類繼承自Panel，因此窗口其實是一種特殊的面板Panel。窗口包含了浮動、可拖動、可關(guān)閉、最大化、最小化等特性。2011-01-01
Extjs學(xué)習(xí)筆記之八 繼承和事件基礎(chǔ)
只有有了事件，頁面才能真正的“活”起來。Extjs的事件也是經(jīng)過良好封裝的，對于事件的處理都由Ext.uitl.Observable類提供接口。2010-01-01
這篇文章主要為大家介紹了Extjs實現(xiàn)下拉樹的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
ExtJS下grid的一些屬性說明2009-12-12
導(dǎo)入extjs、jquery 文件時$使用沖突問題解決方法
在html頁面中，沒有導(dǎo)入jquery文件時，可以正常保存，而導(dǎo)入jquery文件后，則不能不存了，發(fā)現(xiàn)導(dǎo)入的jquery文件和現(xiàn)有的extjs文件沖突了2014-01-01
本文介紹在桌面程序開發(fā)中很常用也很簡單的工具欄和菜單，但是在通常的web開發(fā)中，要實現(xiàn)好工具欄和菜單并非易事，然而extjs使我們能夠用類似桌面程序開發(fā)的方法來開發(fā)web的工具欄和菜單。2010-01-01
ExtJS4 組件化編程，動態(tài)加載，面向?qū)ο螅珼irect
ExtJS4終于出了正式版，體驗一下面官方推薦的向?qū)ο缶幊套罴褜嵺` 過去的做法是new對象或者Ext.create一個對象，每個對象都要先實例化才能使用2011-05-05
Extjs學(xué)習(xí)筆記之五 一個小細節(jié)renderTo和applyTo的區(qū)別
Extjs的組件有兩個看起來類似的配置項，applyTo和renderTo，這兩個配置項都是用來指定將該extjs組件加載到什么位置。那他們到底有什么區(qū)別呢，網(wǎng)上搜了下，有兩篇博文也是關(guān)于這個的。2010-01-01
ExtJS是一個MVVM結(jié)構(gòu)的JavaScript框架,在處理表格表單方面則是它的拿手好戲,這里整理了基本的JavaScript的ExtJS框架中表格的編寫教程2016-05-05