What's New?

[CLOSED] Customize icons in TreePanel

  1. #1
    Apr 18, 2012, 9:24 PM

    [CLOSED] Customize icons in TreePanel

    I need to customize icons(different collapse/expand images and sizes) for different nodes in treepanel. I found the way to change image, but how to change size(24x24 and 32x32) and specify expanded/collapsed images for each node? Also I have another tree where images should not be overrided by a change in first treepanel.
    Last edited by Daniil; Apr 25, 2012 at 10:07 PM. Reason: [CLOSED]
  2. #2
    Apr 19, 2012, 12:30 PM
    Hi,

    I would try something like this.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .my-icon-expand {
            background-image: url("resources/images/32x32-expand.png") !important;
            height: 32px !important;
            width: 32px !important;
        }
        
        .my-icon-collapse {
            background-image: url("resources/images/32x32-collapse.png") !important;
            height: 32px !important;
            width: 32px !important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:TreePanel runat="server" AutoHeight="true" RootVisible="false">
        <Root>
            <ext:TreeNode Text="Root" Expanded="true">
                <Nodes>
                    <ext:TreeNode Text="Node1" IconCls="my-icon-collapse">
                        <Nodes>
                            <ext:TreeNode Text="Node11" />
                        </Nodes>
                        <Listeners>
                            <Collapse Handler="this.setIconCls('my-icon-collapse');" />
                            <Expand Handler="this.setIconCls('my-icon-expand');" />
                        </Listeners>
                    </ext:TreeNode>
                    <ext:TreeNode Text="Node2">
                        <Nodes>
                            <ext:TreeNode Text="Node21" />
                        </Nodes>
                    </ext:TreeNode>
                </Nodes>
            </ext:TreeNode>
        </Root>
    </ext:TreePanel>
</body>
</html>

Similar Threads

  1. [OPEN] [#167] TreePanel hide icons?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 13, 2013, 12:49 PM
  2. TreePanel shows only default Icons when TreePanel.AppendChild is used unless we set the IconFile
    By reverseblade in forum 1.x Help
    Replies: 5
    Last Post: Mar 23, 2011, 9:57 AM
  3. [CLOSED] How to set my own icons to a Panel and TreePanel?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 09, 2010, 9:29 AM
  4. customize a TreePanel to display basic columns
    By sachin.munot in forum 1.x Help
    Replies: 4
    Last Post: Jun 17, 2009, 12:41 AM
  5. [CLOSED] TreePanel Example not working with custom Icons
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 16, 2009, 11:21 PM

Tags for this Thread

Posting Permissions