ExtJs: Tree: how to scroll directly to a specific element?
I'm looking for a way to scroll to a spe开发者_如何学Ccific element in a Tree. Any idea how to do this ?
Try this in your node click event handler:
node.getUI().getIconEl().scrollIntoView(node.getOwnerTree(), false);
I just had to call n.select();
but I had to do it in the right place :)
I made a TreeLoader, and linked it to my tree. In its event load
(which means 'when all is downloaded', I would have called it afterload
...), I read all the nodes and depending on their id
I act consequently:
var LasTreeLoader = new Ext.tree.TreeLoader({
dataUrl: 'json/las.php',
listeners: {
load: function(loader,n,response) {
console.log('datas downloaded');
n.eachChild(
function(n) {
if ((n.id=='las/2007') ||
(n.id=='las/2007/08') ||
(n.id=='las/2007/08/29')) {
n.expand(false,false);
}
if (n.id=='las/2007/08/29/21_14_04') {
n.select();
}
});
}
}
});
The DOM scrollIntoView
doesn't really work as expected as it always either top or bottom aligns the element. ExtJS however seems to have just what is needed:
Ext.get(el|elId).scrollIntoView(containerId|containerEl);
For example, to ensure the currently selected item in an Ext.view.View
(dataview) instance is visible, I did:
Ext.define('MyView', {
extend: 'Ext.view.View',
...
listeners: {
'selectionchange': function(_, selections) {
if (selections.length === 1) {
var node = this.getNode(selections[0]);
Ext.fly(node).scrollIntoView(this.el);
}
}
},
...
}
It isn't directly related to extJs, but you could get the DOM element you want in your tree and use scrollTo
to get to it.
var path = tree.getSelectionModel().getSelectedNode().getPath('id');
//reload data,
tree.getLoader().load(tree.getRootNode(),function(treeNode){
//expand path and select node
tree.expandPath(path,'id',function(bSucess,oLastNode){
tree.getSelectionModel().select(oLastNode);
});
},this);
精彩评论