2

さて、私はこのサイトをプレイフレームワークにまとめています。基本的にバックエンドのFTPサイトに接続し、フォルダー/ファイルのリストを取得して、それを基本的なExtJSフロントエンドにJSONとして送信します。

ツリーパネルが正しく入力されるように機能していますが、非リーフノードを展開しても特別なことは何も行われていないようです。

私が読んだものに基づいて、データURLを使用し、ノードのIDを持つノードパラメータをそのデータ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で返されるIDは、展開したいサブディレクトリへの完全なパスであり、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: [ ]
      }
]

その最後の項目は、子を動的にロードするために探しているフォルダーの例です。

4

2 に答える 2

3

JSONには子がないため、リーフ以外のツリーノードにはデータが入力されていません。

できることは、結果を取得したいサブフォルダーに追加のパラメーター (ID) を渡して、ルート ノードをリロードすることです。

AsyncTreeNode のクリックまたは展開イベントでは、ルートをリロードする必要があります。ツリーをリロードする ID サブフォルダー (clickedVal) を reload メソッドにフィードします。

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

追記事項: この方法を使用してツリーを上に移動するには、おそらくいくつかのナビゲーション コントロールを組み込む必要があります。

于 2010-08-23T15:40:47.197 に答える
1

前の投稿者が述べたように、返された JSON は、書かれているように、子を返しません (明らかな階層/参照は存在しません)。何が起こっているのかを説明するために、簡単なツリーパネルの例を紹介すると役立つかもしれません。

まず最初に、ExtJS コンポーネント、ツリーパネル自体です。最も単純なレベルでは、次のように設定できます。

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

このコードを説明すると、最も基本的なレベルで treepanel コンポーネントが作成されます (元の投稿のコードに従って、レイアウト、フォーマットなどに関する設定を追加する必要があります)。 、動作に必要な最小限の設定のみを追加します。

ルート ノードは非同期に設定され (つまり、クリックすると、その子が外部ソースから動的に読み込まれます)、id 値 'root-node' (または任意の値) が与えられます。このIDは重要です。非同期ツリーパネルの操作を理解する場合、ノードが展開されると、デフォルトで、クリックされたノードの ID を含む POST リクエストがパネル loader/dataurl (この場合は「sourceofnodestructure.php」) に送信されることに注意してください。 id は「node」という変数で渡されます。次に、サーバー側スクリプトはこれを読み取り (つまり、$_REQUEST['node'] を使用する php で)、クリックされたノードの子ノードを示すそれぞれの 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...

ツリーパネルの 2 番目の部分はノード構造です。上記の例では、これはサーバー側スクリプト sourceofnodestructure.php によって供給されます。PHP は、独自の処理ルールを適用し、より柔軟な方法で追加の属性をノードに割り当てることができるため、ノードを提供する方法として私が好む方法です。PHPを使用しているかどうか (' http://localhost:9000/application/listFiles ') がわからないので、詳しくは説明しませんが、スクリプトがクリックされたノードをどのように識別し、クリックしたノードの ID が POST 変数 'node' のスクリプトに送信されることを覚えておいてください。これをトラップして、必要に応じて子を出力する必要があります。

これを処理するために使用できる PHP の例が必要な場合はお知らせください。

于 2010-08-25T08:28:08.437 に答える