TreeLoader: Не запускает ajax-запрос для дочерних узлов?

Question

Итак, у меня есть этот сайт, который я собираю в рамках игры. Он в основном подключается к FTP-сайту на задней панели, извлекает список папок/файлов и отправляет их на основной интерфейс ExtJS как JSON.

У меня он работает так, что панель дерева заполняется правильно, но, похоже, она не делает ничего особенного, когда я расширяю нелистовой узел.

На основании того, что я прочитал, он должен использовать URL-адрес данных и передать параметр узла с идентификатором узла на этот URL-адрес данных, чтобы получить данные для дочерних узлов, но в firebug я не см. любые запросы, отправляемые для этих данных.

Что мне нужно сделать, чтобы позволить вызовам ajax, чтобы узлы, у которых есть дети, будут динамически получать их при расширении узла?

Вот соответствующий код для справки:

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

Идентификатор возвращается в формате JSON полный путь к югу от директории я хотел бы расширить, и действие listfiles будет принимать этот параметр и вернуть соответствующий файлы.

В соответствии с просьбой, вот фрагмент вывода 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: [ ] 
     } 
] 

Этот последний пункт является примером папки, что я ищу, чтобы динамически загружать детей в.

Answer 1

Он не заселяет нелистовые treenodes, потому что в вашем JSON нет детей.

Что вы можете сделать, это перезагрузить корневой узел, передав дополнительные параметры (ID) для подпапок, для которых вы хотели бы получить результаты.

при нажатии или разворачивании событий для AsyncTreeNode вам потребуется перезагрузить корень. Загрузите метод перезагрузки в подпапку ID (clickedVal), с которой вы хотите перезагрузить дерево.

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 Notes: Вам, вероятно, потребуется создать некоторые элементы управления навигацией для перемещения по дереву с помощью этого метода.

Answer 2

Как уже упоминалось в предыдущем посте, возвращенный JSON, как написано, НЕ возвращал бы детей (нет явной иерархии/ссылки присутствует). Чтобы объяснить, что происходит, это может помочь мне взять вас через простой пример дерева.

Прежде всего - компонент ExtJS, сама панель дерева. На самом простом уровне, вы можете установить ООН вверх, таким образом:

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

Принимая вас через этот код, что это делает, это создать компонент TreePanel на самом базовом уровне (вам нужно будет добавить дополнительные параметры, касающиеся макет, формат , и т. д. и т. д. - в соответствии с кодом в исходном сообщении, чтобы он соответствовал вашей настройке), и добавьте только минимальные настройки, необходимые для работы.

Корневой узел установлен на асинхронный (т. Е. Когда вы его щелкаете, он будет динамически загружать свои дети из внешнего источника) и задается значение id «root-node» (или что угодно). Этот идентификатор важен. При понимании работы асинхронных деревьев следует заметить, что когда узел расширяется, по умолчанию запрос POST отправляется на загрузчик/dataurl (в данном случае «источник»).php '), содержащий идентификатор щелчка узла, этот идентификатор передается в переменной, называемой «узлом». Затем скрипт на стороне сервера должен прочитать это (то есть в php, используя $ _REQUEST ['node']) и обслуживать соответствующий JSON, обозначающий childeren для щелкнутого узла.

т.е. (опять же, в РНР):

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... 

Вторая часть любого TreePanel является структура узла. В приведенном выше примере это выполняется с помощью сценария на стороне сервера - sourceofnodestructure.php. PHP - мой предпочтительный способ обслуживания узлов, поскольку он позволяет мне применять мои собственные правила обработки и назначать дополнительные атрибуты узлам более гибким способом. Поскольку я не уверен, используете ли вы php или нет ('http://localhost:9000/application/listFiles'), я не буду вдаваться в подробности относительно этого, однако вам следует ознакомиться с тем, как ваш скрипт идентифицирует щелкнутый узел и убедитесь, что вы помните, что идентификатор щелкнутого узла отправляется скрипту в переменную «узел» POST, вам нужно отловить это и вывести детей по мере необходимости.

Дайте мне знать, если вы хотите использовать пример PHP, который можно использовать для обработки этого.