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

周凡杨

浏览: 235111 次
性别:
来自: 上海

最近访客更多访客>>

apex53

qsjiangs

yuanyuan7891

汪小洋

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

extjs extjs4.0 truee javascript

Extjs4.0 学习笔记四

继续学习Extjs4.0 菜单tree应用，这次实现的是Extjs与Struts2之间的数据交互。

其中交互的数据格式为json，采用的技术有json-lib，本次数据是在Struts的服务里写死的，实际项目中，菜单列表都是从数据库表里读取的。

Extjs: 用于前台页面展示

Struts: 后台服务层，主要支撑数据的交互、及服务的业务逻辑

Json-lib: 可以将Java对象转成json格式的字符串，也可以将Java对象转换成xml格式的文档

一：页面效果

子菜单展开后的样式如下所示：

二：代码

1: 页面代码menu.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Extjs--Struts例子</title>

Ext.require([

'Ext.tree.*',

'Ext.data.*',

'Ext.tip.*'

]);

Ext.onReady(function() {

Ext.QuickTips.init();

var store = Ext.create('Ext.data.TreeStore', {

proxy: {

type: 'ajax',

url: 'menu!execute.action'

root: {

text: 'ExtJS',

id: 'src',

expanded: true

folderSort: true,

sorters: [{

property: 'text',

direction: 'ASC'

}]

});

var tree = Ext.create('Ext.tree.Panel', {

store: store,

viewConfig: {

plugins: {

ptype: 'treeviewdragdrop'

}

renderTo: 'tree-div',

height: 300,

width: 250,

title: 'Files',

useArrows: true,

dockedItems: [{

xtype: 'toolbar',

items: [{

text: 'Expand All',

handler: function(){

tree.expandAll();

}

}, {

text: 'Collapse All',

handler: function(){

tree.collapseAll();

}

}]

});

</script>

</head>

<body>

本例子采用的技术有: Extjs4.0 + Struts2 + json-lib

</span>

</body>

</html>

2: 服务层代码

2.1 JavaBean Menu.java

package cn.com.bean;

import java.util.List;

public class Menu {

private int id;

private String text;

private boolean leaf;

private String cls;

private List children;

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public boolean isLeaf() {

return leaf;

}

public void setLeaf(boolean leaf) {

this.leaf = leaf;

}

public String getCls() {

return cls;

}

public void setCls(String cls) {

this.cls = cls;

}

public List getChildren() {

return children;

}

public void setChildren(List children) {

this.children = children;

}

2.1 Action MenuAction.java

package cn.com.action;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;

import cn.com.bean.Menu;

public class MenuAction {

private String menuString;

private List menus;

public void execute(){

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

menus = new ArrayList();

Menu benz = new Menu();

benz.setText("二级菜单目录1");

benz.setCls("folder");

benz.setLeaf(false);

benz.setId(10);

menus.add(benz);

List benzList = new ArrayList();

benz.setChildren(benzList);

//二级菜单目录1的子菜单1

Menu menu = new Menu();

menu.setText("子菜单1-1");

menu.setCls("file");

menu.setLeaf(true);

menu.setId(11);

benzList.add(menu);

//二级菜单目录1的子菜单2

menu = new Menu();

menu.setText("子菜单1-2");

menu.setCls("file");

menu.setLeaf(true);

menu.setId(12);

benzList.add(menu);

Menu bmw = new Menu();

bmw.setText("二级菜单目录2");

bmw.setCls("folder");

bmw.setLeaf(false);

bmw.setId(20);

menus.add(bmw);

List bmwList = new ArrayList();

bmw.setChildren(bmwList);

//二级菜单目录2的子菜单1

menu = new Menu();

menu.setText("子菜单2-1");

menu.setCls("file");

menu.setLeaf(true);

menu.setId(21);

bmwList.add(menu);

//二级菜单目录2的子菜单1

menu = new Menu();

menu.setText("子菜单2-2");

menu.setCls("file");

menu.setLeaf(true);

menu.setId(22);

bmwList.add(menu);

JSONArray jsonObject = JSONArray.fromObject(menus);

try{

menuString = jsonObject.toString();

}catch(Exception e){

menuString = "ss";

}

try {

response.getWriter().write(menuString);

} catch (IOException e) {

e.printStackTrace();

}

//return "success";

}

public String getMenuString() {

return menuString;

}

public void setMenuString(String menuString) {

this.menuString = menuString;

}

其中web.xml 和 struts.xml代码和一般的项目配置一样。

三总结

通过本次例子可以学习总结到以下知识点：

1：JSon-lib 工具的应用

通过引入json-lib的jar 包就可以使用json-lib了，不需要配置其它文件。

这里引的jar包有

commons-beanutils-1.7.0.jar

commons-collections-3.2.jar

commons-lang.jar

commons-logging-1.1.jar

ezmorph-1.0.4.jar

json-lib-2.2.2-jdk15.jar

核心代码（其中menus为JavaBean 对象，转换后的menuString 为一字符串）：

JSONArray jsonObject = JSONArray.fromObject(menus);

try{

menuString = jsonObject.toString();

}catch(Exception e){

menuString = "ss";

}

生成的menuString:

[{"children":[{"children":[],"cls":"file","id":11,"leaf":true,"text":"子菜单1-1"},

{"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"},

{"children":[],"cls":"file","id":22,"leaf":true,"text":"子菜单2-2"}],"cls":"folder","id":20,"leaf":false,"text":"二级菜单目录2"}]

2：Extjs 与后台Action交互的方式：

proxy: {

type: 'ajax',

url: 'menu!execute.action'

通过代理proxy 的ajax方式与后台服务交互。这里需要注意的是，而在Ext中的提交数据的过程中，Ext框架用的是都是UTF-8编码，而且通过JSON提交的数据也是UTF-8编码。

如果Action中没有加response.setCharacterEncoding("utf-8");则页面中文将是乱码。

查看图片附件

1
顶

0
踩

分享到：

Extjs4.0学习笔记五（TabPanel应用） | Extjs4.0学习笔记三(Tree应用)

2011-10-13 13:32
浏览 7947
评论(1)
分类:Web前端
查看更多

1 楼 liuzhiqiangmeng 2012-07-31

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论