TreeLoader: Non sparare ajax richiesta di nodi figli?

Question

Ok, quindi, ho questo sito che sto mettendo insieme nel quadro di gioco. Si collega in sostanza a un sito FTP sul back-end, recupera un elenco di cartelle / file e invia che a un ExtJS base front-end come JSON.

L'ho lavoro in modo che il pannello di albero viene popolato correttamente, ma non sembra di fare nulla di speciale quando mi espando un nodo non foglia.

In base a quello che ho letto, si dovrebbe utilizzare l'URL dei dati, e di passare un parametro nodo con l'id del nodo a quella URL i dati per ottenere i dati per i nodi figlio, ma in Firebug non vedo eventuali richieste vengono inviati per i dati.

Che cosa devo fare per permettere le chiamate AJAX per il fuoco in modo che i nodi che hanno i bambini avranno modo dinamico quando il nodo è espanso? ??

Ecco il relativo codice di riferimento:

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 restituito nella JSON è il percorso completo della directory sotto vorrei ampliare, e l'azione listfiles prenderà quel parametro e restituire i file appropriati.

Come richiesto, ecco un frammento di uscita 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: [ ]
      }
]

Questo ultimo elemento è un esempio della cartella che sto cercando di caricare dinamicamente i bambini a.

Answer 1

Non è che popolano il TreeNodes non foglia, perché nella vostra JSON, non ci sono bambini.

Che cosa si può fare è ricaricare il nodo principale, il passaggio di parametri aggiuntivi (ID 's) per le sottocartelle che si vorrebbe ottenere risultati per.

sul click o espandere eventi per l'AsyncTreeNode, è necessario ricaricare la radice. Alimentare il metodo di ricarica della sottocartella ID (clickedVal) vuoi per ricaricare l'albero con.

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

Addtional. Note: Avrete probabilmente bisogno di costruire in alcuni controlli di navigazione per tornare indietro l'albero usando questo metodo

Answer 2

Come accennato dal poster precedente, il JSON restituito, come scritto, non avrebbe prodotto i bambini (nessuna gerarchia apparente / riferimento è presente). Per spiegare che cosa sta accadendo, può essere utile per me per prendere l'utente attraverso un semplice esempio treepanel.

Per prima cosa Nome componente i ExtJS, il treepanel stesso. Al suo livello più semplice, è possibile impostare un così:

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

che vi porterà attraverso questo codice, cosa che fa è creare il componente treepanel al livello più elementare (sarà necessario aggiungere ulteriori impostazioni riguardanti il ??layout, il formato, ecc ecc- come per il codice nel tuo post originale in modo che si adatta con la configurazione), e aggiungere solo le impostazioni minime necessarie per il lavoro.

Il nodo principale è impostato su asincrono (vale a dire quando si fa clic, caricherà i suoi figli in modo dinamico da una sorgente esterna), e dato il 'root-nodo' valore ID (o quello che vuoi). Questo ID è importante. Quando la comprensione del funzionamento del treepanels asincrone, si dovrebbe notare che quando un nodo viene espanso, per impostazione predefinita una richiesta POST viene inviata ai pannelli caricatore / DataURL (in questo caso 'sourceofnodestructure.php') contenente l'ID del nodo cliccato, questo id viene passato in una variabile denominata 'nodo'. Lo script lato server quindi ha bisogno di leggere questo (cioè in PHP utilizzando $ _REQUEST [ 'nodo']) e servire il rispettivo JSON che denota i nostri figli per il nodo è fatto clic.

vale a dire. (Ancora una volta, in 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 seconda parte di qualsiasi treepanel è la struttura del nodo. Nell'esempio sopra, questo è alimentato da sourceofnodestructure.php un lato server Script. PHP è il mio modo preferito di servire fino nodi in quanto mi permette di applicare le mie regole di elaborazione e gli attributi aggiuntivi assegnare ai nodi in modo più flessibile. Come io non sono sicuro se si sta utilizzando PHP o no ( ' http: // localhost: 9000 / applicazione / ListFiles '), mi voleva entrare nei dettagli che lo riguardano - tuttavia, si dovrebbe passare attraverso come i vostri identifica di script il nodo cliccato e garantire ti ricordi che l'id del nodo fatto clic viene inviato allo script nella variabile POST 'nodo' , è necessario intercettare questo e bambini di uscita a seconda dei casi.

Fammi sapere se si desidera un esempio di PHP si può usare per gestire questa situazione.