ExtJS4.1.1下 异步加载树无法显示,该怎么处理
ExtJS4.1.1下 异步加载树无法显示
我为ExtJS4.1.1下 异步加载树很伤脑筋，树上的例子怎么就运行不通呢？可这个异步加载树在实际应用中非用不可，诚请教哪位大侠指点迷津，本人将不胜感激！
这是《疯狂Ajax讲义》一书中的异步加载树的例子，该例子共有四个文件：
dynaTree.html
GetChildrenNodesServlet.java
EmpService.java
Employee.java
做了很多试验都无法显示，并有很多疑惑，我真怀疑书中的这个例子是不是错的?
a) dynaTree.html 中没有给定初始的“id”，从GetChildrenNodesServlet.java中得到mgrIdStr=null，怎么查表得到返回数据呢？
b) 若在GetChildrenNodesServlet.java中假设给定id值比如id=0，查到表到data中返回后客户端又是如何抓到数据的呢？ 事实上按照书中的Demo也没有显示啊。
c) 若真按书中例子，GetChildrenNodesServlet.java文件的一句“ Map<String , Object> result = new HashMap<>();” 在ExtJS4.1.1下根本就编译不过，我改成“Map<String , Object> result = new HashMap<String , Object>();”后方可编译。
完整代码如下：
1）dynaTree.html如下：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 动态加载节点的树 </title>
<!-- 导入Ext JS必需的CSS样式单 -->
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!-- 导入Ext JS必需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<!-- 导入Ext JS国际化所需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
// 定义一个Model类
Ext.define('Employee', {
extend: 'Ext.data.Model',
// 定义该Model类包含的所有列
fields: [
{name: 'id', type: 'int'},
// 将原来的name属性映射成text列
{name: 'text', type: 'string' , mapping:"name"},
{name: 'desc', type: 'string'},
{name: 'mgrId', type: 'int'}
]
});
// 创建Ext.data.TreeStore
treeStore = Ext.create('Ext.data.TreeStore', {
model: Employee,
proxy: {
type: 'ajax', // 指定使用Ajax请求
url: 'getChildrenNodes', // 向该URL发送请求
reader: {
type: 'json',
root: 'data' // 指定读取data属性
}
},
});
var tree = Ext.create('Ext.tree.Panel', {
title: '动态加载节点的树',
// 不使用Vista风格的箭头代表节点的展开/折叠状态
useArrows: false,
width: 300,
height: 350,
store: treeStore, // 指定该树所使用的TreeStore
rootVisible: false, // 指定根节点不可见
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
2）GetChildrenNodesServlet.java如下：
package org.crazyit.extjs.web;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import java.util.*;
import org.json.*;
import org.crazyit.extjs.domain.*;
import org.crazyit.extjs.service.*;
/**
* Description:
* <br/>Program Name:
* <br/>Date:
* @author Yeeku.H.Lee kongyeeku@163.com
* @version 1.0
*/
@WebServlet(urlPatterns="/getChildrenNodes")
public class GetChildrenNodesServlet extends HttpServlet
{
public void service(HttpServletRequest request ,
HttpServletResponse response)
throws IOException , ServletException
{
response.setContentType("text/html;charset=utf-8");
Map<String , Object> result = new HashMap<>();
// 获取id请求参数
String mgrIdStr = request.getParameter("id");
int mgrId = 0;
try
{
// 将请求参数转换为经理ID
mgrId = Integer.parseInt(mgrIdStr);
}
catch (Exception ex)
{
}
// 下面输出代码没有实际意义，仅用于查看请求参数
System.out.println("经理ID--------" + mgrId);
// 调用业务逻辑组件的方法根据经理ID获取他的员工
List<Employee> emps = new EmpService().getEmployees(mgrId);
result.put("data" , emps);
PrintWriter out = response.getWriter();
// 将Map包装成JSONObject后输出
out.print(new JSONObject(result));
}
}
3）EmpService.java 如下：
package org.crazyit.extjs.service;
import org.crazyit.extjs.domain.*;
import java.util.*;
/**
* Description:
* <br/>Program Name:
* <br/>Date:
* @author Yeeku.H.Lee kongyeeku@163.com
* @version 1.0
*/
public class EmpService
{
// 使用List集合模拟内存中数据库
static List<Employee> employeeDb
= new ArrayList<>();
// 添加员工数据
static {
employeeDb.add(new Employee(1, "如来" , "最高Boss", null));
employeeDb.add(new Employee(2, "唐僧" , "经理", 1));
employeeDb.add(new Employee(3, "孙悟空" , "打怪主力", 2));
employeeDb.add(new Employee(4, "猪八戒" , "美女爱好者", 2));
我为ExtJS4.1.1下 异步加载树很伤脑筋，树上的例子怎么就运行不通呢？可这个异步加载树在实际应用中非用不可，诚请教哪位大侠指点迷津，本人将不胜感激！
这是《疯狂Ajax讲义》一书中的异步加载树的例子，该例子共有四个文件：
dynaTree.html
GetChildrenNodesServlet.java
EmpService.java
Employee.java
做了很多试验都无法显示，并有很多疑惑，我真怀疑书中的这个例子是不是错的?
a) dynaTree.html 中没有给定初始的“id”，从GetChildrenNodesServlet.java中得到mgrIdStr=null，怎么查表得到返回数据呢？
b) 若在GetChildrenNodesServlet.java中假设给定id值比如id=0，查到表到data中返回后客户端又是如何抓到数据的呢？ 事实上按照书中的Demo也没有显示啊。
c) 若真按书中例子，GetChildrenNodesServlet.java文件的一句“ Map<String , Object> result = new HashMap<>();” 在ExtJS4.1.1下根本就编译不过，我改成“Map<String , Object> result = new HashMap<String , Object>();”后方可编译。
完整代码如下：
1）dynaTree.html如下：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 动态加载节点的树 </title>
<!-- 导入Ext JS必需的CSS样式单 -->
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!-- 导入Ext JS必需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<!-- 导入Ext JS国际化所需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
// 定义一个Model类
Ext.define('Employee', {
extend: 'Ext.data.Model',
// 定义该Model类包含的所有列
fields: [
{name: 'id', type: 'int'},
// 将原来的name属性映射成text列
{name: 'text', type: 'string' , mapping:"name"},
{name: 'desc', type: 'string'},
{name: 'mgrId', type: 'int'}
]
});
// 创建Ext.data.TreeStore
treeStore = Ext.create('Ext.data.TreeStore', {
model: Employee,
proxy: {
type: 'ajax', // 指定使用Ajax请求
url: 'getChildrenNodes', // 向该URL发送请求
reader: {
type: 'json',
root: 'data' // 指定读取data属性
}
},
});
var tree = Ext.create('Ext.tree.Panel', {
title: '动态加载节点的树',
// 不使用Vista风格的箭头代表节点的展开/折叠状态
useArrows: false,
width: 300,
height: 350,
store: treeStore, // 指定该树所使用的TreeStore
rootVisible: false, // 指定根节点不可见
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
2）GetChildrenNodesServlet.java如下：
package org.crazyit.extjs.web;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import java.util.*;
import org.json.*;
import org.crazyit.extjs.domain.*;
import org.crazyit.extjs.service.*;
/**
* Description:
* <br/>Program Name:
* <br/>Date:
* @author Yeeku.H.Lee kongyeeku@163.com
* @version 1.0
*/
@WebServlet(urlPatterns="/getChildrenNodes")
public class GetChildrenNodesServlet extends HttpServlet
{
public void service(HttpServletRequest request ,
HttpServletResponse response)
throws IOException , ServletException
{
response.setContentType("text/html;charset=utf-8");
Map<String , Object> result = new HashMap<>();
// 获取id请求参数
String mgrIdStr = request.getParameter("id");
int mgrId = 0;
try
{
// 将请求参数转换为经理ID
mgrId = Integer.parseInt(mgrIdStr);
}
catch (Exception ex)
{
}
// 下面输出代码没有实际意义，仅用于查看请求参数
System.out.println("经理ID--------" + mgrId);
// 调用业务逻辑组件的方法根据经理ID获取他的员工
List<Employee> emps = new EmpService().getEmployees(mgrId);
result.put("data" , emps);
PrintWriter out = response.getWriter();
// 将Map包装成JSONObject后输出
out.print(new JSONObject(result));
}
}
3）EmpService.java 如下：
package org.crazyit.extjs.service;
import org.crazyit.extjs.domain.*;
import java.util.*;
/**
* Description:
* <br/>Program Name:
* <br/>Date:
* @author Yeeku.H.Lee kongyeeku@163.com
* @version 1.0
*/
public class EmpService
{
// 使用List集合模拟内存中数据库
static List<Employee> employeeDb
= new ArrayList<>();
// 添加员工数据
static {
employeeDb.add(new Employee(1, "如来" , "最高Boss", null));
employeeDb.add(new Employee(2, "唐僧" , "经理", 1));
employeeDb.add(new Employee(3, "孙悟空" , "打怪主力", 2));
employeeDb.add(new Employee(4, "猪八戒" , "美女爱好者", 2));