グリッドの列に背景色（またはカスタムCSSクラス）を適用する方法 - ExtJs 4？

Question

それはとてもシンプルなはずですが、私はこれを行うことはできません（私はそれを動的に行う必要はありません）。例えば、私はそうのような単純な2列のグリッドを設定しているとします

columns : [  
     {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'}, 
     {header: 'CATEGORY', dataIndex: 'category', width:100} 
    ] 

cls: 'red'属性はヘッダのみではなく、実際の列に影響を与えます。私は、カスタムレンダラ（多分）を使用する必要があることを他の場所で見てきましたが、私はのような何かしようとした場合：

{header: 'USER', dataIndex: 'firstName', width:70, 
    renderer: function(value) { 
     this.addCls('red'); 
     return value; 
    } 
} 

を私はまだ退屈な白い背景を取得します。私はまた、function(value, metadata, record, rowIndex, colIndex, store)のようなレンダラー関数定義を使用している人も見たことがありますが、alert()を使って入力パラメータをテストしたところvalue以外はすべてundefinedとなり、ExtJs 4以前のバージョンでのみ有効だったと思います。

レンダラー機能で'<span class="red">' + value + '</span>'のようなものを返してみましたが、これは列の背景全体を変更するのではなく、テキストを強調表示しました。

デフォルトのExt CSSクラスをオーバーライドする必要はありません。アプリの特定のグリッドにバックグラウンドカラーを適用したいので、すべてを対象にしないためです。

さらに、問題のグリッドのすべての列が異なる色を持つことがあります（例では、クラスを最初の列に追加しただけです）。

redは、私のCSSファイルで.red {background:#FF0000;}と定義されているとします。

Answer 1

使用するCSSクラスの値とともに、列ヘッダー定義にtdCls属性を追加します。

columns : [ 
    {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'}, 
    {header: 'CATEGORY', dataIndex: 'category', width:100} 
] 

Answer 2

方が良い、これを読んだ：http://www.sencha.com/learn/grid-faq/

セクション

Answer 3

atian25によって提案されたグリッドFAQはExtJSの4には適用されませんが「セル/行/列を変更するには」私ができました私の質問に対する正解に向かって私を導くためにそれを使用すること。 JavaScriptで

、あなたの列の定義にID属性を追加します。

{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'} 

これは、その列のすべてのtd要素について、以下のCSSクラスを生成します：あなたのCSSで

.x-grid-cell-myColumn 

をファイル（Ext CSSファイルの後にロードする必要があります）は、次の定義を追加します。

.x-grid-table .x-grid-cell-myColumn {background:#FF0000;} 

そしてビンゴ、あなたは、その列の明るい赤い背景を持っています。この同じテクニックを使用すると、必要に応じて個々の列をカスタマイズできます。

注：.x-grid-tableセレクタを使用しないと、「行」クラスの特異性が勝ちます。また、カスタム列に対してホバー効果を維持する場合は、.x-grid-row-overを再定義する必要があります。

Answer 4

目標は、私がgetRowClassで行ったカラムに1つのCLSを適用し、1〜2秒後にそれを削除することです。 websyncは5秒ごとに新しいデータをプッシュしています。このセルが表示されると、変更された列（セル）の点滅のようになり、新しいデータをリフレッシュする前に「白」（デフォルト）に戻ります。新しいレコードを比較するために割り当てられた値は0ですが、実際のケースでは比較される最後の値です！