Javascript Girl
  1. Javascript Girl
  3. ExtJs: Arbre: comment défiler directement vers un élément spécifique?
Intereting Posts
Remplacez l'url de youtube au code d'intégration – Erreur: Autorisation refusée d'accéder à la propriété 'toString' Niveau d'activité du microphone de WebRTC MediaStream Promesse d'appel séparé de la promesse de résolution JQuery trouve la dernière entrée et ajoute Matériau angulaire md-switch et recherche d'entrée dans un contrôleur à un autre contrôleur Pourquoi JSON.parse échoue-t-il avec la chaîne vide? Événement de roulement / roulette de roulement Comment déplacer des listes Longueur maximale pour HTML <textarea> Obtenez la différence entre un temps côté serveur et le temps côté client et affichez-le Comment puis-je déclarer une fonction à partir d'un autre fichier dans Type? Utilisation de Javascript pour envoyer une pièce jointe HTTP à l'utilisateur (ouvrez le dialogue Enregistrer sous …) Comment créer une séquence d'animation retardée en chaîne dans jQuery? Défilement sur le graphique des diagrammes élevés Comment obtenir le nom de la fonction dans cette fonction?

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

Je recherche un moyen de faire défiler jusqu'à un élément spécifique dans un arbre. Une idée de comment faire?

Essayez ceci dans votre gestionnaire d'événement de clic noueux: 

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

Je devais appeler n.select(); Mais je devais le faire au bon endroit 🙂

J'ai créé TreeLoader et l'ai lié à mon arbre. Dans sa load événement (ce qui signifie «quand tout est téléchargé», j'aurais appellé après la mise sous afterload …), j'ai lu tous les noeuds et selon leur id j'agis 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(); } }); } } });

Le DOM scrollIntoView ne fonctionne pas vraiment comme prévu car il est toujours supérieur ou inférieur qui aligne l'élément. ExtJS semble avoir exactement ce qu'il faut: 

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

Par exemple, pour s'assurer que l'élément actuellement sélectionné dans une Ext.view.View (dataview) est visible, j'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); } } }, ... }

Il n'est pas directement lié aux extJs, mais vous pouvez obtenir l'élément DOM que vous voulez dans votre arbre et utiliser scrollTo pour y accéder. 

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