PDA

View Full Version : Hbox scroll to end



ron.grimes
12 Jun 2020, 12:13 PM
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
13 Jun 2020, 11:30 AM
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'});
}