2017-11-10 231 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

任何想法?

您需要在当前的代码改变 这record.data.get('TIEMPO')你需要使用record.get('TIEMPO')record.data.TIEMPO,了解详情可以参考这个Ext.data.Model get()代替。

在这里,我创建了一个小的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

样式表大多欢迎:) –