What's New?

[CLOSED] TreeNode Icon

  1. #1
    Jan 15, 2009, 3:28 PM

    [CLOSED] TreeNode Icon

    I have a BinderPanel on my default page and I'm adding another folder to the tree via the IFrame in the center auf the default page.

    To add the folder without reloading the tree, I use:
          
string parentId = parentBinder.ParentObject.Id + "!" + parentBinder.Id;
string nodeId = parentBinder.Id + "!" + binder.Id;
string nodeName = binder.Name;
ScriptManager2.AddScript("AddBinder('" + parentId + "', '" + nodeId + "', '" + nodeName + "');");
    The javascript code is:
            function AddBinder(parentNodeId, nodeId, nodeName) {

            var parentNode = parent.window.BinderTree.getNodeById(parentNodeId);

            var node = new Ext.tree.AsyncTreeNode({

                id: nodeId,

                text: nodeName,

                leaf: false,

                iconCls: 'folder-create'

            });



            if (parentNode != null) {

                parentNode.expand();

                parentNode.appendChild(node);

            }

        }
    And the css is:
     .folder-create .x-tree-node-icon
 {
    background: transparent url(/icons/folder-png/coolite.axd) no-repeat;
 }
    I have no idea why but the created treenode always has the default icon for folders. What am I doing wrong?

    Thanks,
    Sharon
  2. #2
    Jan 15, 2009, 3:41 PM

    RE: [CLOSED] TreeNode Icon

    Hi,

    Try to remove .x-tree-node-icon from css selector


    *.folder-create
    *{
    *** background: transparent url(/icons/folder-png/coolite.axd) no-repeat;
    *}*




  3. #3
    Jan 15, 2009, 4:27 PM

    RE: [CLOSED] TreeNode Icon

    I tried that first. No success either.
  4. #4
    Jan 15, 2009, 4:46 PM

    RE: [CLOSED] TreeNode Icon

    Hi,

    try to add !important


    .folder-create{
    background-image:url(/icons/folder-png/coolite.axd) !important;
    }*


  5. #5
    Jan 16, 2009, 4:23 AM

    RE: [CLOSED] TreeNode Icon

    No change.
  6. #6
    Jan 16, 2009, 4:48 AM

    RE: [CLOSED] TreeNode Icon

    OK, I have the solution. I had to change 
                var node = new Ext.tree.AsyncTreeNode({
                id: nodeId,
                text: nodeName,
                leaf: false,
                iconCls: 'folder-create'
            });
    to

                var node = new Ext.tree.AsyncTreeNode({
                id: nodeId,
                text: nodeName,
                leaf: false,
                cls: 'folder-create'
            });
  7. #7
    Jan 16, 2009, 5:42 AM

    RE: [CLOSED] TreeNode Icon

    Hi,

    Here is my test case which works fine
    <%@ Page Language="C#" EnableViewState="false" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
    <title>Example</title>
    
    <style type="text/css">
        .folder-create{
             background-image:url(/icons/folder-png/coolite.axd) !important;
        } 
    </style>
    
    <script type="text/javascript">
        function createNode(parent) {
            var node = new Ext.tree.TreeNode({
                text: 'Subnode',
                iconCls: 'folder-create'
            });
            
            parent.appendChild(node);
            parent.expand();
        }
    </script>
</head>
<body style="padding:10px;">
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
        
        <ext:TreePanel ID="TreePanel1" runat="server" Width="200" Height="400" Title="Tree">
            <Root>
                <ext:TreeNode Text="Root" Expanded="true">
                    <Nodes>
                        <ext:TreeNode NodeID="1" Text="1">                            
                        </ext:TreeNode>
                        <ext:TreeNode NodeID="2" Text="2">                            
                        </ext:TreeNode>
                        <ext:TreeNode NodeID="3" Text="3">                            
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
            <Buttons>
                <ext:Button runat="server" Text="Add node to the selected">
                    <Listeners>
                        <Click Handler="createNode(#{TreePanel1}.getSelectionModel().getSelectedNode());" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:TreePanel>        
    </form>
</body>
</html>
  8. #8
    Jan 29, 2009, 7:28 AM

    RE: [CLOSED] TreeNode Icon

    To use iconCls and get this to work (for parent nodes as requested) I use the following where [iconCls] is your class name:

    .x-tree-node-expanded .[iconCls] , .x-tree-node-collapsed .[iconCls] { background-image: url(image.png); }

    Obviously you can then have different images for the collapsed and expanded states.

Similar Threads

  1. about Treenode.Appendchild's icon
    By helpme in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2010, 7:57 AM
  2. [0.8] Adding treenode in Javascript - Select icon for the treenode
    By Patrick in forum 1.x Help
    Replies: 0
    Last Post: Dec 10, 2009, 11:14 AM
  3. [CLOSED] TreeNode Icon
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 25, 2009, 12:22 PM
  4. [CLOSED] Change icon on treenode from javascript
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 24, 2009, 3:40 PM
  5. Treenode Icon
    By DasPhansom in forum 1.x Help
    Replies: 1
    Last Post: Jan 28, 2009, 11:57 AM

Posting Permissions