Extjs中加载异步树的最简单例子实现

<!--
	Author:Lovingshu&&Mr Samael
	Date:2012/06/25
	Remark:Teach You How To Build A AsyncTree With Extjs
-->
写在前面:
	这篇文章只是关于如何使用Extjs加载异步树,由于现在在公司,不能写的很全面,这篇文章只贴代码,没有说明,晚上回去再写一个我最近
	自学Extjs的心得!

前台JS代码:
<script type="text/javascript">
Ext.onReady(
	/**
	 * 异步树
	 */
	function asyncTree(){
		var root=new Ext.tree.TreeNode({
			expanded:true,
			id:"allGames",
			text:"GAMES"
		});
		
		var allGame=new Ext.tree.AsyncTreeNode({
			id:"game",
			text:"All Games"
		});
		
		var rpgGameRoot=new Ext.tree.AsyncTreeNode({
			id:"game_rpg",
			text:"RPG Games"
		});
		
		var actGameRoot=new Ext.tree.AsyncTreeNode({
			id:"game_act",
			text:"Act Games"
		});
		
		var fpsGameRoot=new Ext.tree.AsyncTreeNode({
			id:"game_fps",
			text:"FPS Games"
		});
		
		root.appendChild(rpgGameRoot);
		root.appendChild(actGameRoot);
		root.appendChild(fpsGameRoot);
		root.appendChild(allGame);
		
		var treePanel=new Ext.tree.TreePanel({
			renderTo:Ext.getBody(),
			id:"myTreePanel",
			root:root,
			autoScroll:true,
			containerScorll:true,
			animate:true,
			autoHeight:true,
			width:300,
			listeners:{
				"beforeload":function(node){
					node.loader=new Ext.tree.TreeLoader({
						url:"myServlet",
						baseParams:{id:node.id}
					});
				}
			}
		});
	}
);
</script>

后台servlet(并不一定要是servlet,反正能够交互即可,这里为了简单就直接servlet了,也不和数据库交互了~):

/**
 * @author Lovingshu's
 */
public class ServletData extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String id=req.getParameter("id");
		resp.setCharacterEncoding("UTF-8");
		PrintWriter pw=resp.getWriter();
		StringBuffer json=new StringBuffer("[");
		for(String[] str : this.data()){
			if(str[0].indexOf(id)!=-1&&!str[0].equals(id)){
				json.append("{id:'"+str[0]+"',text:'"+str[1]+"'},");
			}
		}
		String myJson=json.toString();
		if(myJson.endsWith(",")){
			myJson=myJson.substring(0,myJson.lastIndexOf(","));
		}
		myJson+="]";
		System.out.println(myJson);
		pw.write(myJson);
		pw.flush();
		pw.close();
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}
	
	public static List<String[]> data(){
		List<String[]> list=new ArrayList<String[]>();
		list.add(new String[]{"game_rpg_1001","龙腾世纪1"});
		list.add(new String[]{"game_rpg_1002","龙腾世纪2"});
		list.add(new String[]{"game_rpg_1003","辐射3"});
		list.add(new String[]{"game_rpg_1004","辐射:新维加斯"});
		list.add(new String[]{"game_rpg_1005","上古卷轴"});
		list.add(new String[]{"game_rpg_1006","无主之地"});
		list.add(new String[]{"game_act_1001","波斯王子1"});
		list.add(new String[]{"game_act_1002","波斯王子2"});
		list.add(new String[]{"game_act_1003","波斯王子3"});
		list.add(new String[]{"game_act_1004","暗黑血统"});
		list.add(new String[]{"game_act_1005","塞尔达传说"});
		list.add(new String[]{"game_act_1006","鬼泣系列"});
		list.add(new String[]{"game_fps_1001","半条命2"});
		list.add(new String[]{"game_fps_1002","子弹风暴"});
		list.add(new String[]{"game_fps_1003","孤岛危机"});
		list.add(new String[]{"game_fps_1004","孤岛惊魂"});
		return list;
	}
}

然后:肯定有人记不得servlet的用法了~记住咯,还要在web.xml中配置servlet
<servlet>
	<servlet-name>myServlet</servlet-name>
	<servlet-class>com.samael.servelt.ServletData</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>myServlet</servlet-name>
	<url-pattern>/myServlet</url-pattern>
</servlet-mapping>

最后就OK拉~哈哈~附上完整工程源码以及Extjs所必须的库....

点这里下载源文件