Results 1 to 4 of 4

Thread: Can't implement scrollbar on Treelist

  1. #1
    Sencha User bressi's Avatar
    Join Date
    Jan 2016
    Posts
    20

    Default Answered: Can't implement scrollbar on Treelist

    Hello everyone,

    I am using SA 3.5.0 and I built a web application with an always-visible left menu implemented
    using a treelist component, associated with a tree store for the data items.

    Now I am not able to render the treelist scrollable as needed when the viewport height is smaller [e.g. on tablet devices].
    I tried simply adding 'scrollable' = true and then also 'scrollable' = 'y'
    but nothing happens.

    Any hint or possible solution is appreciated.

    Regards,
    claudia

  2. You are using xtype: "treelist" this component is not available in Architect 3.5.0 by default. So I guess you have added it to SA some other way.

    Anyway the problem here is that the component treelist itself has no config scrollable.

    https://docs.sencha.com/extjs/6.0/6..../Ext.list.Tree

    You have to put the treelist into something (panel) and set the scrollbar on the panel.

    You can check this example:
    http://examples.sencha.com/extjs/6.0...ink/#tree-list

    Regards
    Petr

  3. #2
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    Hi

    First I would start with upgrading SA to 3.5.1 which brings ExtJS 6.0.2. You should get auto-update or simply get newer version from support portal.

    Is your project written in Ext 6 ? What component exactly are you using?
    https://docs.sencha.com/extjs/6.0/6....Ext.tree.Panel

    Could you share piece of your code with the panel and scrollbar here?

    Regards
    Petr

  4. #3
    Sencha User bressi's Avatar
    Join Date
    Jan 2016
    Posts
    20

    Default

    Hi

    My company has decided to not upgrade to SA 3.5.1 for the moment.

    I hope I can upgrade in the next months.

    I am currently using ExtJS 6.0.1 .


    Meanwhile my code for the treelist is as below


    Code:
    {
                xtype: 'treelist',
                bind: '{navItems}',
                microCls: 'expanded',
                scope: 'me',
                defaultListenerScope: true,
                reference: 'navigationTreeList',
                itemId: 'navigationTreeList',
                scrollable: 'y',
                userCls: 'menuFw',
                width: 250,
                referenceHolder: true,
                collapsible: true,
                manageHeight: false,
                syncRowHeight: false,
                rootVisible: false,
                singleExpand: true,
                viewConfig: {
                    id: 'navigationTreeList',
                    minHeight: 700,
                    width: '100%',
                    preserveScrollOnRefresh: true,
                    preserveScrollOnReload: true
                },
                listeners: {
                    selectionchange: {
                        fn: 'onNavigationTreeListSelectionChange',
                        buffer: 10
                    }
                }
            }

    where tree object for navItems is as below

    Code:
    navItems: {
                type: 'tree',
                root: {
                    expanded: true,
                    children: [
                        {
                            text: 'Dashboard',
                            iconCls: 'x-fa fa-desktop nav-tree-badge-new new-icon',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Clienti',
                            iconCls: 'x-fa fa-users',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Magazzino',
                            iconCls: 'x-fa fa-database',
                            viewType: 'magazzinohome',
                            children: [
                                {
                                    text: 'Scheda Articolo',
                                    iconCls: 'x-fa fa-file-text-o',
                                    viewType: 'magazzinoschedaarticolo',
                                    leaf: true
                                },
                                {
                                    text: 'Ricerca semplice',
                                    iconCls: 'x-fa fa-search',
                                    viewType: 'magazzinoricercasemplice',
                                    leaf: true
                                },
                                {
                                    text: 'Carico',
                                    iconCls: 'x-fa fa-cloud-upload',
                                    viewType: 'magazzinomaglogicogenericaext',
                                    leaf: true
                                },
                                {
                                    text: 'Scarico',
                                    iconCls: 'x-fa fa-download',
                                    viewType: 'blankpage',
                                    leaf: true
                                },
                                {
                                    text: 'Verifica magazzino',
                                    iconCls: 'x-fa fa-check',
                                    viewType: 'articolomags',
                                    leaf: true
                                }
                            ]
                        },
                        {
                            text: 'Documenti',
                            iconCls: 'x-fa fa-files-o',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Listini',
                            iconCls: 'x-fa fa-dollar',
                            leaf: true,
                            viewType: 'blankpage'
                        },
                        {
                            text: 'Ordini',
                            iconCls: 'x-fa fa-shopping-cart',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Ricerche',
                            iconCls: 'x-fa fa-search',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Statistiche',
                            iconCls: 'x-fa fa-bar-chart',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Videoscrittura',
                            iconCls: 'x-fa fa-pencil-square-o',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Agenda',
                            iconCls: 'x-fa fa-calendar',
                            viewType: 'blankpage',
                            leaf: true
                        },
                        {
                            text: 'Amministrazione',
                            iconCls: 'x-fa fa-bank',
                            leaf: false,
                            children: [
                                {
                                    text: 'Contabilit',
                                    iconCls: 'x-fa fa-lock',
                                    viewType: 'blankpage',
                                    leaf: true
                                },
                                {
                                    text: 'Lista operatori',
                                    iconCls: 'x-fa fa-check',
                                    viewType: 'blankpage',
                                    leaf: true
                                }
                            ]
                        },
                        {
                            text: 'Sms',
                            iconCls: 'x-fa fa-phone',
                            leaf: true,
                            viewType: 'blankpage'
                        }
                    ]
                },
                fields: [
                    {
                        name: 'text'
                    }
                ]
            }
    Regards
    claudia
    Regards,
    Claudia

  5. #4
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    You are using xtype: "treelist" this component is not available in Architect 3.5.0 by default. So I guess you have added it to SA some other way.

    Anyway the problem here is that the component treelist itself has no config scrollable.

    https://docs.sencha.com/extjs/6.0/6..../Ext.list.Tree

    You have to put the treelist into something (panel) and set the scrollbar on the panel.

    You can check this example:
    http://examples.sencha.com/extjs/6.0...ink/#tree-list

    Regards
    Petr

Similar Threads

  1. Treelist with a Quick Search
    By kpace in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 25 Feb 2016, 1:47 AM
  2. 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
  •