Ext做的弹出树

因为项目需要做一个行政区划弹出树，借此机会又学习使用了一下ext。
此为用ext.window作为弹出窗口，内放置ext.treepanel显示行政区划树，点击确定按钮返回所选节点的id，code，name。
此为项目功能完成后的精简版，个人觉得从这里开始很容易做扩展。

<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>

评论

2 楼 驿马回家 2012-07-05  

谢谢 学习了解下。

1 楼 xiaokang1582830 2012-07-04  

老实说我个人不提倡EXT,开发成本太大,风险比较高！维护困难,建议去看看google的GWT框架,用java代码实现前台界面..