TreeLoader: no disparar ajax solicitud de nodos secundarios?

Question

Ok lo tanto, tengo este sitio que estoy poniendo juntos en el marco de juego. Básicamente se conecta a un sitio FTP en la parte final, recupera una lista de carpetas / archivos y envía eso a un ExtJS básicos front-end como JSON.

Tengo que trabajar para que el Panel de árbol se rellena correctamente, pero no parece estar haciendo nada especial cuando amplío un nodo no hoja.

Sobre la base de lo que he leído, se debe utilizar la url de datos, y pasar un parámetro nodo con el ID del nodo al que url de datos para obtener los datos de los nodos secundarios, pero en Firebug no veo las solicitudes que se envían para que los datos.

¿Qué necesito hacer para permitir que las llamadas AJAX para el fuego de modo que los nodos que tienen hijos recibirán de forma dinámica cuando se expande el nodo?

Este es el código correspondiente para referencia:

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

El identificador obtenido en el JSON es la ruta completa al directorio secundario me gustaría ampliar, y la acción se llevará a listfiles ese parámetro y devolver los archivos correspondientes.

Según lo solicitado, aquí es un fragmento de la salida 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: [ ]
      }
]

Esto último elemento es un ejemplo de la carpeta que estoy buscando para cargar dinámicamente los niños.

Answer 1

No se pueblan el TreeNodes que no son hojas debido a que en su JSON, no hay niños.

Lo que puede hacer es volver a cargar el nodo raíz, el paso de parámetros adicionales (ID) de las subcarpetas para que le gustaría obtener resultados para.

en el clic o ampliar los eventos del AsyncTreeNode, tendrá que recargar la raíz. Alimentar el método de recarga de la subcarpeta ID (clickedVal) desea recargar el árbol 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 Notas:. Usted va a necesitar para construir en algunos controles de navegación para desplazarse hacia atrás por el árbol usando este método

Answer 2

Como se ha mencionado por el comentario anterior, el JSON devuelto, como está escrito, no volvería hijos (sin jerarquía aparente / referencia está presente). Para explicar lo que está sucediendo, puede ser útil para que te lleve a través de un ejemplo sencillo treepanel.

Lo primero es lo de primer componente de los ExtJS, la treepanel sí. En su nivel más simple, se puede establecer la ONU así:

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

Teniendo a través de este código, lo que hace es crear el componente treepanel en el nivel más básico (usted necesita agregar opciones adicionales relativas diseño, formato, etc etc- según el código en su puesto original para que se ajuste con su configuración), y añadir sólo la configuración mínima necesaria para el trabajo.

El nodo raíz se establece en asíncrona (es decir, cuando hace clic en él, se carga dinámicamente sus hijos desde una fuente externa), y teniendo en cuenta el valor id 'nodo raíz' (o lo que deseen). Esta identificación es importante. Cuando la comprensión del funcionamiento de treepanels asincrónicos, debe tener en cuenta que cuando se expande un nodo, por defecto una solicitud POST se envía a los paneles cargadora / DataURL (en este caso 'sourceofnodestructure.php') que contiene el ID del nodo se hace clic, esta número se pasa en una variable llamada 'nodo'. El script del lado del servidor, entonces necesita leer esto (es decir, en php usando $ _REQUEST [ 'nodo']) y servir el JSON respectivo que denota el childeren para el nodo ha hecho clic.

es decir. (De nuevo, 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 segunda parte de cualquier treepanel es la estructura de nodos. En el ejemplo anterior, esto es alimentado por sourceofnodestructure.php un lado del servidor Script. PHP es mi forma preferida de servir a los nodos, ya que me permite aplicar mis propias reglas de procesamiento y atributos adicionales para asignar nodos de una manera más flexible. Como no estoy seguro de si se está utilizando php o no ( ' http: // localhost: 9000 / aplicación / listFiles '), no voy a entrar en detalles respecto a ella - sin embargo, hay que ir a través de cómo los identifica secuencias de comandos en el nodo se ha hecho clic y asegurarse de que recuerde que el id del nodo se ha hecho clic se envía a la secuencia de comandos en la variable de la POST 'nodo' , es necesario trampa de esto y los niños de salida según el caso.

Avísame si desea un ejemplo de la PHP puede utilizar para manejar esto.