1

cfgrid のステータス条件に基づいてセルの色を変更したいと考えています。

例えば：

  1. レコードのステータスが期限切れの場合、セルは赤色になり、期限切れが太字で表示されます。
  2. レコードのステータスが期限 (30 日以内) の場合、セルは黄色になり、期限が太字になります。
  3. レコードのステータスが現在 (期日が 30 日を超えている) の場合、セルは緑色になり、現在が太字で表示されます....

cfgridrow と cfgridcolumn のレンダリングしか見つかりませんでした。

4

2 に答える 2

3

ExtJS が提供する列レンダラー プロパティを使用する必要があります。列のレンダラーは 3 つの引数を取得します。2 つ目は、セル dom 要素の属性として設定される attr と呼ばれるプロパティを設定できるメタ オブジェクトです。たとえば、セルに css スタイルを指定できます。

var renderer = function(value, meta, record){
    if(value == "Overdue") { meta.attr = 'style="color:red;font-weight:bold"'; }
    if(value == "Due") { meta.attr = 'style="color:yellow;font-weight:bold"'; }
    if(value == "Current") { meta.attr = 'style="color:green"'; }
    return value;
}

Ext.grid.ColumnModel ドキュメントの setRenderer を確認してください

于 2011-03-01T21:24:11.377 に答える
0

有効期限を表示するために、グリッドの列に必要なものに似たものを使用します。

{
 header:    'Expiration Date',    
 dataIndex: 'ExpireDate',
 renderer:  function (value, metaData, record, rowIndex, colIndex, store) {

     if ( record.get ( 'ExpireDate' ) < new Date ( ).clearTime ( ) ) {
       metaData.css += ' y-grid3-expired-cell';
       value = '';    
     }
     if ( record.get ( 'ExpireDate' ).format ('m/d/Y') == '12/31/9999' ) {
       metaData.css += ' y-grid3-non-expired-cell';
       value = '';
     }        
     value = (value == '') ? '' : record.get ('ExpireDate').format ('m/d/Y');
   }      
   return value;    
 }

},

CSS クラスを使用する方がより堅牢なソリューションです。私のクラスは次のように定義されています。

.y-grid3-expired-cell {
  background:         #AA0000;
} 

.y-grid3-non-expired-cell {
 background:         #00AA00;
}

あなたがする必要があるのは、独自のロジックとスタイルを追加することだけです...

于 2011-03-02T03:11:53.797 に答える