カスタムCSSクラスをデータグリッド内の行に追加するにはどうすればいいですか（Ext.grid.Panel）？ExtJSでは、カスタムCSSクラスをデータグリッドの行に追加する方法は？
私はExtJS 4.0を使用しています。もちろん、あなたが別のセルにgetRow()呼び出しを置き換えることができ
Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');
、またはあなたができたループを、あなたのすべての行を通って、それを適切に追加します。
：次に、あなたのカスタムCSSファイルは、のようなものが含まれます
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record, index, rowParams, store) {
return record.get('someattr') === 'somevalue') ? 'someclass' : '';
}
},
...
});
マニュアルも参照してください。http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view。Table-method-getRowClass –
あなたはこのような何かを行うことができます。
そして、あなたが実行して、デフォルトのCSSに加えて、それのスタイルを設定できます。
.x-grid3-row-selected .myClass {
background-color: blue !important;
}
もaddRowClass呼ばGridViewのプライベートな方法があります。あなたは行って、同様にあなたの行にクラスを追加するためにこれを使用することができます：あなたのExt.grid.Panel使用getRowClass()のごinitComponent()で
grid.getView().addRowClass(rowId, 'myClass');
// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
var row = this.getRow(rowId);
if (row) {
this.fly(row).addClass(cls);
}
},
次のように：
initComponent: function(){
var me = this;
me.callParent(arguments);
me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
if (/* some check here based on the input */) {
return 'myRowClass';
}
};
}
これは基本的に上書きされますgetRowClass()レンダリング時にカスタムクラスを適用するために呼び出される基底のExt.grid.Viewの関数。それを行うための方法は、グリッド上でviewConfigを定義することです
.myRowClass .x-grid-cell {background:#FF0000; }
これは確かに、この例では、レコードの値に基づいて条件付きでクラスを適用することができます。これは、getRowClassオーバーライドの一般的な使用方法です。 – dougajmcdonald
また、 'initComponent'を使うという命令的なアプローチなしで、グリッドの' viewConfig'設定で 'getRowClass'を定義するのがいいと分かりました:) –
これは推奨された方法ではありません。 –
使用最も簡単な方法は、あなたのグリッドの使用では
-
cls： 'myRowClass'
あなたのcss -
.myRowClass .x-grid-cell {background：＃FF0000！important; }
これは絶対に尋ねられたものではありません。 –
あなたは、データが読み込まれた後、クラスを変更したい場合、あなたはこのようにそれを行うことができます。ここでは
myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");
、rowIndexには以下のように（あなたには、いくつかのイベント関数で取得することができ、選択した行であり、 "選択"）。これを使うと、行のCSSをクリックした後に変更することができます。
この質問を見ることもできます： http://stackoverflow.com/questions/7471223/extjs-4-cell-renderer-problem/7476057#7476057 –