GridPanel Ext.net(ExtJS)で一連の行を強調表示する

ハイライトする必要があるExt.net gridPannel の色の行セットを強調表示するために必要です

現在のアプローチは、GridPannelのレンダリング時に以下の関数を呼び出すことです。

 function (value, meta, record, rowIndex,columnIndex,store) 
    {

                    color= record.data["ColorValue"];
                    var style = document.createElement('style');
                    style.type = 'text/css';
                    style.innerHTML = '.cssClass'+rowIndex+' {   background color:'+color+'}';
                    document.getElementsByTagName('head')[0].appendChild(style);
                    grid.store.getAt(rowIndex).set("mySelected", "cssClass"+rowIndex);
    }

しかし、このアプローチでは、同じ色のすべての行をハイライト表示します。 alert(color); は、GridPannelから各色の正しい色を取得しました

このための良いアプローチ?

1

2 答え

GridViewでgetRowClassメソッドをオーバーライドすることができます。

new Ext.grid.GridPanel({
    [...],
    viewConfig: {
        getRowClass: function(record, index, rowParams, store) { return 'some-class'; }
    }
});

レンダリング後の色を適用する必要がある場合は、各行の設定を試すことができます。

grid.getView().getRow(0).className += 'some-class';

注:この例はExtJS 3.4 APIに基づいていますが、4.0と同様のものがあります。

1
追加された

ExtJS 4では、ハイライトメソッドの行要素をグリッドストア内のレコードに追加します。

var store = grid.getStore();
var view  = grid.getView();
var node;

store.each(function(record) {
    if (record.get('fieldname') !== 'your_condition') return;

    //Return the node given the passed Record, or index or node.
    node = view.getNode(record);
    if (!node) return;

    Ext.get(node).highlight();
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript