Home > [Javascript][ExtJS] Ext.grid.GridView の行を特定の条件で背景色や文字色を変更する方法
Blog

[Javascript][ExtJS] Ext.grid.GridView の行を特定の条件で背景色や文字色を変更する方法

  2008/12/05  
extjs.co.jp
extjs.co.jp

最近は JavaScriptのライブラリ ExtJS を使ったWebアプリの開発をしています。
英語の情報は捜すと結構あるんですが、日本語の情報がまだまだ少ないようで、何かと苦戦していたりします。
いくつかあるんですが、サンプルに載ってる事以上のことをしようとすると、とたんに情報が減ってしまうようで。
うーん、やはりExtJS勉強会に参加したいー!!⇒(資料とか見れるみたいですね。)

そんなわけで、こつこつ作成していますが、APIドキュメントだけでは、使い方がわらない事も多々ありまして。自分のJavaScriptのスキルが無いというか…。
サンプル集とか逆引きできるTipsみたいなのが充実してくるといいんですけどねー。

てことで、結構簡単なことを行うのに、どうやってやるんだ?って事があったのでメモ。
Gridの行を特定の条件で背景色や文字色を変更する方法です。



簡単に言えば、Ext.grid.GridViewのgetRowClassをImplementして使うということなんですが、Ext JS Forumsに載ってたので忘れないようにメモ。


https://extjs.com/forum/showthread.php?p=58234#post58234



gridView = new Ext.grid.GridView({
getRowClass : function (row, index) {
var cls = '';
var data = row.data;
switch (data.SEVERITY) { //
case 'C' :
cls = 'caqDataGridCritical' // ←あらかじめ文字色や背景色を変更するCSSをどこかで定義しておく
break;
case 'M' :
cls = 'caqDataGridMinor'
break;
case 'W' :
cls = 'caqDataGridWarning'
break;
case 'H' :
cls = 'caqDataGridHarmless'
break;
}
return cls;
}
});

grid = new Ext.grid.Grid('grid', {
ds: ds,
cm: cm,
//selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
autoExpandColumn: 'atext',
monitorWindowResize : true,
loadMask: true,
view: gridView
});



getRowClassでgoogle検索したら、こんなサンプルもありました。
http://www.ibm.com/developerworks/jp/web/library/j_wa-aj-extjs/



var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:700,
height:500,
title:'ExtJS.com - Browse Forums',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},



※ 参考
Ext - A foundation you can build on
http://extjs.com/(英語)
http://extjs.co.jp/(日本語)

Comment on this article

Parts Station 開発日記 - 行の背景色を内容に応じて変更

[...] その方法はこちらのブログでも紹介されていますね。 [...]

goooo

<span class="topsy_trackback_comment"><span class="topsy_twitter_username"><span class="topsy_trackback_content">[Javascript][ExtJS] Ext.grid.GridView の行を特定の条件で背景色や文字色を変更する方法 - [ま]技術雑記 http://htn.to/LUgap4</span></span>

Send comments
  ※ Email will not be published