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

Это не заполнение не-листовых триодов, потому что в вашем 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});

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

Answer 2

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

Перво-наперво - компонент ExtJS, сама панель дерева. На простейшем уровне вы можете настроить так:

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

С помощью этого кода вы создадите компонент «Древовидная панель» на самом базовом уровне (вам нужно будет добавить дополнительные настройки, касающиеся макета, формата и т. Д., В соответствии с кодом в исходном сообщении, чтобы он соответствовал настройки) и добавьте только минимальные параметры, необходимые для работы.

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

т.е. (опять же в 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...

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

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