PDA

View Full Version : Tree Background CSS



Peter Tierney
5 Apr 2013, 4:22 PM
I'm using a tree panel and I can't seem to find the CSS class so I can change the background from white or make it opaque. It doesn't matter which theme, it's always white. It's entirely possible I've just missed, but I'm hoping someone out there has run across this issue.

Thanks in advance.

slemmon
7 Apr 2013, 9:42 PM
.x-grid-body sets the background of the tree panel.
Then .x-grid-row .x-grid-cell will set the tree's rows' background-color and border-color.

*This is based on what I'm seeing when inspecting the elements in Chrome using Chrome's dev tools.
As an aside, I just recently found a nice tutorial on how to get the most from Chrome's dev tools:
http://www.codeschool.com/courses/discover-devtools

Peter Tierney
8 Apr 2013, 6:30 AM
That was exactly what I was looking for and yes, I missed only because I didn't open enough divs in the layout. The below CSS gets the row background and border to be opaque. I then also use .x-grid-view with background settings to get it to look exactly the way I wanted. If there is a better way, please let me know.

Thanks for the help.



.x-grid-row .x-grid-cell {
color: null;
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
border-style: solid;
border-width: 1px 0;
}

Georgi Yankov
26 Apr 2013, 5:34 AM
I think it's good always to have your component wrapped with your own class so that not to apply those css rules everywhere else. I mean to all the same components met.

Why not use the following:

Ext.create('Ext.tree.Panel', {
cls: 'your-css-class'
});

and then

your-css-class .x-grid-row .x-grid-cell {
...
}

slemmon
26 Apr 2013, 12:56 PM
@Georgi Yankov
Great point! That's a great way to ensure your styles are scoped to only the components you want styled (unless you intended on a global style change).

stewardsencha
7 Jun 2013, 11:20 AM
I had the same question.
The answer made sense.

But there is more I do not know. I have spent hours here. My css skills are crappy.

Can anyone say what I am overlooking?
This should be a simple standalone test.
I have sorta partial success but cannot make progress.

In the screen print of the chrome panel, I can see that my "navpanel" style is not being applied for .x-grid-row-selected. There's a whole lot more going wrong, but maybe answering that will get me going.

I am unclear on why I have to be using !important.

Is it the case that I must do all this via sass and theme building, I cannot just test out stuff this way?



<html>
<head>
<meta charset="UTF-8">
<title>testtreestyle</title>
<link rel="stylesheet" href="./ext/resources/css/ext-all.css">
<style>
.navpanel .x-grid-body
{
background-color: pink;
color:pink;
}
.navpanel .x-grid-cell
{
background-color: #FFFF99;
}
.navpanel .x-grid-row
{
border-color:#FFFF99 !important;
}


.navpanel .x-grid-row-selected
{
border-color:#FFFF99 !important;


}
.navpanel .x-grid-row-over
{
background-color:blue;
color:blue; !important;
}
/*
.navpanel .x-grid-td
{
background-color:#FFFF99 !important;
border-color:#FFFF99 !important;


}
*/
.navpanel .x-grid-rowwrap-div
{
background-color:yellow;
color:yellow;
}
</style>
<script src="./ext/ext-all-debug.js"></script>
<script>


Ext.onReady(function(){


var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "Item1",
leaf: true


},
{
text: "Item2",
leaf: true
},
{
text:'item3',
children:[
{
text:'item4',
leaf:true
}
]


}


]
}
});




var tree = Ext.create('Ext.tree.Panel',{


rootVisible: false,
lines:false,
store:store,


cls:'navpanel',
viewConfig:{
cls:'navpanel',
baseCls:'navpanel',
componentCls:'navpanel'
},


renderTo:Ext.getBody()
})
})
</script>
</head>
<body>
</body>
</html>

slemmon
7 Jun 2013, 12:24 PM
Try doing the following:



.navpanel .x-grid-row-selected .x-grid-cell, .navpanel .x-grid-row-before-focused .x-grid-td
{
/*border-color:#FFFF99 !important;*/
border-color:red; /* I use red when testing just to see where the chages are */
}



When you inspect the DOM you'll see that x-grid-row-selected is applied to the parent tr element of the selected row and when you look at the row above that it has a class of x-grid-row-before-focused. When you look at the CSS in the dev tools you'll see that x-grid-row-selected doesn't actually have a border style (that's the tr element), but the td element under it does. And that's what you'll need to key off of for your own style overrides.

This stuff isn't easy - takes some searching - stick with it. :)