ExtJSグリッド内の1つの行のテキスト色を変更するにはどうすればよいですか？

Question

私は以下のExtJSグリッドを作成しました。

の2番目の行のすべてのセルのテキストの色を変更したいと思います。私がしなければならない何

var myData = [ 
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'], 
    [16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'], 
    [5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'], 
    [1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'], 
    [12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12'] 
]; 

var myReader = new Ext.data.ArrayReader({}, [{ 
     name: 'id', 
     type: 'int' 
    }, { 
     name: 'object', 
     type: 'object' 
    }, { 
     name: 'status', 
     type: 'float' 
    }, { 
     name: 'rank', 
     type: 'float' 
    }, { 
     name: 'lastChange', 
     type: 'date', 
     dateFormat: 'Y-m-d H:i:s' 
    }]); 

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    style: 'color:red', //makes ALL text in grid red, I only want one row to be red 
    store: new Ext.data.Store({ 
     data: myData, 
     reader: myReader 
    }), 
    columns: [{ 
      header: 'ID', 
      width: 50, 
      sortable: true, 
      dataIndex: 'id', 

      hidden: false 

     }, { 
      header: 'Object', 
      width: 120, 
      sortable: true, 
      dataIndex: 'object', 
      renderer: columnWrap 

     }, { 
      header: 'Status', 
      width: 90, 
      sortable: true, 
      dataIndex: 'status' 
     }, { 
      header: 'Rank', 
      width: 90, 
      sortable: true, 
      dataIndex: 'rank' 
     }, { 
      header: 'Last Updated', 
      width: 120, 
      sortable: true, 
      renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), 
      dataIndex: 'lastChange' 
     }], 
    viewConfig: { 
     forceFit: true 
    }, 
    title: 'Computer Information', 
    width: 500, 
    autoHeight: true, 
    frame: true, 
    listeners: { 
     'rowdblclick': function(grid, index, rec){ 
      var id = grid.getSelectionModel().getSelected().json[0]; 
      go_to_page('edit_item', 'id=' + id); 
     } 
    } 
}); 

：

しかし、私はここでしかショーとして、ヘッダーテキストを含むすべて行に全てのセルの色を変更する方法を見つけることができます2行目のセルだけのテキストの色を変更しますか？

Answer 1

これが役立つかどうかはわかりませんが、試してみてください。私はローカルで試してみましたが、2行目のすべての文字の色が変わります。

グリッドにリスナーを追加します。

listeners:{ 
    viewready: function(g){ 
     g.getView().getRow(1).style.color="#f30"; 
    } 
} 

「viewreadyそれが色を割り当てる（またはあなたの場合、余分なクラスを追加する通常のJavascriptをしたら、あなたはGridViewからgetRow()メソッドを使用して、行のdiv要素を取得することができたとき。 ）

乾杯

EDIT

たい

あなたの店がデータを遠隔で検索している場合、それが動作していないことに気付きました。ビューは準備完了ですが、データは準備ができていません。この方法は失敗します。

Answer 2

getRowClassを無効にしたい場合は、GridPanelのviewConfigに渡されます。例は、GridPanelのAPIドキュメントで提供されています。

viewConfig: { 
     forceFit: true, 

    // Return CSS class to apply to rows depending upon data values 
     getRowClass: function(record, index) { 
      var c = record.get('change'); 
      if (c < 0) { 
       return 'price-fall'; 
      } else if (c > 0) { 
       return 'price-rise'; 
      } 
     } 
    }, 

GridViewは、メソッドが含まれているので、より多くの情報のためのAPIであり見て：

getRowClass(Record record, Number index, Object rowParams, Store store) 

オーバーライドこの機能にカスタム CSSクラスを適用するにはレンダリング中の行 現在の 行の行テンプレートにカスタムパラメータ を指定して、rowParamsパラメータを使用してレンダーする方法をカスタマイズすることもできます。 この 関数は、CSSクラス の名前（または空の文字列 ''なし） を返し、行の ラップdivに追加されます。複数のクラス の名前を適用するには、文字列 （例： 'my-class another-class'）内に、空白で区切られた を返すだけです。

index引数を使用すると、CSSを特定の行に適用できます。