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