Change gridpanel style without affecting treepanel

[jchau]

I would like to increase the padding on all grid rows. So I overrode the the following style for grid cells:



.x-grid-cell-inner{
padding:6px !important;
}


But now that treepanels are essentially grids too, it also increased padding between treenodes. Is there a way to target gridpanels only without assigning a special cls to every single gridpanel in my application?

[droessner]

You could do something like this:



Ext.define('My.Override.GridPanel', {
override: 'Ext.grid.Panel',
initComponent: function() {
this.cls = (this.cls || '') + ' custom-grid';
this.callParent(arguments);
}
});


and then define your css as:



.custom-grid .x-grid-cell-inner{
padding: 6px;
}

[jchau]

I solved the problem by resetting the grid cell css for trees only:




.x-grid-cell-inner {
padding: 6px !important; }


.x-grid-cell-treecolumn .x-grid-cell-inner {
padding-top: 0px !important;
padding-bottom: 0px !important; }