Ext 팝업 트리

<script type="text/javascript">
  var win ;
  var selid;
  var selcode;
  var selname;
  
  Ext.onReady(function(){
  
	var dataRoot = new Ext.tree.AsyncTreeNode({
		id: '-1',
		text: ' ',
		expanded: true
    });
    
    var dataTreeLoader = new Ext.tree.TreeLoader({dataUrl: '${ctx}/hp/baseinfo/listAllArea.action'});
    dataTreeLoader.on("beforeload", function(treeLoader, node) {
 		//loader  
		treeLoader.baseParams.nodeid= node.id;   
		Ext.get(document.body).mask();
    }, this);
    dataTreeLoader.on("load", function(treeLoader, node) {
		Ext.get(document.body).unmask();        
    }, this);
    
    var tree=new Ext.tree.TreePanel({
		el:'treediv',
	    animate : true, 
	    height : 260, 
	    width : 240, 
	    autoScroll : true, 
	    containerScroll : true, 
	    lines : true, 
	    root: dataRoot,
	    loader: dataTreeLoader,
	    rootVisible: false,
	    listeners : { 
		     'click' : function(node, event) { 
		   		 //  
				selid = node.id;
				selcode = node.attributes.code;
				selname = node.attributes.name;
			},
			'dblclick':function(node,event){
				// 
	        } 
 	   } 
	});
    tree.render();
    tree.expandAll();// 

	var button = Ext.get('btnChooseArea');// 
	if(button!=null){// null， ， win
	    button.on('click', function(){
	        if(!win){
	            win = new Ext.Window({ 
				    plain : true, 
				    layout : 'form', 
				    resizable : true, //   
				    draggable : true, //   
				    closeAction : 'hide',//   close or hide 
				    modal : true, //   
				    width : 260, 
				    height : 350, 
				    title : ' ', 
				    items : [tree], // tree
				    buttonAlign : 'right', 
				    loadMask : true, 
				    buttons : [{ 
				       xtype : 'button', 
				       align : 'right', 
				       text : ' ', 
				       handler : function() { 
				       		// 
							document.getElementById("districtid").value=selid;
							document.getElementById("discode").value=selcode;
							document.getElementById("districtname").value=selname;
	        				win.hide(); 
						} 
					}, { 
				       xtype : 'button', 
				       text : ' ', 
				       handler : function() { 
							win.hide(); 
				       } 
					}] 
				});
	        }
	        win.setPosition(this.getXY());
	        win.show(this);
		});
	}
  });
</script>
<s:hidden id="districtid" name="model.area.id"></s:hidden>
<s:hidden id="discode" name="model.discode"></s:hidden>
<s:textfield id="districtname" name="model.districtname" cssStyle="width:400px" readonly="true"></s:textfield> 
<input type="button" id="btnChooseArea" value=" "/>
<div id="treediv"></div>

	private List<Map<String, Object>> allNodes = new ArrayList<Map<String, Object>>();
	
	public List<Map<String, Object>> getAllNodes() {
		return allNodes;
	}

	public void setAllNodes(List<Map<String, Object>> allNodes) {
		this.allNodes = allNodes;
	}
	// 
	public String doTreeAllNodes() throws Exception {
		if (nodeid.equalsIgnoreCase("-1")) {
			nodeid=null;
		} 
		// 
		List<Area> childrenList = ServiceFactory.getBean(AreaDAO.class)
				.queryByPropertyLogic("parent.id", nodeid,
						"seq");
		for (Area child : childrenList) {
			Map<String, Object> m = new HashMap<String, Object>();
			m.put("id", child.getId());
			m.put("text", child.getName());
			//code name extnode ， node.attributes 
			m.put("code", child.getCode());
			m.put("name", child.getName());
			// 
			if (child.getChildren().size() == 0)
				m.put("leaf", true);
			else
				m.put("leaf", false);
			// 
			if (this.isExpanded)
				m.put("expanded", true);
			allNodes.add(m);
		}
		return SUCCESS;
	}
}

<action name="listAllArea"  method="doTreeAllNodes"
            class="com.jdgm.hp.web.action.baseinfo.family.AreaTreeAction">
      <result type="json">
            <param name="root">allNodes</param>
      </result>
</action>