前端代碼：先后順序引入extjs-base.js 和extjs-all.js

function initTree(){

var Tree = Ext.tree;
?? ?tree = new Tree.TreePanel({
?? ??? ?id : 'treeid',//自定義treeid
?? ??? ?el : 'tree_id',//div標簽id
?? ??? ?split : false,
?? ??? ?monitorResize :true,
?? ??? ?width : 280,
?? ??? ?rootVisible : false,//是否顯根節點
?? ??? ?autoScroll : true,//自動出現滾動條。
?? ??? ?animate : true,
?? ??? ?border : false,
?? ??? ?containerScroll : true,

????????listeners: { ?
?? ??? ???????? 'dblclick':function(node,e){//點擊節點事件
?? ??? ??????? ??? alert(node.id);
?? ??? ???????? }

??????? },
?? ??? ?loader : new Tree.TreeLoader(//加載數據
?? ??? ??? ??? ?{
?? ??? ??????? ??? ?baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI },
?? ??? ??????? ???? dataUrl : '/.../treeServlet'
?? ??? ??? ??? ?})
?? ?});
?? ?var root = new Tree.AsyncTreeNode({
?? ??? ?checked : false,//根節點選擇狀態
?? ??? ?text : '',
?? ??? ?iconCls : '',
?? ??? ?id : '1',
?? ??? ?href : ""
?? ?});
?? ?tree.setRootNode(root);//設置根結點
?? ?tree.render();
?? ?root.expand(false,true, callback);//默認展開下級

}

?function?callback (node){
?? ??? ?if(node.hasChildNodes()) {
?? ??? ??? ?node.eachChild(function(child){
?? ??? ??? ??? ?child.expand();
?? ??? ??? ?})
?? ??? ?}
?? ?}

java代碼：

public class treeServlet extends HttpServlet{

protected void doGet(HttpServletRequest request,
?? ??? ??? ?HttpServletResponse response) throws ServletException, IOException {

????????response.setHeader("Content-type", "text/html;charset=UTF-8");?

????????PrintWriter out= response.getWriter();

StringBuffer sb=new StringBuffer ();

//text：節點名稱，id：節點主鍵， leaf： 是否包含下級，icon：節點圖標

????? sb.append("[{text: '"+nodename+"',id:'"+id+"',leaf:true,icon:'/jpg/xxx.jpg' },{text: '"+nodename1+"',id:'"+id+"',leaf:false,icon:'/jpg/xxx1.jpg' },{text: '"+nodename2+"',id:'"+id+"',leaf:false,icon:'/jpg/xxx2.jpg' }]");

????????out.print(sb.toString());

????????out.close();

????????}

??? protected void doPost(HttpServletRequest request,
?? ??? ??? ?HttpServletResponse response) throws ServletException, IOException {
?? ??? ?doGet(request, response);
?? ?}

}

總結

以上是生活随笔為你收集整理的Extjs tree树的生成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。