PDA

View Full Version : Change style of TreePanel



keckeroo
30 Dec 2011, 1:12 PM
In V3 of Extjs someone nicely created some css tinkering to change the look of the tree so that it worked as a nice menu system. These are some of the CSS values that were specified ...



.x-tree { background:#fff !important; }
.x-border-layout-ct { background:transparent; }
.x-tree-node div.forum-ct{
background:#ddd url(cmp-bg.gif) repeat-x;
margin-top:1px;
border-top:1px solid #ddd;
border-bottom:1px solid #ccc;
padding-top:2px;
padding-bottom:1px;
}

.forum-ct .x-tree-node-icon { display:none; }
.forum-ct a span { font-weight:bold; color:#222; }

.forum { border:1px solid #fff; margin-left: -15px; }
.forum .x-tree-ec-icon { display:none; }

.icon-forum { background-image:url(../images/silk/bullet_red.png) !important; }

.x-tree-selected { border:1px dotted #a3bae9; background:#DFE8F6; }
.x-tree-node .x-tree-selected a span{
background:transparent;
color:#15428b;
font-weight:bold;
}



with corresponding tree config info :



id: 'community', text:"Community",cls:"forum-ct",iconCls:"forum-parent",expanded:false, singleClickExpand: true,
children:[
{ text:"Gxt: Help",cls:'forum',iconCls:"icon-forum","threads":"2041","totalPosts":8836,leaf:true},
{ text:"Gxt: Bugs",cls:'forum',iconCls:"icon-forum","threads":"628","totalPosts":2960,leaf:true},
{ text:"Gxt: User Extensions and Plugins",cls:'forum',iconCls:"icon-forum","threads":"40","totalPosts":169,leaf:true}


Sorry - I've racked my brains and it seems trees have been converted into grids in V4 and i'm not entirely sure how to obtain the same effect. :-(

Any help would be greatly appreciated.

Thank you.

Kevin

mitchellsimoens
31 Dec 2011, 7:23 AM
Yes, Grids and Trees both share the save view that boils to Ext.panel.Table. You will just need to do some CSS work to get the desired look based on the DOM structure.