Results 1 to 9 of 9

Thread: Can't add horizontal scroll bar to tree panel

  1. #1
    Sencha User
    Join Date
    May 2016
    Posts
    171
    Answers
    15

    Default Can't add horizontal scroll bar to tree panel

    I can't add horizontal scroll bar to a tree panel in Ext JS 6

    I have tried many solutions like: autorscroll:true, etc. but none work.

    Can someone help?

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    72
    Answers
    3

    Default

    I had a similar issue awhile back where I wanted a tree panel in the west region of a border layout container. I needed it to scroll both horizontally and vertically. I ended up placing it as the single item inside of a Container with a layout of 'fit' and that seemed to solve the issue for me. Hope that helps.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    The treepanel seems to create a horizontal scrollbar when needed:
    https://fiddle.sencha.com/#view/editor&fiddle/1st9

    Are you wanting it to be there even when not required?

  4. #4
    Sencha User
    Join Date
    May 2016
    Posts
    171
    Answers
    15

    Default

    No I only want it when needed. But in my case it doesn't show horizontal scrollbar.

    Maybe because I am loading tree store data from a remote data source? (e.g. the tree store has a proxy).

    And it becomes needed only when I expand the tree

    initially it isn't expanded

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I'm not seeing a difference when loading all nodes collapsed. Are you able to recreate this issue in a test case?
    https://fiddle.sencha.com/#view/editor

  6. #6
    Sencha User
    Join Date
    May 2016
    Posts
    171
    Answers
    15

    Default

    My data is coming from remote proxy

  7. #7

    Default

    got the same issue with proxy store

  8. #8
    Sencha User
    Join Date
    Jun 2017
    Posts
    12

    Default

    Quote Originally Posted by [email protected] View Post
    got the same issue with proxy store
    I have the same issue with remote proxy store. Are you able to find a workaround?

  9. #9

    Default

    yes, I've added following changes:
    1. in my tree panel I've changed viewType to my custom

    PHP Code:
    viewType'my-custom-treeview' 
    2. defined 'my-custom-treeview' component width custom layout

    PHP Code:
    Ext.define('My.view.tree.View', {
        
    extend'Ext.tree.View',
        
    alias'widget.my-custom-treeview',


        
    componentLayout'my-custom-tableview',
    }); 
    3. defined custom layout

    PHP Code:
    Ext.define('My.view.tree.TreeLayout', {
        
    extend'Ext.view.TableLayout',


        
    alias'layout.my-custom-tableview',


        
    calculate: function (ownerContext) {
            var 
    me this,
                
    owner me.owner;


            if (
    me.done && Ext.getScrollbarSize().height && !owner.lockingPartner) {
                if (!
    ownerContext.headerContext.state.boxPlan) {
                    
    ownerContext.headerContext.state.boxPlan = {
                        
    tooNarrowtrue
                    
    };
                } else {
                    
    ownerContext.headerContext.state.boxPlan.tooNarrow true;
                }
            }


            
    me.callParent(arguments);
        }
    }); 
    which sets up ownerContext.headerContext.state.boxPlan.tooNarrow to true.
    this property is used when overflow-x attribute is calculated for the panel
    source:
    PHP Code:
            if (me.done && Ext.getScrollbarSize().height) {
                
    // No locking sides, ensure X scrolling is on if there is overflow, but not if there is no overflow
                // This eliminates "phantom" scrollbars which are only caused by other scrollbars.
                // Locking horizontal scrollbars are handled in Ext.grid.locking.Lockable#afterLayout
                
    if (!owner.lockingPartner) {
                    
    ownerContext.setProp('overflowX', !!ownerContext.headerContext.state.boxPlan.tooNarrow);
                }
            } 
    my solution changes behavior only for target tree panel.

Similar Threads

  1. Horizontal Scroll in a Tree panel in accordion layout
    By DarkOwl in forum Ext: Discussion
    Replies: 0
    Last Post: 21 Jul 2011, 3:23 AM
  2. Horizontal scroll on child panel break main panel vertical scroll
    By richard_orchard in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 6 Apr 2011, 5:40 AM

Posting Permissions

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