Extjs4.0学习笔记四(Tree应用)

周凡杨

 
<div class="Section0">[size=10.5000pt]            [size=10.5000pt]         [size=14.0000pt]  Extjs4.0 学习笔记四
[size=10.5000pt]    继续学习Extjs4.0 菜单tree应用，这次实现的是Extjs与Struts2之间的数据交互。
[size=10.5000pt]其中交互的数据格式为json，采用的技术有json-lib，本次数据是在Struts的服务里写死的，实际项目中，菜单列表都是从数据库表里读取的。
[size=10.5000pt]Extjs:[size=10.5000pt]    用于前台页面展示
[size=10.5000pt]Struts:[size=10.5000pt]   后台服务层，主要支撑数据的交互、及服务的业务逻辑
[size=10.5000pt]Json-lib:[size=10.5000pt] [size=10.5000pt]可以将Java对象转成json格式的字符串，也可以将Java对象转换成xml格式的文档 
[size=14.0000pt]一：页面效果


 
[size=10.5000pt]子菜单展开后的样式如下所示：


 
 
[size=14.0000pt]二：代码
1: 页面代码menu.jsp
[size=10.5000pt]<%@ [size=10.5000pt]page [size=10.5000pt]language[size=10.5000pt]=[size=10.5000pt]"java" [size=10.5000pt]import[size=10.5000pt]=[size=10.5000pt]"java.util.*" [size=10.5000pt]pageEncoding[size=10.5000pt]=[size=10.5000pt]"UTF-8"[size=10.5000pt]%>
[size=10.5000pt]<![size=10.5000pt]DOCTYPE [size=10.5000pt]HTML [size=10.5000pt]PUBLIC [size=10.5000pt]"-//W3C//DTD HTML 4.01 Transitional//EN"[size=10.5000pt]>
[size=10.5000pt]<[size=10.5000pt]html[size=10.5000pt]>
[size=10.5000pt]  [size=10.5000pt]<[size=10.5000pt]head[size=10.5000pt]>
[size=10.5000pt]    [size=10.5000pt]<[size=10.5000pt]title[size=10.5000pt]>[size=10.5000pt]Extjs--Struts例子[size=10.5000pt]</[size=10.5000pt]title[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]meta [size=10.5000pt]http-equiv[size=10.5000pt]=[size=10.5000pt]"pragma" [size=10.5000pt]content[size=10.5000pt]=[size=10.5000pt]"no-cache"[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]meta [size=10.5000pt]http-equiv[size=10.5000pt]=[size=10.5000pt]"cache-control" [size=10.5000pt]content[size=10.5000pt]=[size=10.5000pt]"no-cache"[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]meta [size=10.5000pt]http-equiv[size=10.5000pt]=[size=10.5000pt]"expires" [size=10.5000pt]content[size=10.5000pt]=[size=10.5000pt]"0"[size=10.5000pt]>[size=10.5000pt]    
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]meta [size=10.5000pt]http-equiv[size=10.5000pt]=[size=10.5000pt]"keywords" [size=10.5000pt]content[size=10.5000pt]=[size=10.5000pt]"keyword1,keyword2,keyword3"[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]meta [size=10.5000pt]http-equiv[size=10.5000pt]=[size=10.5000pt]"description" [size=10.5000pt]content[size=10.5000pt]=[size=10.5000pt]"This is my page"[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]link [size=10.5000pt]rel[size=10.5000pt]=[size=10.5000pt]"stylesheet" [size=10.5000pt]type[size=10.5000pt]=[size=10.5000pt]"text/css" [size=10.5000pt]href[size=10.5000pt]=[size=10.5000pt]"ext4/resources/css/ext-all.css" [size=10.5000pt]/>
[size=10.5000pt]    [size=10.5000pt]<[size=10.5000pt]script [size=10.5000pt]type[size=10.5000pt]=[size=10.5000pt]"text/javascript" [size=10.5000pt]src[size=10.5000pt]=[size=10.5000pt]"ext4/bootstrap.js"[size=10.5000pt]></[size=10.5000pt]script[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]<[size=10.5000pt]script [size=10.5000pt]type[size=10.5000pt]=[size=10.5000pt]"text/javascript"[size=10.5000pt]>
[size=10.5000pt][size=10.5000pt]Ext.require([
[size=10.5000pt][size=10.5000pt]    [size=10.5000pt]'Ext.tree.*'[size=10.5000pt],
[size=10.5000pt][size=10.5000pt]    [size=10.5000pt]'Ext.data.*'[size=10.5000pt],
[size=10.5000pt][size=10.5000pt]    [size=10.5000pt]'Ext.tip.*'
[size=10.5000pt][size=10.5000pt]]);
 
[size=10.5000pt]Ext.onReady([size=10.5000pt]function[size=10.5000pt]() [size=10.5000pt]{
[size=10.5000pt]    [size=10.5000pt]Ext.QuickTips.init();
[size=10.5000pt]    
[size=10.5000pt]    [size=10.5000pt]var [size=10.5000pt]store = Ext.create([size=10.5000pt]'Ext.data.TreeStore'[size=10.5000pt], [size=10.5000pt]{
[size=10.5000pt]        [size=10.5000pt]proxy: [size=10.5000pt]{
[size=10.5000pt]            [size=10.5000pt]type: [size=10.5000pt]'ajax'[size=10.5000pt],
[size=10.5000pt]            url: [size=10.5000pt]'menu!execute.action'
[size=10.5000pt]        [size=10.5000pt]}[size=10.5000pt],
[size=10.5000pt]        root: [size=10.5000pt]{
[size=10.5000pt]            [size=10.5000pt]text: [size=10.5000pt]'ExtJS'[size=10.5000pt],
[size=10.5000pt]            id: [size=10.5000pt]'src'[size=10.5000pt],
[size=10.5000pt]            expanded: [size=10.5000pt]true
[size=10.5000pt]        }[size=10.5000pt],
[size=10.5000pt]        folderSort: [size=10.5000pt]true[size=10.5000pt],
[size=10.5000pt]        sorters: [[size=10.5000pt]{
[size=10.5000pt]            [size=10.5000pt]property: [size=10.5000pt]'text'[size=10.5000pt],
[size=10.5000pt]            direction: [size=10.5000pt]'ASC'
[size=10.5000pt]        [size=10.5000pt]}[size=10.5000pt]]
[size=10.5000pt]    [size=10.5000pt]}[size=10.5000pt]);
 
[size=10.5000pt]    [size=10.5000pt]var [size=10.5000pt]tree = Ext.create([size=10.5000pt]'Ext.tree.Panel'[size=10.5000pt], [size=10.5000pt]{
[size=10.5000pt]        [size=10.5000pt]store: store,
[size=10.5000pt]        viewConfig: [size=10.5000pt]{
[size=10.5000pt]            [size=10.5000pt]plugins: [size=10.5000pt]{
[size=10.5000pt]                [size=10.5000pt]ptype: [size=10.5000pt]'treeviewdragdrop'
[size=10.5000pt]            [size=10.5000pt]}
[size=10.5000pt]        }[size=10.5000pt],
[size=10.5000pt]        renderTo: [size=10.5000pt]'tree-div'[size=10.5000pt],
[size=10.5000pt]        height: 300,
[size=10.5000pt]        width: 250,
[size=10.5000pt]        title: [size=10.5000pt]'Files'[size=10.5000pt],
[size=10.5000pt]        useArrows: [size=10.5000pt]true[size=10.5000pt],
[size=10.5000pt]        dockedItems: [[size=10.5000pt]{
[size=10.5000pt]            [size=10.5000pt]xtype: [size=10.5000pt]'toolbar'[size=10.5000pt],
[size=10.5000pt]            items: [[size=10.5000pt]{
[size=10.5000pt]                [size=10.5000pt]text: [size=10.5000pt]'Expand All'[size=10.5000pt],
[size=10.5000pt]                handler: [size=10.5000pt]function[size=10.5000pt]()[size=10.5000pt]{
[size=10.5000pt]                    [size=10.5000pt]tree.expandAll();
[size=10.5000pt]                [size=10.5000pt]}
[size=10.5000pt]            }[size=10.5000pt], [size=10.5000pt]{
[size=10.5000pt]                [size=10.5000pt]text: [size=10.5000pt]'Collapse All'[size=10.5000pt],
[size=10.5000pt]                handler: [size=10.5000pt]function[size=10.5000pt]()[size=10.5000pt]{
[size=10.5000pt]                    [size=10.5000pt]tree.collapseAll();
[size=10.5000pt]                [size=10.5000pt]}
[size=10.5000pt]            }[size=10.5000pt]]
[size=10.5000pt]        [size=10.5000pt]}[size=10.5000pt]]
[size=10.5000pt]    [size=10.5000pt]}[size=10.5000pt]);
[size=10.5000pt]}[size=10.5000pt]);
 
 
[size=10.5000pt][size=10.5000pt]</[size=10.5000pt]script[size=10.5000pt]>
[size=10.5000pt]  [size=10.5000pt]</[size=10.5000pt]head[size=10.5000pt]>
[size=10.5000pt]  
[size=10.5000pt]  [size=10.5000pt]<[size=10.5000pt]body[size=10.5000pt]>
[size=10.5000pt]     [size=10.5000pt]<[size=10.5000pt]br[size=10.5000pt]/><[size=10.5000pt]br[size=10.5000pt]/>
[size=10.5000pt]     [size=10.5000pt]<[size=10.5000pt]span [size=10.5000pt]style[size=10.5000pt]=[size=10.5000pt]"color:red"[size=10.5000pt]>
[size=10.5000pt]      [size=10.5000pt][size=10.5000pt]本例子采用的技术有: Extjs4.0 + Struts2 + json-lib
[size=10.5000pt]     [size=10.5000pt]</[size=10.5000pt]span[size=10.5000pt]>
[size=10.5000pt]     [size=10.5000pt]<[size=10.5000pt]br[size=10.5000pt]/><[size=10.5000pt]br[size=10.5000pt]/>
[size=10.5000pt]    [size=10.5000pt]<[size=10.5000pt]div [size=10.5000pt]id[size=10.5000pt]=[size=10.5000pt]"tree-div"[size=10.5000pt]></[size=10.5000pt]div[size=10.5000pt]>
[size=10.5000pt]  [size=10.5000pt]</[size=10.5000pt]body[size=10.5000pt]>
[size=10.5000pt]</[size=10.5000pt]html[size=10.5000pt]>
2: 服务层代码
   2.1 JavaBean   Menu.java
[size=10.5000pt]      package cn.com.bean;
[size=10.5000pt]      import java.util.List;
[size=10.5000pt]      public class Menu {
[size=10.5000pt]           private int id;
[size=10.5000pt]           private String text;
[size=10.5000pt]           private boolean leaf;
[size=10.5000pt]           private String cls;
[size=10.5000pt]           private List children;
[size=10.5000pt]
[size=10.5000pt]           public int getId() {
[size=10.5000pt]               return id;
[size=10.5000pt]           }
[size=10.5000pt]           public void setId(int id) {
[size=10.5000pt]               this.id = id;
[size=10.5000pt]           }
[size=10.5000pt]           public String getText() {
[size=10.5000pt]               return text;
[size=10.5000pt]           }
[size=10.5000pt]           public void setText(String text) {
[size=10.5000pt]               this.text = text;
[size=10.5000pt]           }
[size=10.5000pt]           public boolean isLeaf() {
[size=10.5000pt]               return leaf;
[size=10.5000pt]           }
[size=10.5000pt]           public void setLeaf(boolean leaf) {
[size=10.5000pt]               this.leaf = leaf;
[size=10.5000pt]           }
[size=10.5000pt]           public String getCls() {
[size=10.5000pt]               return cls;
[size=10.5000pt]           }
[size=10.5000pt]           public void setCls(String cls) {
[size=10.5000pt]               this.cls = cls;
[size=10.5000pt]           }
[size=10.5000pt]           public List getChildren() {
[size=10.5000pt]               return children;
[size=10.5000pt]           }
[size=10.5000pt]           public void setChildren(List children) {
[size=10.5000pt]               this.children = children;
[size=10.5000pt]           }
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]     }
2.1 Action   [size=10.5000pt]MenuAction[size=10.5000pt].java
[size=10.5000pt]     package cn.com.action;
[size=10.5000pt]     import java.io.IOException;
[size=10.5000pt]     import java.util.ArrayList;
[size=10.5000pt]     import java.util.List;
 
[size=10.5000pt]     import javax.servlet.http.HttpServletResponse;
 
[size=10.5000pt]     import net.sf.json.JSONArray;
 
[size=10.5000pt]     import org.apache.struts2.ServletActionContext;
 
[size=10.5000pt]     import cn.com.bean.Menu;
 
[size=10.5000pt]     public class MenuAction {
 
[size=10.5000pt]          private String menuString;
[size=10.5000pt]          private List menus;
[size=10.5000pt]          public void execute(){[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             HttpServletResponse response = ServletActionContext.getResponse();
[size=10.5000pt]             response.setCharacterEncoding("utf-8");
[size=10.5000pt][size=10.5000pt][size=10.5000pt] 
[size=10.5000pt]             menus = new ArrayList();
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             Menu benz = new Menu();
[size=10.5000pt]             benz.setText("二级菜单目录1");
[size=10.5000pt]             benz.setCls("folder");
[size=10.5000pt]             benz.setLeaf(false);
[size=10.5000pt]             benz.setId(10);
[size=10.5000pt]             menus.add(benz);
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             List benzList = new ArrayList();
[size=10.5000pt]             benz.setChildren(benzList);
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             
[size=10.5000pt]             //二级菜单目录1的子菜单1
[size=10.5000pt]             Menu menu = new Menu();
[size=10.5000pt]             menu.setText("子菜单1-1");
[size=10.5000pt]             menu.setCls("file");
[size=10.5000pt]             menu.setLeaf(true);
[size=10.5000pt]             menu.setId(11);
[size=10.5000pt]             benzList.add(menu);
[size=10.5000pt][size=10.5000pt]
 
[size=10.5000pt]             //二级菜单目录1的子菜单2
[size=10.5000pt]             menu = new Menu();
[size=10.5000pt]             menu.setText("子菜单1-2");
[size=10.5000pt]             menu.setCls("file");
[size=10.5000pt]             menu.setLeaf(true);
[size=10.5000pt]             menu.setId(12);
[size=10.5000pt]             benzList.add(menu);
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             
[size=10.5000pt]             Menu bmw = new Menu();
[size=10.5000pt]             bmw.setText("二级菜单目录2");
[size=10.5000pt]             bmw.setCls("folder");
[size=10.5000pt]             bmw.setLeaf(false);
[size=10.5000pt]             bmw.setId(20);
[size=10.5000pt]             menus.add(bmw);
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             List bmwList = new ArrayList();
[size=10.5000pt]             bmw.setChildren(bmwList);
[size=10.5000pt][size=10.5000pt]
 
[size=10.5000pt]             //二级菜单目录2的子菜单1
[size=10.5000pt]             menu = new Menu();
[size=10.5000pt]             menu.setText("子菜单2-1");
[size=10.5000pt]             menu.setCls("file");
[size=10.5000pt]             menu.setLeaf(true);
[size=10.5000pt]             menu.setId(21);
[size=10.5000pt]             bmwList.add(menu);
[size=10.5000pt][size=10.5000pt]
 
[size=10.5000pt]             //二级菜单目录2的子菜单1
[size=10.5000pt]             menu = new Menu();
[size=10.5000pt]             menu.setText("子菜单2-2");
[size=10.5000pt]             menu.setCls("file");
[size=10.5000pt]             menu.setLeaf(true);
[size=10.5000pt]             menu.setId(22);
[size=10.5000pt]             bmwList.add(menu);
[size=10.5000pt][size=10.5000pt]
 
[size=10.5000pt]             JSONArray jsonObject = JSONArray.fromObject(menus);
[size=10.5000pt]             try{
[size=10.5000pt]                  menuString = jsonObject.toString();
[size=10.5000pt]             }catch(Exception e){
[size=10.5000pt]                  menuString = "ss";
[size=10.5000pt]             }
[size=10.5000pt][size=10.5000pt]
[size=10.5000pt]             try {
[size=10.5000pt]                  response.getWriter().write(menuString);
[size=10.5000pt]             } catch (IOException e) {
[size=10.5000pt]                  e.printStackTrace();
[size=10.5000pt]             }
[size=10.5000pt]             //return "success";
[size=10.5000pt]        }
 
[size=10.5000pt]        public String getMenuString() {
[size=10.5000pt]             return menuString;
[size=10.5000pt]        }
 
[size=10.5000pt]       public void setMenuString(String menuString) {
[size=10.5000pt]             this.menuString = menuString;
[size=10.5000pt]        }
[size=10.5000pt]    }
[size=10.5000pt]    其中web.xml 和 struts.xml代码和一般的项目配置一样。
 
[size=10.5000pt] [size=14.0000pt]三 总结
通过本次例子可以学习总结到以下知识点：
[size=10.5000pt]1：JSon-lib 工具的应用
[size=10.5000pt]   通过引入json-lib的jar 包就可以使用json-lib了，不需要配置其它文件。
[size=10.5000pt]   这里引的jar包有
[size=10.5000pt]   commons-beanutils-1.7.0.jar
[size=10.5000pt]   commons-collections-3.2.jar
[size=10.5000pt]   commons-lang.jar
[size=10.5000pt]   commons-logging-1.1.jar
[size=10.5000pt]   ezmorph-1.0.4.jar
[size=10.5000pt]   json-lib-2.2.2-jdk15.jar
 
[size=10.5000pt]   核心代码（其中menus为JavaBean 对象，转换后的menuString 为一字符串）：
[size=10.5000pt]   JSONArray jsonObject = JSONArray.fromObject(menus);
[size=10.5000pt]   try{
[size=10.5000pt]       menuString = jsonObject.toString();
[size=10.5000pt]   }catch(Exception e){
[size=10.5000pt]       menuString = "ss";
[size=10.5000pt]   }
[size=10.5000pt]   
[size=10.5000pt]   生成的[size=10.5000pt]menuString:
[size=10.5000pt][{"children":[{"children":[],"cls":"file","id":11,"leaf":true,"text":"子菜单1-1"},
[size=10.5000pt]{"children":[],"cls":"file","id":12,"leaf":true,"text":"子菜单1-2"}],"cls":"folder","id":10,"leaf":false,"text":"二级菜单目录1"},{"children":[{"children":[],"cls":"file","id":21,"leaf":true,"text":"子菜单2-1"},
[size=10.5000pt]{"children":[],"cls":"file","id":22,"leaf":true,"text":"子菜单2-2"}],"cls":"folder","id":20,"leaf":false,"text":"二级菜单目录2"}]
 
[size=10.5000pt]2：Extjs 与后台Action交互的方式：
[size=10.5000pt] [size=10.5000pt]      [size=10.5000pt]proxy: [size=10.5000pt]{
[size=10.5000pt]            [size=10.5000pt]type: [size=10.5000pt]'ajax'[size=10.5000pt],
[size=10.5000pt]            url: [size=10.5000pt]'menu!execute.action'
[size=10.5000pt]        [size=10.5000pt]}[size=10.5000pt],
[size=10.5000pt]通过代理[size=10.5000pt]proxy 的ajax方式 与后台服务交互。这里需要注意的是，[size=10.5000pt]而在Ext中的提交数据的过程中，Ext框架用的是都是UTF-8编码，而且通过JSON提交的数据也是UTF-8编码[size=10.5000pt]。
[size=10.5000pt]如果Action中没有加[size=10.5000pt]response.setCharacterEncoding("utf-8");[size=10.5000pt]则页面中文将是乱码。