首先來建立一個store資料來源

var store = Ext.create('Ext.data.TreeStore', {
		    root: {
		        expanded: false,//預設不展開
		        children: [   //這裡是樹的節點 有層級的
		            { text: "一級節點", leaf: true,id:'firstNode',checked:false },
		            { text: "一級節點1", expanded: true,checked:false, children: [
		                { text: "二級節點", leaf: true,checked:false },
		                { text: "二級節點1", leaf: true,checked:false}
		            ] },
		            { text: "無限載入子節點", leaf: false,checked:false } //leaf:false表示有下級節點
		        ]
		    }
		});
 

 接下來建立tree物件 

return Ext.create('Ext.tree.Panel', {    //此處我是在方法中return 的 如需直接渲染的朋友 應使用renderTo
		    title: 'Simple Tree',
		    id:'tree',
		    width: 500,
		    height: 350,
		    store: store,
		    autoEncode: true, //提交時是否自動編碼 
		    //selModel: new Ext.tree.MultiSelectionModel(), // 支援多選的選擇模型 
		    rootVisible: false,
		    listeners:{
		    	beforeitemexpand:function(node,optd){  //展開節點之前觸發
		    		var tt=node.data.text;
		    		store.setProxy({   //非同步從伺服器上載入資料  extjs會自動幫我們解析
                           type:'ajax',
                           url:'SyncTreeServlet' ,
                           extraParams:{time:tt}   //額外引數
                     });
		    	}
		    },
			bbar: [{      //剩下的 按鈕功能都是無關緊要的了
				text: "向上按鈕",    
				tooltip: "向上選擇一個節點",    
				tooltipType: "qtip",    
				handler: function(){     
					var model = Ext.getCmp("tree").getSelectionModel();//獲取選擇模型     
					model.selectPrevious();    
				}   
			},{
				text: "向下按鈕",    
				tooltip: "向下選擇一個節點",    
				tooltipType: "qtip",    
				handler: function(){     
					var model = Ext.getCmp("tree").getSelectionModel();//獲取選擇模型     
					model.selectNext();    
				} 
			},{
				text: "獲取值",    
				tooltip: "獲取被選節點的值",    
				tooltipType: "qtip",    
				handler: function(){     
					var model = Ext.getCmp("tree").getSelectionModel();//獲取選擇模型     
					var selectedNode = model.getSelection();//獲取選擇的節點    
					console.info(selectedNode);
					if(selectedNode&&selectedNode.length>0){      
						Ext.MessageBox.alert("hint", selectedNode[0].data.text); 
					}     
				} 
			}],
			tbar:[{
				text: "新增節點",    
				tooltip: "新增樹節點",    
				tooltipType: "qtip",    
				handler: function(){  
					Ext.MessageBox.prompt("輸入", "請輸入新節點的名稱：", function(btn, txt){   
						if(btn == "ok"){    
							var tree = Ext.getCmp("tree");
							var newNode = new Ext.tree.Panel({text: txt,leaf: true});    
							var selNode = tree.getSelectionModel().getSelection();    
							if(selNode&&selNode.length>0){     
								//Ext.Msg.alert("錯誤", "在新增新節點之前請先選擇參照節點！"); 
								selNode[0].appendChild(newNode);
								tree.getSelectionModel().clearSelections(); //清除所有選擇節點 如不清楚 即使刪除所有節點 獲取選中節點時依舊會有一行選中資料
							}else{  
								tree.getRootNode().appendChild(newNode);
								tree.getSelectionModel().clearSelections(); //清除所有選擇節點
							}  
						}  
					});
				}
			},{
				text: "刪除節點",    
				tooltip: "刪除選擇的樹節點",    
				tooltipType: "qtip",    
				handler: function(){     
					var tree = Ext.getCmp("tree");
					var selNode = tree.getSelectionModel().getSelection();    
					if(!selNode||selNode.length<1){     
						Ext.Msg.alert("錯誤", "請選擇一個節點！"); 
					}else{  
						selNode[0].remove();
						tree.getSelectionModel().clearSelections(); //清除所有選擇節點
					}  
				}
			},{
				text: "修改節點",    
				tooltip: "修改選擇的樹節點",    
				tooltipType: "qtip",    
				handler: function(){     
					var tree = Ext.getCmp("tree");
					var selNode = tree.getSelectionModel().getSelection();    
					if(!selNode||selNode.length<1){     
						Ext.Msg.alert("錯誤", "請選擇一個節點！"); 
					}else{  
						Ext.MessageBox.prompt("輸入", "請輸入節點的新名稱：", function(btn, txt){ 
							if(btn=="ok"){
								selNode[0].set("text",txt);
								selNode.updateInfo(true);
								Ext.Msg.alert("hint","修改完成！");
								tree.getSelectionModel().clearSelections(); //清除所有選擇節點
							}
						
						});
					}  
				}
			}],
		    renderTo: Ext.getBody()
		});
 

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		Writer out = response.getWriter();
		StringBuffer sb = new StringBuffer("[");
		for (int i = 0; i < 4; i++) {
			int id = (int) (Math.random()*100000);
			//System.out.println("id:=================>"+id);
			sb.append("{id:"+id+",text:'非同步節點"+i+"',leaf: false,checked:false},");
		}
		sb.append("]");
		out.write(sb.toString());
	}
 

最後結果如圖：