对Javaｓｃｒｉｐｔ的ExtJS框架的数字面板treepanel的使用实例分析
在ExtJS，它是否是一个叶节点或一个非叶节点，节点是用来表示树的节点。在ExtJS，有两种类型的树节点，一个节点是一个常见的简单的树节点，定义的Ext.tree.TreeNode，和其他的树节点的子节点的信息需要异步加载，这是由Ext.tree.AsyncTreeNode。在数据中，文本显示文本、叶节点、子子节点、展开展开。
代码ext.create（'ext.data TreeStore，{。
根：{
扩大：真实，
孩子们：{
{文本：学习，叶子：真}，
{文本：作业，展开：正确，儿童：{
{英文，叶：真}，
{代数，叶：真}
} }，
文本：托福，叶：真}
}
}
}）；
treepanel读取JSON数据从servlet
来自于服务器端的动态程序通常是从树的JS中获得的数据。
要获得数据，我们首先可以对返回到JSON的servlet前台写一个树形访问：
服务器端servlet代码：
进口；
进口java.io.printwriter；
进口javax.servlet.http.httpservletrequest；
进口javax.servlet.http.httpservletresponse；
进口javax.servlet.servletexception；
进口javax.servlet.http.httpservlet；
公共课treenodeservlet扩展HttpServlet {
protected void服务（HttpServletRequest的要求，HttpServletResponse抛出IOException {返回的响应），
response.setcontenttype（文本/ HTML；字符集= UTF-8）；
这是一套在ID的节点/ asynctreenode形成前，看到下面的JS程序
字符串TreeNode = request.getparameter（节点）；
字符串JSON；
PrintWriter = response.getwriter（）；
如果（0 等于（树））{
JSON + ={ {编号：1，文字：'0-1}，{编号：2，文字：'0-2} }；
}
如果（1 等于（树））{
JSON + ={ {编号：11，文字：'0-1-1，叶：真}，{编号：12，文字：'0-1-2，叶：真} }；
}
如果（2 等于（树））{
JSON + ={ {编号：21，文字：'0-2-1}，{编号：22，文字：'0-2-2，叶：真} }；
}
如果（21 等于（树））{
JSON + ={ {编号：211，文字：'0-2-1-1，叶：真}，{编号：212，文字：'0-2-1-2，叶：真} }；
}
out.write（JSON）；
}
}
现在你可以使用上面创建的装载方法，是通过在前台treepanel设置servlet。代码如下：
客户端显示代码
Ext.onReady（function（）{（）
VAR树=新ext.tree.treepanel（{
在这里，div树是一个用HTML id创建的对象。
EL：'div-tree，
使用装载方法访问treenodeservlet / /
装载机：新ext.tree.treeloader（{ dataurl：.. / treenodeservlet}）
}）；
VaR根=新ext.tree.asynctreenode（{编号：'0'，文本：0}）
Tree.setRootNode（根）；
Tree.render（）；
Root.expand（）；
}）；
结果如下：
Drag and drop nodes between tree TreePanel
有时我们需要把程序中的一个元素到另一棵树TreePanel，在TreePanel，如果启用参数将在同一棵树在组件的设置是正确的，并且需要将书的不同元素之间的现在，这个时候你可以用参数enabledrag组件和enabledrop集。下面的例子：
1。编写js代码：
JS代码
Ext.onReady（function（）{（）
VAR树=新ext.tree.treepanel（{
EL：'tree1，
/ /这里真的enabledrag可以拖动元素从这里到别的地方
EnableDrag:true,
装载机：新ext.tree.treeloader（{ dataurl：'treedata1 .txt}）
}）；
无功tree2 =新ext.tree.treepanel（{
EL：'tree2，
/ /这里真的enabledrop可以放在这棵树上拖动元素
EnableDrop：真的，
装载机：新ext.tree.treeloader（{ dataurl：'treedata2 .txt}）
}）；
VAR方程的系数=新ext.tree.asynctreenode（{文本：}节点）；
无功root2 =新ext.tree.asynctreenode（{文本：}书）；
tree1.setrootnode（方程的系数）；
tree2.setrootnode（root2）；
tree1.render（）；
tree2.render（）；
}）；
的2.html代码如下：
HTML代码
三.写两treeloader文件需要加载，在JSON格式的数据：
treedata1.txt：
{
{文本：无叶节点}，
{文本：'leaf节点，叶：true}
}
treedata2.txt：
{
{文字：电脑，孩子们：{
{文本：'java，儿童：{
{文本：'java核心技术，叶：true}，
{文本：思想在java，叶：true}
} }，
以{文字介绍：'algorithms，叶：true}
} }，
{文本：马，孩子们：{
{理论基础，叶：真}，
{文本：'carle决明子古典吉他教程，叶：true}
} }
}
4。该程序的效果如下图所示：