ExtJS4.1.1下 异步加载树无法显示,该怎么处理
日期：2014-05-16 浏览次数：20916 次
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="/g
我为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="/g
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
