Hbox scroll to end

[ron.grimes]

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.

[ron.grimes]

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

        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

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