Mar 16, 2018, 5:32 PM
[CLOSED] Overwrite the Tree Panel Node expanded Icon
Hi all,
I use the first Time the Treepanel. I need to use custom icons.
Loading the Nodes in Code behind with custom icons works fine.
But after the node is expanded, the 'normal' open Folder apears - that's not what I want :-)
I tried to solve the Problem with a 'Tree Panel Expand Handler' (found this in th 1.x Forum)
Here's my Markup
Peter
I use the first Time the Treepanel. I need to use custom icons.
Loading the Nodes in Code behind with custom icons works fine.
But after the node is expanded, the 'normal' open Folder apears - that's not what I want :-)
I tried to solve the Problem with a 'Tree Panel Expand Handler' (found this in th 1.x Forum)
Here's my Markup
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../../Center/js/jquery.min.js"></script>
<script type="text/javascript" src="../../Center/js/ViewPlugin.js"></script>
<script type="text/javascript" src="../../Center/js/Multisession.js"></script>
<script src="../js/Common.js"></script>
<script src="../js/SISA.Info.js"></script>
<link href="../css/SISAIcon.css" rel="stylesheet"/>
<link href="../css/SISAInfoWidget.css" rel="stylesheet"/>
<style type="text/css">
.my-icon-expand {
background-image: url("../img/user.png") !important;
height: 32px !important;
width: 32px !important;
}
.my-icon-collapse {
background-image: url("../img/user.png") !important;
height: 32px !important;
width: 32px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ManagementResourceManager" runat="server">
<Listeners>
<DocumentReady Handler="viewPlugin.loadI18nUnits('SISAInfo');"/>
</Listeners>
</ext:ResourceManager>
<asp:ScriptManager ID="ScriptManagement" runat="server"></asp:ScriptManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
<Items>
<ext:TreePanel runat="server" ID="treeMain" Collapsible="true" UseArrows="true" RootVisible="False" SingleExpand="False">
<Fields>
<ext:ModelField Name="Mandant"/>
<ext:ModelField Name="MandantCreated"/>
<ext:ModelField Name="Company"/>
<ext:ModelField Name="CompanyCreated"/>
<ext:ModelField Name="BusinessUnit"/>
<ext:ModelField Name="BusinessCreated"/>
</Fields>
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" Text="Mandant" Flex="1" DataIndex="Mandant"/>
<ext:Column runat="server" Text="Mandant since" Flex="1" DataIndex="MandantCreated"/>
<ext:Column runat="server" Text="Company" Flex="1" DataIndex="Company"/>
<ext:Column runat="server" Text="Company since" Flex="1" DataIndex="CompanyCreated"/>
<ext:Column runat="server" Text="Business Unit" Flex="1" DataIndex="BusinessUnit"/>
<ext:Column runat="server" Text="Business since" Flex="1" DataIndex="BusinessCreated"/>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" Mode="Single"/>
</SelectionModel>
<Listeners>
<%--<ItemCollapse Handler="SetIcon(this, null);"></ItemCollapse>--%>
<Collapse Handler="this.setIconCls('my-icon-collapse');"/>
<Expand Handler="this.setIconCls('my-icon-expand');"/>
</Listeners>
</ext:TreePanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>Peter
Last edited by fabricio.murta; Mar 19, 2018 at 12:56 PM.
