Extjs Tree + JSON + Struts2 的所有示例源代码和war文�g下蝲

Tue, 01 Sep 2009 03:07:00 GMT

在我的随�W?a title="在我的随�W�Extjs Tree + JSON + Struts2" href="http://m.tkk7.com/usherlight/archive/2008/02/19/180590.html">Extjs Tree + JSON + Struts2中我介绍�?ji��n)如何异步加载一个Extjs的树(w��i)�Q�但是很多网友留�a�说不能成功操作。现在我自己做了(ji��n)一个所有源代码的包�Q�供大家下蝲�?br /> 有几点事��请大家注意
1、blogjava的文件上载要求单个文件不能超�q?M�Q�所以，我把web-inf目录下的所有jar文�g删除�?ji��n)�?br /> 所有jar文�g的列表是�Q?br /> 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
注意�U�色标记的那个jar文�g是上�ơ随�W�中遗漏�?ji��n)的。这个文件是需要的�?br /> 2、blogjava要求上传文�g不能是war文�g�Q�所以我把war文�g�Ҏ(gu��)��?ji��n)rar后缀�?br /> 文�g的URL�Q?war文�g下蝲

云自无心(j��)水自�?/a> 2009-09-01 11:07 发表评论

Extjs Tree + JSON + Struts2

Tue, 19 Feb 2008 01:27:00 GMT

最�q�尝试用extjs来展�C�树(w��i)状菜单。着实花�?ji��n)一番功夫。树(w��i)状菜单的菜单��w��要动态加载，而目前版本的extjs中只支持JSON格式的数据。查�?ji��n)一些资料，军_��使用struts2的json-plugin。首先按照例子做�?ji��n)一个，但是�l�果��是不成功，界面上只出来�?ji��n)一个js中生成的root节点�Q�不能加载从后台生成的数据。研�I�后发现是数据格式有问题。��用json-plugin生成的数据格式如下：(x��)
{"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需要的数据格式如下�Q?br /> [{"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"}]
区别很小�Q�就只相差最外面的两个方括号。但是少�?ji��n)这两个��?gu��)��P��在json中，含义�q�然不同�Q�前者表�C�Z��个对象，而后者表�C�Z��个数�l�。而extjs�? tree的dataloader需要的数据必须是一个数�l�。而这��L(f��ng)��数据格式是json-plugin自动生成的，无法改变。所以，我最后放弃了(ji��n)json -plugin�Q��{而��用json-lib来解册��个问题�?br /> 1. 下蝲json-lib, http://json-lib.sourceforge.net/
2. lib目录下的jar文�g清单�Q?br /> 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

xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <welcome-file-list>
    <welcome-file>index.jspwelcome-file>
  welcome-file-list>
  <filter>
    <filter-name>struts2filter-name>
    <filter-class>org.apache.struts2.dispatcher.FilterDispatcherfilter-class>
  filter>

  <filter-mapping>
    <filter-name>struts2filter-name>
    <url-pattern>/*url-pattern>
  filter-mapping>
web-app>

然后是struts.xml

xml version="1.0" encoding="UTF-8"?>
DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
    <constant name="struts.devMode" value="true"/>
    <constant name="struts.i18n.encoding" value="UTF-8"/>
    <package name="person" extends="struts-default">
        <action name="menus" method="execute" class="com.lab.MenuAction">
            <result>/menu.jspresult>
        action>
    package>
struts>

3. �?w��i)的节点模型�Q�省略了(ji��n)getter�Q�setter)

public class Menu {
    private int id;
    private String text;
    private boolean leaf;
    private String cls;
    private List<Menu> children;
}

4. action

package com.lab;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;

public class MenuAction {
    private String menuString;

    private List<Menu> menus;

    public String execute() {

        menus = new ArrayList<Menu>();

        Menu benz = new Menu();
        benz.setText("Benz");
        benz.setCls("folder");
        benz.setLeaf(false);
        benz.setId(10);
        menus.add(benz);

        List<Menu> benzList = new ArrayList<Menu>();
        benz.setChildren(benzList);

        Menu menu;
        menu = new Menu();
        menu.setText("S600");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(11);
        benzList.add(menu);
        menu = new Menu();
        menu.setText("SLK200");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(12);
        benzList.add(menu);

        Menu bmw = new Menu();
        bmw.setText("BMW");
        bmw.setCls("folder");
        bmw.setLeaf(false);
        bmw.setId(20);
        menus.add(bmw);

        List<Menu> bmwList = new ArrayList<Menu>();
        bmw.setChildren(bmwList);

        menu = new Menu();
        menu.setText("325i");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(21);
        bmwList.add(menu);

        menu = new Menu();
        menu.setText("X5");
        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";
        }

        return "success";
    }

    public String getMenuString() {
        return menuString;
    }

    public void setMenuString(String menuString) {
        this.menuString = menuString;
    }
}

5. menu.jsp
<%@ taglib prefix="s" uri="/struts-tags" %>

6. html��面和js
我��用的��是extjs的example中的reorder.html和reorder.js�Q�更改了(ji��n)reorder.js中treeloader的dataurl�Q?menus.action

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reorder TreePaneltitle>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />



     <script type="text/javascript" src="extjs/adapter/ext/ext-base.js">script>


    <script type="text/javascript" src="extjs/ext-all.js">script>
<script type="text/javascript" src="reorder.js">script>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/example.css" />
head>
<body>
<script type="text/javascript" src="../examples.js">script>
<h1>Drag and Drop ordering in a TreePanelh1>
<p>This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and
anything can be dropped anywhere except appending to nodes marked "leaf" (the files). <br>p>
<p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.p>
<p>In order to demonstrate drag and drop insertion points, sorting was <b>notb> enabled.p>
<p>The data for this tree is asynchronously loaded with a JSON TreeLoader.p>
<p>The js is not minified so it is readable. See <a href="reorder.js">reorder.jsa>.p>

<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;">div>

body>
html>

js:

/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

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();
});

我已�l�上传了(ji��n)完整的War文�g�Q�包含所有源代码�Q�，见：(x��)Extjs Tree + JSON + Struts2 的所有示例源代码和war文�g下蝲

云自无心(j��)水自�?/a> 2008-02-19 09:27 发表评论

国产午夜亚洲精品不卡电影,亚洲香蕉久久一区二区,亚洲人配人种jizz

Extjs Tree + JSON + Struts2 的所有示例源代码和war文�g下蝲

Extjs Tree + JSON + Struts2