5

Ext.grid.PanelgetRowClass 関数をオーバーライドして、グリッド内の行を色分けするために使用されるカスタム クラスを返す with 関数があります。これはうまく機能しますが、グリッドの色付け基準を変更するオプションをユーザーに提供したいと思います。以下の例では、「重大度」属性で色付けしていますが、例えば「ステータス」に変更したいと考えています。getRowClassグリッドが既にレンダリングされた後、関数またはグリッド上の viewconfig 全体を動的に変更し、グリッドの色を変更する方法はありますか?

alarmsGrid = Ext.create('Ext.grid.Panel', {
    title: 'Netcool Alarms',
    id: 'Netcool Alarms',
    columnLines: true,
    store: alarms_store,
    loadMask: true,
    stripeRows: true,
    features: [alarmsGroupingFeature],
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store){
          return record.get('severity').toLowerCase();
        }
    },
4

2 に答える 2

4

これは単純に、やり方が間違っているからです。ほぼすべての種類の構成オブジェクトは、クラスのインスタンス化時にのみ関連し、その後は何の効果もありません。そのため、ビュー インスタンス自体を取得して、そこでプロパティ (メソッド) を直接変更する必要があります。コメントから例を取るには、次のように書く必要があります

alarmsGrid.getView().getRowClass = function(record, rowIndex, rowParams, store){ 
     return record.get('status').toLowerCase(); 
}

JSFiddleを参照してください

于 2012-12-29T06:47:00.490 に答える
3

Ext.grid.View のExtJs ドキュメンテーション に よると(そして、今私が正常にテストしました!)getRowClass、最初viewConfigのうちは問題なくコールバック関数を提供できます!

これは古い投稿であることは承知していますがdebugger、上記のコードにステートメントを挿入し、コールバックをステップ実行することを検討してください。モデル フィールド名のスペルを間違えたり、nullこれが呼び出されたときにプロパティに値が含まれているなど、何か他の問題が発生している可能性があります。

また、上記のコードから、この機能の HTML マークアップを変更するグリッドでグループ化機能を使用しているように見えます。したがって、行クラスは、<tr>予想よりも深いネスト要素にある可能性があります! コールバック関数を変更して、getRowClass'this-is-a-test' のような簡単に検索できる一意のクラス名を返すことで、これをテストできます。

次に戻ってもう一度テストし、コールバックが呼び出されていることをデバッガー ステートメントで確認します。次に、お気に入りのブラウザー開発者ツールを使用して、独自のテスト クラスのページ ソースを検索し、実際に適用された HTML 要素を確認します。

更新：ははは、これを入力した後、質問を読むのが速すぎて、「レンダリング後」と言ったことに気付きました。私を悩ませたのは、受け入れられた答えがあなたが「間違ったことをしている」と言ったことですが、これは必ずしも真実ではありません. ビューが既にレンダリングされた後、コールバック関数全体を変更する場合でも、受け入れられた答えは正しいです。

ただし、それぞれのコールバックがどれほど複雑かによっては、とにかくコールバック全体を変更せず、コールバック内で使用される基準だけを変更した方がよい場合もあります。アプリケーションによっては、どちらの方法が他の方法よりも優れているとは限りません。フィールドを別のフィールド名に切り替えるのと同じくらい簡単な場合は'status'、ハードコードされた参照を削除し、ビューで変更可能な変数を使用するだけで、さまざまなコールバックを再宣言してそれらを切り替えるよりも良いかもしれません。 .

于 2014-02-04T17:59:00.430 に答える