最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载,而目前版本的extjs中只支持JSON格式的数据。查了一些资 料,决定使用struts2的json-plugin。首先按照例子做了一个,但是结果就是不成功,界面上只出来了一个js中生成的root节点,不能加 载从后台生成的数据。研究后发现是数据格式有问题。使用json-plugin生成的数据格式如下:
{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"Benz"}
而extjs需要的数据格式如下:
[{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"Benz"}]
区别很小,就只相差最外面的两个方括号。但是少了这两个方括号,在json中,含义迥然不同,前者表示一个对象,而后者表示一个数组。而extjs中 tree的dataloader需要的数据必须是一个数组。而这样的数据格式是json-plugin自动生成的,无法改变。所以,我最后放弃了json -plugin,转而使用json-lib来解决这个问题。
1. 下载json-lib, http://json-lib.sourceforge.net/
2. lib目录下的jar文件清单:
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-digester-1.6.jar
commons-lang-2.3.jar
commons-logging-1.1.jar
dom4j-1.6.1.jar
ezmorph-1.0.4.jar
freemarker-2.3.8.jar
javassist-3.8.1.jar
json-lib-2.2.1-jdk15.jar
log4j-1.2.13.jar
ognl-2.6.11.jar
struts2-core-2.0.11.jar
xml-apis-1.0.b2.jar
xwork-2.0.4.jar
首先配置web.xml
index.jsp struts2 org.apache.struts2.dispatcher.FilterDispatcher struts2 Ext.onReady(function(){ // shorthand var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div', autoScroll:true, animate:true, enableDD:true, containerScroll: true, loader: new Tree.TreeLoader({ dataUrl:'http://localhost:8080/lab/menus.action' }) }); // set the root node var root = new Tree.AsyncTreeNode({ text: 'Ext JS', draggable:false, id:'source' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(); });
7.解析为List数据
代码如下:
EXTJS中的json数据
var comboStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'adminGroup', //这里是struts请求到action
method:'POST' //请求方式
}),
reader: new Ext.data.JsonReader({
//总记录数
totalProperty: 'results', //总记录数
root: 'items', //记录集合
id:'roleId'
},
['roleId','roleName'] //显示的两个字段
)
});
JSON数据内容
{"items":[{"password":"ahui","adminId":1,"role":{"roleName":"系统管理员","roleId":2,"sequence":"2","admin":null,"logoutMark":"否"},"adminName":"ahui","logout":"否"},
{"password":"xiao","adminId":2,"role":{"roleName":"系统管理员","roleId":2,"sequence":"2","admin":null,"logoutMark":"否"},"adminName":"xiao","logout":"是"},"results":13}
下面是struts2里面的action代码 里面封装了ExtHelper工具类,里面有转换xml和json两种格式
public String findAll() throws Exception{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
List list = groupService.getGroup(); //调用service里面的方法,把所有的数据都查询出来
String json = ExtHelper.getJsonFromList(list);//把list转换为json格式的数据
response.setContentType("text/json;charset=UTF-8");//设置数据到前台显示的字符编码,如果不转会有乱码
response.getWriter().write(json);
System.out.println(json);
return null;
}
解析json的方法有很多,所以是怎么方便怎么来,json自己的包里也可以进行转换,但如果项目中用的是Struts2,直接用Struts2提供的方法更方便。



