<!--
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所必须的库....
点这里下载源文件