Results 1 to 10 of 10

Thread: Floating treelist scrollable?

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2015
    Posts
    23
    Answers
    3

    Default Floating treelist scrollable?

    In the micro mode of treelist, the subtree will be shown in a floating panel. How to make that floating panel scrollable?

  2. #2
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    905
    Answers
    15

    Default

    +1
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  3. #3
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by pelojoy View Post
    In the micro mode of treelist, the subtree will be shown in a floating panel. How to make that floating panel scrollable?
    Hi--

    You could either override or create a custom extension of Ext.list.TreeItem and supply it with a configuration for the floating panel. Here's one possible example (classic):

    https://fiddle.sencha.com/#fiddle/s8e

    Thanks!
    Joel

  4. #4
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    905
    Answers
    15

    Default

    Thanks for your cool idea. This extension really aproach our needs, but when mouse is over scrollbar, the floating treeitem hides. Just works with mousewhell, touchpads our direction keys, or page UP and DOWN.

    Any suggestion?

    Thanks in advance.
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2015
    Posts
    23
    Answers
    3

    Default

    I have another idea. Instead of using the floating scroll bar, can we do something like what the breadcrumb toolbar does? It will show an arrow at the top and bottom of the floating panel when it overflows and user can use that to scroll. (mouse wheel works too) See the attached screenshot taken from the Kitchen Sink.
    Attached Images Attached Images

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Pijnacker, the Netherlands
    Posts
    94

    Default

    Hi guys,

    just add the treelist to a container and make that scrollable. Then you still have to fix the issue with the scrollbar stealing focus from your floated items and makes the items hide when your mous passes the scrollbar. That can be easily solved by adding an override (that basically overrides another override) and shifts the floated items 6 px more to the right. if your scrollbar is wider, just make the value a bit higher. Hope it helps

    Code:
    Ext.define('2Gears.overrides.list.TreeItem', {
        override: 'Ext.list.TreeItem',
            // move the floated panel 6 px to the left to overlap the scrollbar and prevent focus loss
            createFloater: function () {
                var floater = this.callParent(arguments);
                floater.el.alignTo(this.getToolElement(), 'tr?', [-6, 0]);
                return floater;
        }
    });

  7. #7
    Sencha Premium Member
    Join Date
    Nov 2014
    Posts
    8
    Answers
    1

    Default Looks like what I need!

    Quote Originally Posted by robboerman View Post
    Hi guys,

    just add the treelist to a container and make that scrollable. Then you still have to fix the issue with the scrollbar stealing focus from your floated items and makes the items hide when your mous passes the scrollbar. That can be easily solved by adding an override (that basically overrides another override) and shifts the floated items 6 px more to the right. if your scrollbar is wider, just make the value a bit higher. Hope it helps

    Code:
    Ext.define('2Gears.overrides.list.TreeItem', {
        override: 'Ext.list.TreeItem',
            // move the floated panel 6 px to the left to overlap the scrollbar and prevent focus loss
            createFloater: function () {
                var floater = this.callParent(arguments);
                floater.el.alignTo(this.getToolElement(), 'tr?', [-6, 0]);
                return floater;
        }
    });
    Hi Rob,
    thank you, this looks like what I need but I can't seem to get the code in the override to execute,attached is my setup. Any ideas what I'm doing wrong?
    Attached Images Attached Images

  8. #8
    Sencha Premium User
    Join Date
    Jul 2015
    Location
    Madrid
    Posts
    6

    Default

    Hi, when the mouse is positioned in the scroll , the floating panel is hidden.


    Any suggestion?


    Thanks in advance.

  9. #9

    Join Date
    Sep 2010
    Location
    Curitiba - Brazil
    Posts
    367
    Answers
    18

    Default

    Code:
    Ext.define('Overrides.list.TreeItem', {
        override: 'Ext.list.TreeItem',
    
    
        privates: {
            createFloater: function () {
                var me = this,
                    owner = me.getOwner(),
                    ownerTree = me.up('treelist'),
                    floater,
                    toolElement = me.getToolElement(),
                    expandedWidth = ownerTree.expandedWidth,
                    defaultListWidth = ownerTree.defaultListWidth;
    
    
                if (expandedWidth === null) {
                    expandedWidth = defaultListWidth;
                }
    
    
                me.floater = floater = new Ext.container.Container({
                    cls: ownerTree.self.prototype.element.cls + ' ' + ownerTree.uiPrefix + ownerTree.getUi() + ' ' + Ext.baseCSSPrefix + 'treelist-floater',
                    floating: true,
                    // We do not get element resize events on IE8
                    // so fall back to 6.0.1 sizing to 200 wide.
                    width: Ext.isIE8 ? defaultListWidth : (expandedWidth - toolElement.getWidth()),
                    shadow: false,
                    hidden: true,
                    scrollable: 'y',
                    maxHeight: ownerTree.getEl().getHeight(),
                    renderTo: Ext.getBody(),
                    listeners: {
                        element: 'el',
                        click: function (e) {
                            return owner.onClick(e);
                        }
                    }
                });
    
    
                floater.add(me);
                floater.show();
                floater.el.alignTo(toolElement, 'tr?');
    
    
                return floater;
            }
        }
    });

  10. #10
    Sencha User
    Join Date
    Feb 2015
    Posts
    21

    Default

    Hi Fabio,

    Unable to make it functional, is it possible to provide a fiddle please ?

    Thanks,

    Lolo

Similar Threads

  1. Floating Panel, expands instead of floating ..
    By Tatonka in forum Ext: Q&A
    Replies: 6
    Last Post: 28 Aug 2013, 6:15 AM
  2. How to use scrollable Div
    By omartariq in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 23 May 2013, 5:27 AM
  3. scrollable child inside scrollable parent?
    By humper in forum Sencha Touch 2.x: Discussion
    Replies: 5
    Last Post: 28 Jun 2012, 6:43 AM
  4. Scrollable within scrollable
    By mvarshavsky in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 1 Apr 2012, 9:26 AM
  5. Howto: TreeList
    By insnet in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 2 Jun 2008, 8:26 AM

Tags for this Thread

Posting Permissions

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