View Full Version : Grid Row Hover Background Color Change Missing

18 Dec 2013, 1:44 PM
Hi guys, how can I change the background color of the row when I hover over each row... It seems like that in the kitchen sink example, this feature is default, I don`t know why it`s turned off in my code. What config should I change or theming variable should I change.. Thanks in advance.

buildForm: function () {
return [{
xtype: 'propertygrid',
//ui: 'detail',
border: false,
//padding: false,
//bodyPadding: false,
padding: 10,
columnLines: false,
stripeRows: true,
rowLines: true,
enableColumnMove: false,
nameColumnWidth: 150,
width: 600,
allowDeselect: true,

//titleAlign: 'right',
//header: false,
hideHeaders: true,
/*listeners: {
itemmouseenter: this.initiateEdit
source: this.record.data,
//plugins: [this.record.cellEditing],
sourceConfig: this.editorConfig,
overCls: 'form-row-over'

18 Dec 2013, 2:05 PM
Have a look at this article:

19 Dec 2013, 6:59 AM
Thanks Scott, but I realized that the reason is my grid never adds the grid-row-over class. The solution is to add trackMouseOver: true to the config XD

4 Jan 2015, 10:24 AM
Scott, this is excelent:


T (http://skirtlesden.com/articles/styling-extjs-grid-cells)hanks, and thanks skirtl (http://skirtlesden.com/articles/styling-extjs-grid-cells)e