如何着色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

來源

2017-05-25 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的部分是什麼就可以了。

來源

2017-11-14 15:24:09

如何着色EXTJS 6.2現代格柵行

回答

相關問題