树组件：异步树范例

1、范例主要展示以下功能点：

      树节点通过请求服务器URL地址获得

      请求附加自定义参数值

      重新加载树节点的子节点

      节点附件自定义属性值

 

2、范例源码

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
	Ext.QuickTips.init(); 
	
	var tree = new Ext.tree.TreePanel({
		title: "异步加载树节点",
		renderTo: Ext.getBody(),
		width: 300,
		height: 300,
		
		useArrows: true,
		rootVisible: false,
		/*
		root: new Ext.tree.AsyncTreeNode({
			id: "root",
			text: "根节点",
			expanded: true
		}),
		*/
		root: {
			nodeType: "async",
			id: "root",
			text: "根节点",
			expanded: true
		},
		tbar: [
			{
				text: "重新加载",
				handler: function(){
					var loader = tree.getLoader();
					var node = tree.getNodeById("1_2");
					loader.load(node); //重新加载树节点的子节点
					node.expand(); //展开树节点
				}
			}
		],
		loader: new Ext.tree.TreeLoader({
			dataUrl: "../tree-loader.action",
			baseAttrs: {
				username: "cjm"
			},
			baseParams: {
				password: "cjm"
			},
			listeners: {
				"beforeload": function(loader, node){
					loader.baseParams.nodeText = node.text; //将节点属性值作为请求参数值发送
				}
			}
		}),
		listeners: {
			"click": function(node, event){
				//alert(node.attributes.username); //获取附加的属性值
			}
		}
	});
	
	//节点编辑
	new Ext.tree.TreeEditor(tree);
	
	//节点排序
	new Ext.tree.TreeSorter(tree, {
		folderSort: true,
		property: "id",
		dir: "asc"
	});
});

 

3、后台获取参数值（struts2）

//获取节点的id值
String nodeId = ServletActionContext.getRequest().getParameter("node");

//获取附加的参数值
String password = ServletActionContext.getRequest().getParameter("password");
String nodeText = ServletActionContext.getRequest().getParameter("nodeText");

 

4、子节点数据

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("node");
%>

<% if("root".equals(id)){ %>
[
	{id:"1", text:"node1", leaf:false},
	{id:"2", text:"node2", leaf:true}
]
<% } %>

<% if("1".equals(id)){ %>
[
	{id:"1_1", text:"node1_1", leaf:true},
	{id:"1_2", text:"node1_2", children: [
		{id:"1_2_1", text:"node1_2_1", leaf:true}
	]}
]
<% } %>

 

 

评论

1 楼 八岭书生 2012-01-11  

如果我用一个文本框进行模糊查询  参数要怎么传啊
new Ext.form.TextField({
width: 200,
emptyText: 'Find a Class',
region: 'north',
}),