extjsでは、葉のノードであろうと葉のないノードであろうと、TreeNodeはツリーのノードを表すために使用されます。 extjsには、ツリーノードには2つのタイプがあります。 1つのノードは、ext.tree.treenodeで定義される通常の単純なツリーノードで、もう1つは子ノード情報を非同期にロードする必要があるツリーノードです。このクラスは、ext.tree.asynctreenodeで定義されています。
データでは、テキストがテキスト、葉のノード、子供のノードを表示し、拡張されています
var store = ext.create（ 'ext.data.treestore'、{root：{expanded：true、children：[{study broad "、leaf：true}、{text：" Homework "、expanded：true、children：[{text：" inglish "、leaf：true}、葉：true}]}}）;Treepanelは、サーブレットからJSONデータを読み取ります
Ext JSツリーのデータは、多くの場合、サーバー側の動的プログラムから取得されます。
データを取得するために、JSONを返すサーブレットの一般的な前景への木のようなアクセスを最初に書くことができます。
サーバー側サーブレットコード：
java.io.ioexception; Import java.io.printwriter; Import javax.servlet.httpservletrequest; Import javax.servlet.http.httservletResponse; Import javax.servlet.servlet.servletexception; TREENODESERVLETは、HTTPSERVLETを拡張します{保護されたボイドサービス（HTTPSERVLETREQUESTリクエスト、HTTPSERVLETRESPONSE RESPONSE）スローServleTException、iOException {response.setContentType（ "text/html; charset = utf-8"）;以下のjsプログラムを参照してくださいtreenode = request.getParameter（ "node"）; string json = ""; printwriter out = respons.getwriter（）; if（ "0" .equals（treenode））{json+= "[{id：1、text： '0-1'}、{id：2、text： '0-2'; {json+= "[{id：11、text： '0-1-1'、leaf：true}、{id：12、text： '0-1-2'、leaf：true}]";} else if（ "2" .equals（treenode））） {json+= "[{id：21、text： '0-2-1'}、{id：22、text： '0-2-2'、leaf：true}]";} else if（ "21" .equals（treenode））） {json+= "[{id：211、text： '0-2-1-1'、leaf：true}、{id：212、text： '0-2-1-2'、leaf：true}]";} out.write（json）;}}}}これで、前景のトレパネルによって形成されたローダーメソッドで上記のサーブレットにアクセスできます。コードは次のとおりです。
クライアントディスプレイコード
Ext.Onready（function（）{var tree = new Ext.tree.treepanel（{// Div-TreeはHTMLで作成されたオブジェクトのID値です。 ext.tree.asynctreenode（{id： '0'、text： '0'}）tree.setrootnode（root）; tree.render（）; root.expand（）;}）;レンダリングは次のとおりです。
トレパネル間のノードをドラッグアンドドロップします
プログラムでは、トレパネルの要素を別のトレパネルにドラッグアンドドロップする必要があります。同じツリーにドラッグしている場合、コンポーネントの有効なパラメーターをtrueに設定し、次に異なる本間で要素をドラッグする必要があります。現時点では、コンポーネントのInableDRAGおよびEnableDOPパラメーターを設定できます。詳細な例は次のとおりです。
1。JSコードを書き込む：
JSコード
Ext.Onready（function（）{var tree1 = new ext.tree.treepanel（{el： 'tree1'、// enabledRagをここで真に設定して、ここから他の場所から他の場所にドラッグできることを示すことができます。 ext.tree.treepanel（{el： 'tree2'、//ここでは、このツリーでドラッグされた要素がenabledrop：true、loader：bataurl： 'treedata2.txt'}}}） var root2 = tree.asynctreenode（{book '}）;2。HTMLコードは次のとおりです。
HTMLコード
<div id = "tree1"> </div> <div id = "tree2"> </div>
3. TreeLoaderにロードする必要がある2つのTXTファイルを書き込み、内部のデータはJSON形式です。
treeData1.txt：
[{text： 'non-leaf node'}、{text： 'leaf node'、leaf：true}] treedata2.txt：[{text： 'computer'、children：[{text： 'java'、子供：[{'java'、子供：[{text： 'java'、leaf：true " ]}、{テキスト： 'アルゴリズムの概要、リーフ：true}]}、{text：' music '、children：[{text：' basics of music theory '、leaf：true}、{text：' carcassie classical tutorial '、leaf：true}]}4.プログラム効果を以下の図に示します。