Results 1 to 2 of 2

Thread: Why do my ExtJS 4.2.1 tree nodes no longer expand/collapse?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default Why do my ExtJS 4.2.1 tree nodes no longer expand/collapse?

    I changed the icons of my ExtJS 4.2.1 tree panel and now the nodes do not expand/collapse.

    It seems related to this CSS:

    Code:
    .navTree .x-tree-elbow-img {
        height: 0;
        width: 0;
    }
    But I need that CSS otherwise there is blank space to the left of my new icons. It seems that is the clickable area to expand/collapse. So how do I remove the space that would be occupied by the tree elbow image, but still be able to click the icons to expand / collapse nodes?

    Also, I would like to expand/collapse the nodes if my new icon is clicked or if the text for the node labels is clicked. How can I change the click targets?

    Also, if I comment out the above CSS, collapsing my nodes makes a white background appear while collapsing, then my desired background color takes effect. How can I not show that brief white background?

    Thanks much in advance.

    Code:
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: [{
                xtype: 'treepanel',
                padding: 0,
                margin: 0,
    
    
                width: 200,
                rootVisible: false,
                lines: false,
    
    
                bodyCls: 'navTree',
                cls: 'navTree',
                viewConfig: {
                    cls: 'navTree'
                },
    
    
                store: Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true,
                        children: [
                            {
                                text: "Custom", iconCls: 'arrowTreeIcon', expanded: true, children: [
                                    { text: "Joe's Dashboard", iconCls: 'noTreeIcon', leaf: true },
                                    { text: "My First Dashboard", iconCls: 'noTreeIcon', leaf: true}
                                ]
                            },
                            {
                                text: "Pre-defined", iconCls: 'arrowTreeIcon', expanded: true, children: [
                                    { text: "CTO View", iconCls: 'noTreeIcon', leaf: true },
                                    { text: "IT Manager View", iconCls: 'noTreeIcon', leaf: true},
                                    { text: "System Engineer View", iconCls: 'noTreeIcon', leaf: true}
                                ]
                            }
                        ]
                    }
                })
            }]
        });
    });
    
    .navTree {
        background-color: #999999;
    }
    
    
    .navTree .x-grid-row .x-grid-cell {
        background-color: #999999;
    }
    
    
    .navTree .x-grid-body {
        border-color: #999999;
    }
    
    
    .navTree .x-grid-header-ct {
        border-color: #999999;
    }
    
    
    .arrowTreeIcon {
        background-color:#999999;
        width: 20px;
        height: 20px;
        background-image: url('arrowTreeCollapsed.png') !important;
    }
    
    
    .x-grid-tree-node-expanded .arrowTreeIcon {
        background-color:#999999;
        width: 20px;
        height: 20px;
        background-image: url('arrowTreeExpanded.png') !important;
    }
    
    
    .navTree .noTreeIcon {
        background-color:#999999;
        background-image: none !important;
    }
    
    
    .navTree .x-tree-elbow-img {
        height: 0;
        width: 0;
    }
    
    
    .navTree .x-tree-node-text {
        font-size: 12px;
    }
    
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="../../../ext-4.2.1.883/resources/css/ext-all-debug.css"/>
    	<link rel="stylesheet" type="text/css" href="app.css"/>
    	<script type="text/javascript" src="../../../ext-4.2.1.883/ext-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    </html>
    arrowTreeCollapsed.png
    arrowTreeExpanded.png

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    Can anyone provide insight on this?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •