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

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

(日本語)

コメント

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

  2. goooo より:

    [Javascript][ExtJS] Ext.grid.GridView の行を特定の条件で背景色や文字色を変更する方法 – [ま]技術雑記 http://htn.to/LUgap4