2017-11-10 25 views
0

私はこのグリッドを持って変更行の色

{ 
     xtype: 'gridpanel', 
     id: 'grdSeguimiento', 
     margin: '20 0 10 0', 
     width: 1423, 
     store: 'Solicitud', 
     viewConfig: { 
      getRowClass: function(record, rowIndex, rowParams, store) { 
       console.log(record); 
       return record.data.get('TIEMPO') == 1 ? 'child-row' : 'adult-row'; 

      }, 
      stripeRows: false 
     }, 
     columns: [ 

      { 
       xtype: 'gridcolumn', 
       hidden: true, 
       dataIndex: 'TIEMPO', 
       hideable: false 
      } 
     ], 
     plugins: [ 
      { 
       ptype: 'rowediting', 
       listeners: { 
        edit: 'onRowEditingEdit' 
       } 
      } 
     ] 
    } 

そして、このCSSファイル

.child-row .x-grid-cell { 
background-color: #ffe2e2 !important; 
color: #900; 
} 

.adult-row .x-grid-cell { 
background-color: #e2ffe2 !important; 
color: #090; 
} 

(TIEMPO)を各行の内側に配置します。

しかし、私は

Error: rendered block refreshed at 0 rows while BufferedRenderer view size is 63 

グリッドを取得していますが、CSSファイルを使用する前に、うまく働きました。私はいくつかの調査をしましたが、有用なものは何も見つかりませんでした。

上記のコードはすべてのコードではなく、レンダラーとアクションカラムを使用しましたが、それほど重要ではないと私は推測しています。

アイデア?

編集1:私は非ソート可能にテーブルを変更するとデータが

+0

'record.data.get( 'TIEMPO')'は機能しません。あなたは 'record.get( 'TIEMPO')'を探しています。 – Alexander

答えて

1

どんなスタイリングすることなく、しかし、任意のアイデアを表示されますか?

あなたは、あなたがこのExt.data.Model get()を参照することができます詳細についてはrecord.get('TIEMPO')またはrecord.data.TIEMPOを使用する必要があなたの現在のコードの代わりに、 このrecord.data.get('TIEMPO')に変更する必要があります。

ここでは、小さなsencha fiddleデモを作成しました。あなたはそれがここでうまくいっているのを見ることができます。

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields: ['name', 'email', 'phone', 'isChecked'], 
    data: { 
     'items': [{ 
      'name': 'Lisa', 
      "email": "[email protected]", 
      "phone": "555-111-1224", 
      "isChecked": 1 
     }, { 
      'name': 'Bart', 
      "email": "[email protected]", 
      "phone": "555-222-1234", 
      "isChecked": 0 
     }, { 
      'name': 'Homer', 
      "email": "[email protected]", 
      "phone": "555-222-1244", 
      "isChecked": 0 
     }, { 
      'name': 'Marge', 
      "email": "[email protected]", 
      "phone": "555-222-1254", 
      "isChecked": 1 
     }] 
    }, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Grid row class on basis for row value..', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    viewConfig: { 
     getRowClass: function (record, rowIndex, rowParams, store) { 
      return record.get('isChecked') == 1 ? 'child-row' : 'adult-row'; 
      //you can also use 
      //record.data.isChecked == 1 ? 'child-row' : 'adult-row'; 

     }, 
     stripeRows: false 
    }, 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name', 
     flex: 1 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone', 
     flex: 1 
    }], 
    height: 200, 
    // width: 400, 
    renderTo: Ext.getBody() 
}); 
+0

ありがとう、それは働いた、私はまた、HTMLのスタイルシートへのリンクを追加することを忘れていた – Esteban

+0

大歓迎:) –