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/(日本語)