javascript的extjs框架中数面板treepanel的使用实例解析_extjs

《javascript的extjs框架中数面板treepanel的使用实例解析_extjs》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JavaScript的ExtJS框架中数面板TreePanel的使用实例解析在ExtJS中，不管是叶子节点还是非叶子节点，都统一用TreeNode表示树的节点。在ExtJS屮，有两种类型的树节点。一•种节点是普通的简单树节点,由Ext.tree.TreeNode定义，另外一种是需要异步加载子节点信息的树节点，该类由Ext.tree.AsyncTreeNode定义。在数据中，text显示文字，leaf节点,children子节点，expanded展开varstore=Ext・create("Ext・d3t3・TrccS

2、torc',{root:{expandedchildren{text:{text:{text:{text:eu学课语数留功英代““““y]},,{text:"托福”,leaf:true},cxpemdcd:true,childrcn:[leaf:true},leaf:true}leaf:true}}});TreePanel从servlet中读取JSON数据在ExtJS的Tree中的数据往往是从服务器端的动态程序中获取的。为了获取数据，我们可以先编写一个返回JSON的Servlet共前台的树形组建访问：服务器端serv

3、let代码：importjava.io.IOException;importjava.io.PrintWriter;importjavax.servlet,http・HttpServletRequest;importjavax.servlet,http.HttpScrvletResponse;importjavax.servlet.ServletException;importjavax.servlet,http.IlttpServlet;publicclassTreeNodeServletextendsHttpSe

4、rvlet{protectedvoidservice(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,TOException{rcsponsc.sctContcntTypc(〃tcxt/html;charsct二utf-8〃)；//这里的node是前台的AsyncTreeNode组建中设置的ID,见下面的JS程序StringtreeNode=request.getParameter(〃node〃)；・・〃〃Str

5、ingjson=;PrintWriterout二response.getWriter();if(〃0"・equals(treeNode)){json+二〃［{id:1,text:'OT'},{id:2,text:'0-2'}］〃;)else.equals(treeNode)){json+二〃［{id:11,text:'OTT',leaf:true),{id:12,text:'0-1-2',leaf:true)r；}elseifequals(treeNode)){json+=，，［{id:21,text:'0-2-1'

6、},{id:22,text:'0-2-2',leaf:true}］z，;}elseif("21"・equals(treeNode)){json+=〃［{id:211,text:'0-2-IT',leaf:true},{id:212,text:'0-2-1-2',leaf:true}］";)out.write(json);现在就叮以在前台的TreePanel组建的loader方法中访问上面创建的servlet了，代码如下：客户端显示代码Ext.onReady(function(){vartree二newExt.tree

7、.TreePanel({//这里的div-tree是在html屮创建的一个对彖的id值el:'div-tree',//使用loader方法访问TrccNodcScrvlctloader:newExt.tree.TreeLoader({dataUrl:'・・/TreeNodeServlet，})})；varroot=newExt.tree・AsyncTreeNode({id:'O',text:'O'})tree.setRootNode(root);trcc.rcndor();root,expand();})；效果图如下

8、：□Qo曰◎0-1i匡J0-1-1IL<

9、0-1-2□0)0-2曰曰0-2-1:fl0-2-1-1冒0-2-1-20-2-2在树TreePanel之间拖放结点有时候我们在程序中，需要把一棵TreePanel的元素拖放到另外一棵TreePanel屮，如果是在同-•棵树屮拖动吋设置组件的enableDD参数为true,而现在需要在不同给的书之间拖动