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所必须的库....

点这里下载源文件

Extjs中加载异步树的最简单例子实现相关推荐

Activity中加载器的总结
继续总结加载器加载器可以支持在Activity或片段中异步加载数据,加载器具有以下特征: 可用于每个Activity和Fragment: 支持异步加载数据: 监控其数据源并在内容变化时传递新结果: ...
《R数据可视化手册》一1.4　从Excel文件中加载数据
本节书摘来自异步社区<R数据可视化手册>一书中的第1章,第1.4节,作者 [美]Winston Chang,更多章节内容可以访问云栖社区"异步社区"公众号查看 1.4 ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
ios加载本地html懒加载图片方案,IOS开发中加载大量网络图片优化方法
IOS开发中加载大量网络图片如何优化 1.概述在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着 ...
伟景行citymaker-----01.javascript打开本地模型CEP，加载目录树，加载要素类
以下所有代码基于 CityMaker_IE_Plugin_vConnect8.0.171127.exe 版本该版本只能使用IE打开,建议使用IE11 下载代码案例 1.打开cep模型代码 1.1 ...
基于 GoogleMap 离线 API 源码在内网中加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线加载. 另外,也为大 ...
BT12：从xml创建加载行为树的过程分析
大家好,欢迎大家关注我的知乎专栏慢慢悠悠小马车本文主要分析BehaviorTree.CPP/src/xml_parsing.cpp的内容,因为函数代码都很长,就省略了代码,大家可以与源文件对照理解. ...
Windows编程内存中加载图片并显示 Direct离屏表面的实现
版本:VS2015 语言:C++ 前段时间去白空轨了,感觉快燃尽了.没有看Windows的书,所以博客也没更,不过请组织放心,从现在开始,即使是节假日,我也会仔细钻研DirectX的. 今天是第七章的 ...
在C++中加载TorchScript模型
在C++中加载TorchScript模型本教程已更新为可与PyTorch 1.2一起使用顾名思义,PyTorch的主要接口是Python编程语言.尽管Python是合适于许多需要动态性和易于迭代的 ...

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

Extjs中加载异步树的最简单例子实现相关推荐

最新文章

热门文章