Java's Struts2 framework works with examples of Ext JS working with JSON data
- 2020-05-07 19:34:14
- OfStack
Recently an attempt was made to display the tree menu using extjs. It took a while. Menu items in tree menus need to be loaded dynamically, and only JSON data is supported in the current version of extjs. After checking some information, I decided to use json-plugin of struts2. At first, I did one of them according to the example, but the result was not successful. Only one root node generated in js appeared on the interface, and the data generated from the background could not be loaded. The study found that there was a problem with the format of the data. The format of the data generated using json-plugin is as follows:
{"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"}
The data format required by extjs is as follows:
[{"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"}]
The difference is very small, just the two outermost square brackets. But without these two square brackets, json has a very different meaning, with the former representing an object and the latter an array. The data required for dataloader of tree in extjs must be an array. This data format is automatically generated by json-plugin and cannot be changed. So I finally gave up json-plugin and used json-lib to solve this problem.
1. Download json-lib, http:// json-lib.sourceforge.net /
2. List of jar files in lib directory:
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
First configure 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.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
And then the 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.jsp</result>
</action>
</package>
</struts>
3. Node model of the tree (getter, setter omitted)
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" %>
<s:property value="menuString" escape="false"/>
6. html page and js page
I used reorder.html and reorder.js in example of extjs, and changed dataurl: menus.action of reorder.js of treeloader
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/example.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Drag and Drop ordering in a TreePanel</h1>
<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>not</b> 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.js</a>.</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();
});
7. Parse List data
The code is as follows:
json data in EXTJS
var comboStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'adminGroup', // Here is the struts Request to the action
method:'POST' // Request way
}),
reader: new Ext.data.JsonReader({
// The total number of records
totalProperty: 'results', // The total number of records
root: 'items', // Record collection
id:'roleId'
},
['roleId','roleName'] // Two fields are displayed
)
});
JSON data content
[{"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"}]
The following is the action code in struts2, which encapsulates the ExtHelper utility class. There are two formats in xml and json
[{"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"}]
There are many ways to parse json, so you can do the conversion in json's own package. However, if Struts2 is used in the project, it is more convenient to use the method provided by Struts2 directly.