Extjs Tree + JSON + Struts2 例子
 

核心提示：最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载，而目前版本的extjs中只支持JSON格式的数据。查了一些资料，决定使用struts2的json-plugin。首先按照例子做了一个，但是结果就是不成功，界面上只出来了一个js中生成的root

最近尝试用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

  1. <?xml version="1.0" encoding="UTF-8"?>  
   2. <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"  
   3.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
   4.   xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
   5.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
   6.   <welcome-file-list>  
   7.     <welcome-file>index.jsp</welcome-file>  
   8.   </welcome-file-list>  
   9.   <filter>  
  10.     <filter-name>struts2</filter-name>  
  11.     <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>  
  12.   </filter>  
  13.   
  14.   <filter-mapping>  
  15.     <filter-name>struts2</filter-name>  
  16.     <url-pattern>/*</url-pattern>  
  17.   </filter-mapping>  
  18. </web-app>  
  19.   

然后是struts.xml

 

 1. <?xml version="1.0" encoding="UTF-8"?>  
   2. <!DOCTYPE struts PUBLIC   
   3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
   4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
   5.       
   6. <struts>  
   7.     <constant name="struts.devMode" value="true"/>  
   8.     <constant name="struts.i18n.encoding" value="UTF-8"/>  
   9.     <package name="person" extends="struts-default">  
  10.         <action name="menus" method="execute" class="com.lab.MenuAction">  
  11.             <result>/menu.jsp</result>  
  12.         </action>  
  13.     </package>  
  14. </struts>  

3. 树的节点模型（省略了getter，setter)

 

 1. public class Menu {   
   2.     private int id;   
   3.     private String text;   
   4.     private boolean leaf;   
   5.     private String cls;   
   6.     private List<Menu> children;   
   7. }   

4. action

 

 1. package com.lab;   
   2.   
   3. import java.util.ArrayList;   
   4. import java.util.List;   
   5.   
   6. import net.sf.json.JSONArray;   
   7.   
   8. public class MenuAction {   
   9.     priv