dynamic.js
-------------------------------------------------
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({
id:'0',//id为0
text:'根节点',//显示文字为0
children:[{//子节点
text:'loading',//显示文字为loading
iconCls: 'loading',//使用图标为loading 在index.html style 中定义
leaf:true//是叶子节点,不再包含子节点
}]
});
var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoader
var tree = new Ext.tree.TreePanel({//声明一个TreePanel显示tree
id:'tree',//id为tree
region:'west',//设定显示区域为东边,停靠在容器左边
split:true,//出现拖动条
collapseMode:'mini',//拖动条显示类型为mini,可出现拖动条中间的尖头
width: 210,//初始宽度
minSize: 210,//拖动最小宽度
maxSize: 300,//拖动最大宽度
collapsible: true,//允许隐藏
title: "树",//显示标题为树
loader: treeLoader,//指定数据载入的loader对象,现在定义为空
lines:true,//出现节点间虚线
autoScroll:true,//自动出现滚动条
root:root//根节点为 root 对象
});
tree.render('west'); // 渲染到层
root.on('expand',gettree);//当根节点展开后触发gettree事件
function gettree(node){
if(node.firstChild.text=='loading'){
var par = node.id;
Ext.Ajax.request({
url: '../../TreeHandler',
params: {id:par},
method: 'GET',
success: function(v){ //成功返回
var myData = JSON.parse(v.responseText); // 得到服务器返回的json串,并用json.js解析过对象数组
for(var i=0;i<myData.length;i ){
var cnode=new Ext.tree.AsyncTreeNode({
id:myData[i].id,//id 为服务器返回id 父节点id
text:myData[i].name,//显示内容为服务器返回id 父节点id
leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
children:[{//添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
text:'loading',
iconCls: 'loading',
leaf:true
}]
});
cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
node.appendChild(cnode);//将当前节点添加为待展开节点子节点
}
node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
},
failure: function2 // 失败
});
}
}
function function1(v){
var myData = JSON.parse(v.responseText); // 用JSON库将其反序列化成对象数组
for(var i=0;i<myData.length;i ){
var cnode=new Ext.tree.AsyncTreeNode({
id:myData[i].id,//id 为服务器返回id 父节点id
text:myData[i].name,//显示内容为服务器返回id 父节点id
leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
children:[{//添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
text:'loading',
iconCls: 'loading',
leaf:true
}]
});
cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
parent.appendChild(cnode);//将当前节点添加为待展开节点子节点
}
parent.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
}
function function2(){
alert("failure");
}
});
----------------------------------------------------------
TreeHandleServlet.java
----------------------------------------------------------
servlet中 doGet的方法
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String id = request.getParameter("id");
ArrayList al = new ArrayList();
int treeId = Integer.parseInt(id);
if(treeId < 5){
treeId = 5;
}
for (int i=0;i<treeId;i ){
TreeNode tn = new TreeNode();
tn.setId(10 i "");
tn.setName("tree" i);
tn.setLeaf(false);
al.add(tn);
}
JSONArray jsTree = JSONArray.fromObject(al); // 构造JSON字符串
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(jsTree); // 将 json 串写入输出流中
out.close();
}
--------------------------------------------------------------
-------------------------------------------------
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({
id:'0',//id为0
text:'根节点',//显示文字为0
children:[{//子节点
text:'loading',//显示文字为loading
iconCls: 'loading',//使用图标为loading 在index.html style 中定义
leaf:true//是叶子节点,不再包含子节点
}]
});
var treeLoader=new Ext.tree.TreeLoader();//指定一个空的TreeLoader
var tree = new Ext.tree.TreePanel({//声明一个TreePanel显示tree
id:'tree',//id为tree
region:'west',//设定显示区域为东边,停靠在容器左边
split:true,//出现拖动条
collapseMode:'mini',//拖动条显示类型为mini,可出现拖动条中间的尖头
width: 210,//初始宽度
minSize: 210,//拖动最小宽度
maxSize: 300,//拖动最大宽度
collapsible: true,//允许隐藏
title: "树",//显示标题为树
loader: treeLoader,//指定数据载入的loader对象,现在定义为空
lines:true,//出现节点间虚线
autoScroll:true,//自动出现滚动条
root:root//根节点为 root 对象
});
tree.render('west'); // 渲染到层
root.on('expand',gettree);//当根节点展开后触发gettree事件
function gettree(node){
if(node.firstChild.text=='loading'){
var par = node.id;
Ext.Ajax.request({
url: '../../TreeHandler',
params: {id:par},
method: 'GET',
success: function(v){ //成功返回
var myData = JSON.parse(v.responseText); // 得到服务器返回的json串,并用json.js解析过对象数组
for(var i=0;i<myData.length;i ){
var cnode=new Ext.tree.AsyncTreeNode({
id:myData[i].id,//id 为服务器返回id 父节点id
text:myData[i].name,//显示内容为服务器返回id 父节点id
leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
children:[{//添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
text:'loading',
iconCls: 'loading',
leaf:true
}]
});
cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
node.appendChild(cnode);//将当前节点添加为待展开节点子节点
}
node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
},
failure: function2 // 失败
});
}
}
function function1(v){
var myData = JSON.parse(v.responseText); // 用JSON库将其反序列化成对象数组
for(var i=0;i<myData.length;i ){
var cnode=new Ext.tree.AsyncTreeNode({
id:myData[i].id,//id 为服务器返回id 父节点id
text:myData[i].name,//显示内容为服务器返回id 父节点id
leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
children:[{//添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
text:'loading',
iconCls: 'loading',
leaf:true
}]
});
cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
parent.appendChild(cnode);//将当前节点添加为待展开节点子节点
}
parent.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
}
function function2(){
alert("failure");
}
});
----------------------------------------------------------
TreeHandleServlet.java
----------------------------------------------------------
servlet中 doGet的方法
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String id = request.getParameter("id");
ArrayList al = new ArrayList();
int treeId = Integer.parseInt(id);
if(treeId < 5){
treeId = 5;
}
for (int i=0;i<treeId;i ){
TreeNode tn = new TreeNode();
tn.setId(10 i "");
tn.setName("tree" i);
tn.setLeaf(false);
al.add(tn);
}
JSONArray jsTree = JSONArray.fromObject(al); // 构造JSON字符串
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(jsTree); // 将 json 串写入输出流中
out.close();
}
--------------------------------------------------------------
服务器端用到了 JSON java版的库:json-lib-2.2-jdk15.jar
该库依赖的包:ezmorph-1.0.4.jar commons-beanutils-1.6.jar commons-lang.jar
commons-collections-3.2.jar commons-httpclient.jar commons-logging.jar
客户端用到了 json2.js 库
顺便说一下json中的示例中有这么一段:
myData = JSON.parse(text, function (key, value) {
return key.indexOf('date') >= 0 ? new Date(value) : value;
});
JSON.parse(text, filter) ,filter是可选的,表示要过滤掉的数据