TreeLoader: tir Non ajax demande pour les noeuds enfant?

Question

Ok, donc, j'ai ce site que je suis en train ensemble dans le cadre de jeu. Il se connecte essentiellement à un site FTP à l'extrémité arrière, récupère une liste de dossiers / fichiers et l'envoie à un ExtJS de base avant la fin JSON.

Je l'ai travailler de telle sorte que le panneau de l'arbre se remplis correctement, mais il ne semble pas faire quelque chose de spécial quand j'élargissons un nœud non-feuille.

D'après ce que je l'ai lu, il doit utiliser l'URL de données, et passer un paramètre de noeud avec l'identifiant du noeud à l'URL de données pour obtenir les données pour les nœuds enfants, mais Firebug je ne vois pas toutes les demandes envoyées à ces données.

Que dois-je faire pour permettre aux appels ajax à feu de sorte que les noeuds qui ont des enfants vont les obtenir 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'identifiant retourné dans le JSON est le chemin complet vers le répertoire sous je voudrais développer, et l'action listfiles prendra ce paramètre et retourner les fichiers appropriés.

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 est pas peuplant les TreeNodes non-feuille parce que dans votre JSON, il n'y a pas d'enfants.

Qu'est-ce que vous pouvez faire est de recharger le nœud racine, en passant des paramètres supplémentaires pour les sous-dossiers (numéros d'identification) que vous souhaitez obtenir des résultats pour.

sur le clic ou développer des événements pour le AsyncTreeNode, vous devrez recharger la racine. Nourrissez la méthode reload le sous-dossier ID (clickedVal) vous souhaitez recharger l'arbre avec.

myTreePanel.loader = new Ext.tree.TreeLoader({
    dataUrl:  'http://localhost:9000/application/listFiles',
    requestMethod: 'POST',
    listeners: {
        beforeload: function() {
        this.baseParams.subFolderID = clickedVal;
            }
    }
});
myTreePanel.root.reload({baseParams: {subFolderID: clickedVal});

supplémentaire.ora Notes:. Vous aurez probablement besoin de construire dans certains 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é, comme il est écrit, ne recouvrerait des enfants (pas de hiérarchie apparente / référencement est présente). Pour expliquer ce qui se passe, il peut aider pour moi de vous guider à travers un exemple simple de treepanel.

Les premières choses de première ExtJS le composant, le treepanel lui-même. À son niveau le plus simple, vous pouvez définir un ainsi:

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

La prise vous à travers ce code, ce que cela fait est de créer le composant treepanel au niveau le plus élémentaire (vous devez ajouter des paramètres supplémentaires concernant la mise en page, le format, etc. etc- selon le code dans votre message original il correspond à votre configuration), et d'ajouter que les paramètres minimum requis pour le travail.

Le nœud racine est défini sur asynchrone (à savoir lorsque vous cliquez dessus, il chargera ses enfants de manière dynamique à partir d'une source externe), et compte tenu de la valeur id « root-nœud » (ou ce que vous voulez). Cet identifiant est important. Lorsque la compréhension du fonctionnement de treepanels async, il faut noter que lorsqu'un nœud est développé, par défaut, une requête POST est envoyée aux panneaux chargeur / dataURL (dans ce cas « sourceofnodestructure.php ») contenant l'identifiant du nœud cliqué, ce id est passé dans une variable appelée « nœud ». Le script côté serveur doit alors lire (à savoir en php utilisant $ _REQUEST [ « noeud »]) et servir les JSON respectifs indiquant le childeren pour le nœud cliquée.

i.e.. (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 le sourceofnodestructure.php d'un côté serveur. PHP est ma façon préférée de servir des nœuds car il me permet d'appliquer mes propres règles de traitement et affecter des attributs supplémentaires aux nœuds d'une manière plus souple. Comme je ne suis pas sûr que vous utilisez php ou non ( ' http: // localhost: 9000 / application / ListFiles '), je ne vais pas entrer dans les détails au sujet de ce - cependant, vous devez passer par la façon dont votre identifie script le nœud cliquée et assurez-vous de vous rappeler que l'identifiant du nœud cliquée est envoyé au script dans la variable POST « noeud » , vous avez besoin de piéger cela et les enfants de sortie, selon le cas.

Laissez-moi savoir si vous voulez un exemple de celui de PHP peut utiliser pour gérer cela.