TreeLoader: Ne pas déclencher une requête ajax pour les nœuds enfants?

Question

Ok donc, j'ai ce site que je suis en train de mettre dans le cadre de jeu. Il se connecte essentiellement à un site FTP sur le backend, récupère une liste de dossiers/fichiers et l'envoie à un front end ExtJS de base comme JSON.

Je l'ai fait fonctionner de sorte que le panneau d'arborescence soit rempli correctement, mais il ne semble pas faire quelque chose de spécial quand je développe un nœud non-feuille. Basé sur ce que j'ai lu, il devrait utiliser l'URL de données, et passer un paramètre de nœud avec l'ID du nœud à cette URL de données pour obtenir les données pour les nœuds enfants, mais dans firebug je ne sais pas voir les demandes envoyées pour ces données.

Que dois-je faire pour permettre aux appels ajax de se déclencher afin que les nœuds qui ont des enfants les obtiennent dynamiquement lorsque le nœud est développé?

Voici le code correspondant pour référence:

Ext.onReady(function() { 



    new Ext.Viewport({ 
     layout: 'border', 
     defaults: { 
     height: 100, 
     width: 250, 
     collapseMode: 'mini' 
     }, 
     items : [ 
      { 
       region: 'center', 
       margins: '5 5 0 0', 
       contentEl: 'center-content' 
      }, 
      { 
       id: 'file-tree', 
       region: 'west', 
       title: 'Files', 
       split: true, 
       collapsible: true, 
       xtype: 'treepanel', 
       autoScroll: true, 
       loader: new Ext.tree.TreeLoader({ 
        dataUrl: 'http://localhost:9000/application/listFiles', 


       }), 

       root: new Ext.tree.AsyncTreeNode({ 
        expand: true, 
        text: "/", 
        id: "/" 
       }), 
       rootVisibile: true, 
       listeners: { 
        click: function(n) { 
         Ext.Msg.alert('File Tree Click', 'You clicked: ' + n.attributes.id); 
        } 
       } 
      } 
     ] 
    }); 
}); 

L'ID retourné dans le JSON est le chemin complet vers sous-répertoire je voudrais développer, et l'action listfiles prendra ce paramètre et retourner le approprié des dossiers.

Comme demandé, voici un extrait de la sortie JSON:

[ 
     { 
      id: "/./", 
      text: "./", 
      leaf: false, 
      children: [ ] 
     }, 
     { 
      id: "/../", 
      text: "../", 
      leaf: false, 
      children: [ ] 
     }, 
     { 
      id: "/.ftpquota", 
      text: ".ftpquota", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/.htaccess", 
      text: ".htaccess", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/022610.html", 
      text: "022610.html", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/Gail/", 
      text: "Gail/", 
      leaf: false, 
      children: [ ] 
     } 
] 

Ce dernier élément est un exemple du dossier que je suis à la recherche charger dynamiquement les enfants à.

Answer 1

Il ne remplit pas les treenodes non-feuille car dans votre JSON, il n'y a pas d'enfants.

Ce que vous pouvez faire est de recharger le nœud racine, en passant des paramètres supplémentaires (ID) pour les sous-dossiers que vous souhaitez obtenir des résultats. Pour les événements click ou expand pour AsyncTreeNode, vous devrez recharger la racine. Alimentez la méthode reload dans le sous-dossier ID (clickedVal) avec lequel vous souhaitez recharger l'arborescence. Additionnel: Vous aurez probablement besoin de construire des contrôles de navigation pour remonter l'arbre en utilisant cette méthode.

Answer 2

Comme mentionné par l'affiche précédente, le JSON retourné, tel qu'il est écrit, ne retournerait aucun enfant (aucune hiérarchie/référence apparente n'est présente). Pour expliquer ce qui se passe, il me sera peut-être utile de vous présenter un exemple d'arbre simple. Tout d'abord, le composant ExtJS, le treepanel lui-même. Au niveau le plus simple, vous pouvez définir un ainsi:

MYtreepanel=new Ext.tree.TreePanel({ 
     dataUrl: 'sourceofnodestructure.php', 
     root: { 
      nodeType: 'async', 
      id:'root-node' 
      } 
     } 
    }); 

Prendre vous à travers ce code, ce que cela fait est de créer le composant treepanel au niveau le plus élémentaire (vous devrez ajouter des paramètres supplémentaires concernant la mise en page, le format , etc etc- selon le code de votre message d'origine afin qu'il corresponde à votre configuration), et ajoutez uniquement les paramètres minimum requis pour travailler. Le nœud racine est asynchrone (c'est-à-dire lorsque vous cliquez dessus, il chargera dynamiquement ses enfants à partir d'une source externe), et la valeur d'identifiant «nœud-racine» (ou ce que vous souhaitez). Cet identifiant est important. Lors de la compréhension du fonctionnement des arborescences asynchrones, vous devez noter que lorsqu'un nœud est développé, une requête POST est envoyée par défaut aux panneaux loader/dataurl (dans ce cas, 'sourceofnodestructure.php ') contenant l'identifiant du noeud cliqué, cet identifiant est transmis dans une variable appelée' node '. Le script côté serveur doit alors lire ceci (c'est-à-dire en php en utilisant $ _REQUEST ['node']) et servir les JSON respectifs indiquant le childeren pour le nœud cliqué.

-à-dire (encore une fois, en PHP):

switch($_REQUEST['node']){ 
case "root-node": 
// output JSON for child nodes under the root node 
break; 
case "child node 1": 
// output JSON for child nodes under the first child node under the root 
break; 
} 
etc etc... 

La deuxième partie, quelle que treepanel est la structure de noeud. Dans l'exemple ci-dessus, ceci est alimenté par un script côté serveur - sourceofnodestructure.php. PHP est ma façon préférée de servir les nœuds car elle me permet d'appliquer mes propres règles de traitement et d'assigner des attributs supplémentaires aux nœuds de manière plus flexible. Comme je ne suis pas sûr que vous utilisiez php ou non ('http://localhost:9000/application/listFiles'), je ne rentrerai pas dans les détails à ce sujet - cependant, vous devriez voir comment votre script identifie le nœud cliqué et vous assurer que vous vous rappelez que l'identifiant du nœud cliqué est envoyé au script dans la variable POST 'node', vous devez capturer ceci et sortir les enfants comme il convient. Faites-moi savoir si vous souhaitez un exemple de PHP que l'on peut utiliser pour gérer cela.