View Full Version : ExtJS 4.2.2 tree node selected CSS not being applied.

31 Oct 2014, 3:23 PM
I have the following treepanel with a renderer setting the tdCls and that works.

What does not work is the selected node CSS. If I have only the following it works but it affects select item for all grids. I want it to only affect selected nodes for the one tree.

.x-grid-row-selected .x-grid-td

xtype: 'treepanel',
width: 400,
height: 315,
scroll: true,
border: false,
useArrows: true,
hideHeaders: true,
store: Ext.create('Ext.data.TreeStore', {
model: 'MountTreeModel',
root: {
"expanded": true,
"children": []
rootVisible: false,
columns: [{
xtype: 'treecolumn',
flex: 1,
sortable: false,
dataIndex: 'text',
renderer : function(value, metaData, record) {
if(!Ext.isEmpty(record) && CommonUtil.hasProperty(record, 'data.mounted') && record.data.mounted) {
metaData.tdCls = 'mountedOne';
return ('<span>' + value + ' <span style="color: #0E8208; font-style: italic;font-weight: bold;">(' + StringMessages.getMessage('Common_Mounted') + ') </span></span>')
} else {
metaData.tdCls = 'unmountedOne';
return value;

.mountedOne {
padding-left: 16px;
background: #BDF4BD;
color: #000000;

.mountedOne .x-grid-row-selected .x-grid-td {
padding-left: 16px;
background: #BDF4BD !important;
color: #000000 !important;

3 Nov 2014, 4:38 PM

You can pass an additional cls to the treepanel to further scope any custom CSS you're using:

4 Nov 2014, 5:20 PM
It's not quite what I am trying to achieve.

The first time user enters screen, no check boxes will be selected. If they select a check box and save, the next time they open the screen the row they checked last time will have a green background, and the check box will not be rendered as seen below (I have that working).

But when they return to the screen, if they do click a row that was previously selected (and is thus green), I don't want the default selected styling (gray background, white text).

So that is what I have been unable to achieve.


4 Nov 2014, 10:42 PM
It may be helpful to see a test case. You can post a test case to https://fiddle.sencha.com.
To add a css resource you can click the menu button bottom-left, click on the + next to /<root>, on the Local tab select a filetype of CSS, give the resource a name like app.css, and then add any custom rules you'd like to that resource file.