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

ID, возвращаемый в JSON, является полным путем к Sub Directory, который я хотел бы расширить, а действие 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 вам нужно будет перезагрузить root. Продолжайте метод перезарядки. Подпапка 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, как написано, не вернут никаких детей (никакой видимой иерархии / ссылки не присутствует). Чтобы объяснить, что происходит, это может помочь мне взять вас через простой пример Treepanel.

Первые вещи сначала - компонент EXTJS, сам Treepanel. На самом простом уровне вы можете установить ООН так:

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

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

Корневой узел установлен в асинхронный (то есть, когда вы нажимаете его, он будет динамически загружать свои дети из внешнего источника), и учитывая значение идентификатора «root-node» (или что вы хотите). Этот идентификатор важен. При понимании операции Async Treepanels следует отметить, что когда узел расширяется, по умолчанию по умолчанию запрос на почту отправляется на панели «Loader / Dataurl» (в этом случае SourceOfnodeSturectureuctureuctureuctureucture.php '), содержащий идентификатор узла, который ID передается в переменной под названием «Узел». Затем Server Signer Script необходимо прочитать это (т. Е. В PHP, используя $ _Request ['Node']) и служить соответствующей JSON, обозначающей Childeren для узла нажатия.

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

Вторая часть любого Treepanel - это структура узла. В приведенном выше примере это питается скриптом Server Script - SourceOfnodeRucture.php. PHP - мой предпочтительный способ подачи узлов, поскольку он позволяет мне применить свои собственные правила обработки и назначать дополнительные атрибуты узлам более гибким способом. Как я не уверен, используете ли вы PHP или нет ('http: // localhost: 9000 / Приложение / listfiles«), Я не буду в подробности относительно этого - однако, вы должны пройти через то, как ваш скрипт идентифицирует нажатый узел, и убедитесь, что вы помните, что идентификатор узла нажатия отправляется в сценарий в« Узел »Post Privable, вам нужно Чтобы поймать это и выводить детей в зависимости от обстоятельств.

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