1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default iconCls in Ext.tree.TreeNode

    iconCls in Ext.tree.TreeNode


    Hi,

    I am loading this JSON via the Ext.tree.TreeLoader:

    Code:
    [{
                                text: 'First',
                                expanded: true,
                                path: '1e:/',
                                iconCls: 'x-tree-node-leaf',
                                children: [{
                                    text: 'one',
                                    path: 'c:/',
                                    leaf: true,
                                    iconCls: 'x-tree-node-collapsed'
                                }, {
                                    text: 'two',
                                    path: 'd:/',
                                    leaf: true,
                                    iconCls: 'x-tree-node-collapsed'
                                }]
                            }, {
                                text: 'Second',
                                expanded: true,
                                path: '2e:/',
                                children: [{
                                    text: 'one',
                                    path: 'e:/',
                                    leaf: true,
                                    iconCls: 'x-tree-node-collapsed'
                                }]
    }]
    It looks like that the iconCls doesnt´t work ... what am I doing wrong?

    Here my complete example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    
        <!-- ExtJS -->
        <link rel="stylesheet" type="text/css" href="js/extjs310/resources/css/ext-all.css">
        <script type="text/javascript" src="js/extjs310/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/extjs310/ext-all.js"></script>
    
        <script type="text/javascript">
    
        Ext.onReady(function(){
            Ext.QuickTips.init();
    
            treeloader = new Ext.tree.TreeLoader({
    
                dataUrl: 'dummy6.json',
                clearOnLoad: false
            });
            
            // Create the "SampleTreePanel" pre-configured class
    
            SampleTreePanel = Ext.extend(Ext.tree.TreePanel, {
                title: 'Sample Tree Panel',
                width: 200,
                height: 400,
                loader: treeloader,
                rootVisible: false,
                border: false,
                singleExpand: true,
    
                initComponent: function(){
                    Ext.apply(this, {
    
                        root: new Ext.tree.AsyncTreeNode({})
                    })
    
                    SampleTreePanel.superclass.initComponent.apply(this, arguments);
                }
            });
            Ext.reg('tree_panel', SampleTreePanel);
    
    
            // Instantiate the tree panel, then attach an event listener..
    
            var tree = new SampleTreePanel();
    
            tree.on('click', function(node, e){
                debugger;
            }, this);
    
            treeloader.on('load', function(tl, node) {
                alert ("load: " + node.attributes.path); 
            }, this);
    
            // And create a window to display the tree panel in...
    
            var wind = new Ext.Window({
                plain: true,
                bodyStyle: 'padding:0px;',
                layout: 'fit',
                items: [tree],
                tbar: new Ext.Toolbar({
    
                    items: [
                        {
                            text: '123',
                            handler: function() {
                            }
                        }
                        ],
                })
            });
    
            wind.show();
        });
    
            
        </script>
    
    </head>
    <body>
    
    </body>
    </html>
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  2. #2
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291
    Vote Rating
    1
    defcon1 is on a distinguished road

      0  

    Default


    Ist the "iconCls" config property usually for the use in the JSON-definition
    ... mabye I am just using it wrong?
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You are using class names that are already used by TreeNodeUI (which means TreeNodeUI can remove/replace them!).

    If you want to force some kind of icon then you should use your OWN class names.

Thread Participants: 1