ExtJs: Tree: comment faire défiler directement vers un élément spécifique?

Question

Je cherche un moyen de faire défiler vers un élément spécifique dans un arbre. Une idée de comment faire cela?

Answer 1

Je devais appeler n.select(); mais je devais le faire au bon endroit :)

J'ai fait un TreeLoader et reliaient à mon arbre. Dans son cas load (qui signifie « quand tout est téléchargé », je l'ai appelé afterload ...), je lis tous les nœuds et en fonction de leur id j'agir en conséquence:

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(); 
       } 
      }); 
     } 
    } 
}); 

Answer 2

Il n'est pas directement lié à extJs, mais vous pouvez obtenir l'élément DOM souhaité dans votre arborescence et utiliser scrollTo pour y accéder.

Answer 3

Essayez dans votre gestionnaire d'événements, cliquez noeud:

node.getUI().getIconEl().scrollIntoView(node.getOwnerTree(), false); 

Answer 4

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); 

Answer 5

Le Le DOM scrollIntoView ne fonctionne pas vraiment comme prévu, car le haut ou le bas aligne toujours l'élément. ExtJS semble cependant avoir juste ce qu'il faut:

Ext.get(el|elId).scrollIntoView(containerId|containerEl); 

Par exemple, pour assurer l'élément sélectionné dans un Ext.view.View (dataview) instance est visible, je l'ai fait:

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); 
      } 
     } 
    }, 
    ... 
}