Results 1 to 2 of 2

Thread: Hbox scroll to end

  1. #1
    Sencha Premium User
    Join Date
    Jul 2019
    Posts
    7

    Default Hbox scroll to end

    I am creating a new component (similar to mac finder) where each level is a new list. I am dynamically adding a new container inside an hbox. I would like to scroll to end (far right) as containers are added, but so far am unsuccessful in using component.getScrollable().scrollTo(999999). I can manually scroll, but the method scrollTo doesn't seem to do anything.

  2. #2
    Sencha Premium User
    Join Date
    Jul 2019
    Posts
    7

    Default

    I will answer my own question. This was implemented on 7.2 for Modern Material theme. None of the methods in Sencha's docs seemed to work, and so I reverted to vanilla JS manipulation of the DOM. This is related to creating a component that is like the Mac Finder.

    CONTROLLER METHOD AddColumn

    Code:
            addColumn: function ({fileList}) {
                const me = this,
                     boundOnDirectoryDoubleTapHandler = me.onDirectoryDoubleTapHandler.bind(me),
                     boundOnNewColumnAddedHandler = me.onNewColumnAddedHandler.bind(me),
                     finder = me.lookupReference('finderpanel'),
                     store = Ext.create('Ext.data.TreeStore', {
                         autoLoad : true,
                         rootVisible: false,
                         root : {
                             expanded: true,
                             children: []
                         }
                     });
                let children, column, path;
    
                // Map the directory entries to nodes for tree store.
                if (!Ext.isEmpty(fileList)) {
                    path = fileList[0].path;
    
                    children = fileList.map(file => {
                        return {
                            leaf : !file.isDir,
                            text : file.name,
                            expanded : false,
                            expandable: false,
                            path : path
                        };
                    });
                }
                store.loadData(children, false);
    
                // Define column and add to finder.
                column = {
                    cls: 'fc-finder-col',
                    docked: 'left',
                    listeners: {
                        added: boundOnNewColumnAddedHandler
                    },
                    resizable: {
                        split : true,
                        edges : 'east',
                        dynamic: true,
                        minSize: 5
                    },
                    items: [{
                        xtype : 'tree',
                        flex : 1,
                        store : store,
                        selectable: {
                            checkboxSelect: true,
                            mode: 'multi'
                        },
                        listeners: {
                            childdoubletap: boundOnDirectoryDoubleTapHandler
                        }
                    }]
                };
                finder.add(column);
    CONTROLLER METHOD onNewColumnAddedHandler

    Code:
    ​        onNewColumnAddedHandler: function(sender) {
                sender.element.dom.scrollIntoView({inline: 'end'});
            }
    


Posting Permissions

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