Hello again, @richardLiu!
I get you're using the
Tree Panel > Basic > Built in Markup example as a base for the test case, right?
For some reason, in that example and applying the CSS from the suggested thread, I couldn't even reproduce the result you got by applying the styles. It painted blue all around. I have tried to simplify the CSS rule to a minimal, and using different colors to highlight where they apply. The only things that actually changed from the referenced topic were the rules for the row
selected and
mouse over highlights, where they changed from
row to
item.
So from the example linked above, all you'd have to do is:
1. add this
<style> block inside the example's
<head> block:
<style type="text/css">
.my-tree .x-panel-body
{
background-color: #000080;
}
.my-tree .x-toolbar
{
background-image: none;
background-color: #30A080;
}
.my-tree .x-grid-row .x-grid-cell {
background-color: #000080;
}
.my-tree .x-grid-item-over .x-grid-cell {
background-color: #0080FF;
}
.my-tree .x-grid-item-selected .x-grid-cell {
background-color: #00ff60;
}
</style>
2. tell the tree panel it should use the
my-tree CSS class by adding this to the
ext-treePanel properties:
cls="my-tree"
For reference, it could go, say, after the
scrollable="true" property, but anywhere in the tree list of properties should do.
In the end, the example should look like this source-code wise:
@page
@model ExtNet7WebPages_NuGet.Pages.Forums._6._3._3_6.c63372_treePanelBgColorModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>
TreePanel built using TagHelpers - Ext.NET Examples
</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style type="text/css">
.my-tree .x-panel-body
{
background-color: #000080;
}
.my-tree .x-toolbar
{
background-image: none;
background-color: #30A080;
}
.my-tree .x-grid-row .x-grid-cell {
background-color: #000080;
}
.my-tree .x-grid-item-over .x-grid-cell {
background-color: #0080FF;
}
.my-tree .x-grid-item-selected .x-grid-cell {
background-color: #00ff60;
}
</style>
</head>
<body>
<h1>
TreePanel built using TagHelpers
</h1>
<ext-treePanel
id="TreePanel1"
width="480"
height="600"
frame="true"
iconCls="x-md md-icon-menu-book"
title="Catalog"
scrollable="true"
cls="my-tree">
<tbar>
<ext-toolbar>
<items>
<ext-button text="Expand All">
<listeners>
<click handler="App.TreePanel1.expandAll();" />
</listeners>
</ext-button>
<ext-button text="Collapse All">
<listeners>
<click handler="App.TreePanel1.collapseAll();" />
</listeners>
</ext-button>
</items>
</ext-toolbar>
</tbar>
<root>
<ext-treeNode text="Composers" expanded="true">
<children>
<ext-treeNode text="Beethoven" iconCls="x-md md-icon-person">
<children>
<ext-treeNode text="Concertos">
<children>
<ext-treeNode text="No. 1 - C" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 2 - B-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 3 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 4 - G Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 5 - E-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
<ext-treeNode text="Quartets">
<children>
<ext-treeNode text="Six String Quartets" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Three String Quartets" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Grosse Fugue for String Quartets" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
<ext-treeNode text="Sonatas">
<children>
<ext-treeNode text="Sonata in A Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="sonata in F Major" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
<ext-treeNode text="Symphonies">
<children>
<ext-treeNode text="No. 1 - C Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 2 - D Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 3 - E-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 4 - B-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 5 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 6 - F Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 7 - A Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 8 - F Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 9 - D Minor" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
</children>
</ext-treeNode>
<ext-treeNode text="Brahms" iconCls="x-md md-icon-person">
<children>
<ext-treeNode text="Concertos">
<children>
<ext-treeNode text="Violin Concerto" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Double Concerto - A Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Piano Concerto No. 1 - D Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Piano Concerto No. 2 - B-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
<ext-treeNode text="Quartets">
<children>
<ext-treeNode text="Piano Quartet No. 1 - G Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Piano Quartet No. 2 - A Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Piano Quartet No. 3 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Piano Quartet No. 3 - B-Flat Minor" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
<ext-treeNode text="Sonatas">
<children>
<ext-treeNode text="Two Sonatas for Clarinet - F Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Two Sonatas for Clarinet - E-Flat Major" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
<ext-treeNode text="Symphonies">
<children>
<ext-treeNode text="No. 1 - C Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 2 - D Minor" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 3 - F Major" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="No. 4 - E Minor" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
</children>
</ext-treeNode>
<ext-treeNode text="Mozart" iconCls="x-md md-icon-person">
<children>
<ext-treeNode text="Concertos">
<children>
<ext-treeNode text="Piano Concerto No. 12" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Piano Concerto No. 17" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Clarinet Concerto" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Violin Concerto No. 5" iconCls="x-md md-icon-music-note" leaf="true" />
<ext-treeNode text="Violin Concerto No. 4" iconCls="x-md md-icon-music-note" leaf="true" />
</children>
</ext-treeNode>
</children>
</ext-treeNode>
</children>
</ext-treeNode>
</root>
<bbar>
<ext-toolbar>
<items>
<ext-label id="lblStatus" html=" " />
</items>
</ext-toolbar>
</bbar>
<listeners>
<itemClick handler="App.lblStatus.setHtml('Node Selected: <strong>' + record.get('text') + '</strong>')" />
<afterItemExpand handler="App.lblStatus.setHtml('Node Expanded: <strong>' + node.get('text') + '</strong>')" buffer="30" />
<afterItemCollapse handler="App.lblStatus.setHtml('Node Collapsed: <strong>' + node.get('text') + '</strong>')" buffer="30" />
</listeners>
</ext-treePanel>
</body>
</html>
and like this, visually:
Hope this helps!
