如何着色EXTJS 6.2现代格栅行

问题描述：

我正面临一个问题。我正在构建一个EXTJ 6.2现代应用程序Sencha架构师4.1。我正在使用服务器加载的商店在我的面板中的网格组件。我想根据我所拥有的数据对行进行着色。

在经典，这是可行的与
如何着色EXTJS 6.2现代格栅行

viewConfig: { 
    forceFit: true, 
    getRowClass: function(record, rowIndex, p, store) { 
    //some if statement here 
}

我想这在现代，但它不工作。任何人都知道另一种方式或黑客，我可以做的行颜色？或者至少改变一种颜色背景。

我真的想尽量避免使用列表组件。

谢谢Aghi

答

在现代，您可以使用itemConfig配置Ext.grid.Row。

添加代码波纹管的Sencha Fiddle：

Ext.application({ 
name : 'Fiddle', 

launch : function() { 
    var store = Ext.create('Ext.data.Store', { 
fields: ['name', 'email', 'phone'], 
data: [ 
    { 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224", color: "blue" }, 
    { 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234", color: "green" }, 
    { 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244", color: "yellow" }, 
    { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254", color: "red" } 
] 
}); 

Ext.create('Ext.grid.Grid', { 
title: 'Simpsons', 

variableHeights: true, 

store: store, 

itemConfig: { 
    listeners: { 
     painted: function (row) { 
      var record = row.getRecord(); 
      var color = record.get('color'); 

      row.setStyle('background: '+color) 

      //if (color == 'red') 
       //row.setStyle('background: red'); 
     } 
    } 
}, 

columns: [ 
    { 
     text: 'Name', 
     dataIndex: 'name', 
     minWidth: 200, 
     //flex: 1, 
     //cellWrap: true, 
     cell: { 
      bodyStyle: { 
       whiteSpace: 'normal' 
      } 
     } 
    }, 
    { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 2, 
     minWidth: 250 

    }, 
    { 
     text: 'Phone', 
     dataIndex: 'phone', 
     flex: 1, 
     minWidth: 120 
    }, 
    { 
     text: 'Color', 
     dataIndex: 'color', 
     flex: 1 
    } 
], 

//height: 200, 
//layout: 'fit', 
fullscreen: true 
}); 
} 
});

的itemConfig的部分是什么就可以了。

如何着色EXTJS 6.2现代格栅行

相关推荐