Ext-tree
<%
/**
* @author lzb
* Created on 2008-12-11
* 练习使用Ext-tree
*
*/
%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<html>
<head>
<title>练习使用Ext-tree</title>
<!-- Ext css -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../forms.css"/>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
<!-- Ext js -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//一个简单的树，静态树
//1、代码的第一句使用new Ext.tree.TreeNode 类来创建一个树节点
//2、第二句使用树节点的root的appendChild 方法来往该节点中加入一个子节点
//3、最后直接使用new Ext.tree.TreePanel来创建一个树面板，要树面板的初始化参数中指定树的root 属性值为前面创建的root 节点，也就是树根节点
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
href:"http://www.baidu.com",
hrefTarget:"_self",
text:"树的根"});
//root.appendChild(new Ext.tree.TreeNode({
// id:"c1",
// text:"子节点"
// }));
var c1 = new Ext.tree.TreeNode({
id:"c1",
href:"http://www.google.cn",
hrefTarget:"_blank",
text:"sonNode"
});
root.appendChild(c1);
var tree=new Ext.tree.TreePanel({
renderTo:"tree1",
root:root,
width:200
});
tree.on("click",function(node,event){
alert("您点击了"+node.text);
})
c1.on("click",function(node,event){
alert(node.text);
})
});
//异步加载树(异步加载：数据不是一次发送给客户端的，而是根据用户的动作发送特定的数据)
//异步加载的url可以使jsp,js,或者是json
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"
});
var tree=new Ext.tree.TreePanel({
renderTo:"tree2",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.json"}),
width:100
});
});
//混合树
//如果一个AsyncTreeNode 节点在准备加载子节点的时候，如果该节点上没有定义loader，则会使用TreePanel 中定义的loader 作为加载器
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
href:"http://www.baidu.com",
hrefTarget:"_self",
text:"树的根"});
var c1 = new Ext.tree.TreeNode({
id:"hh_c1",
href:"http://www.google.cn",
hrefTarget:"_blank",
text:"sonNode1"
});
var c2 = new Ext.tree.AsyncTreeNode({
id:"hh_c2",
text:"sonNode2"
})
var c3 = new Ext.tree.AsyncTreeNode({
id:"hh_c3",
text:"sonNode3"
})
root.appendChild(c1);
root.appendChild(c2);
root.appendChild(c3);
var tree=new Ext.tree.TreePanel({
renderTo:"tree3",
root:root,
width:200,
loader:new Ext.tree.TreeLoader({
applyLoader:false,
url:"treedata.json"
})
});
});
</script>
</head>
<body>
<div id="tree1"></div>
<div id="tree2"></div>
<div id="tree3"></div>
</body>
</HTML>
/**
* @author lzb
* Created on 2008-12-11
* 练习使用Ext-tree
*
*/
%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<html>
<head>
<title>练习使用Ext-tree</title>
<!-- Ext css -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../forms.css"/>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
<!-- Ext js -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//一个简单的树，静态树
//1、代码的第一句使用new Ext.tree.TreeNode 类来创建一个树节点
//2、第二句使用树节点的root的appendChild 方法来往该节点中加入一个子节点
//3、最后直接使用new Ext.tree.TreePanel来创建一个树面板，要树面板的初始化参数中指定树的root 属性值为前面创建的root 节点，也就是树根节点
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
href:"http://www.baidu.com",
hrefTarget:"_self",
text:"树的根"});
//root.appendChild(new Ext.tree.TreeNode({
// id:"c1",
// text:"子节点"
// }));
var c1 = new Ext.tree.TreeNode({
id:"c1",
href:"http://www.google.cn",
hrefTarget:"_blank",
text:"sonNode"
});
root.appendChild(c1);
var tree=new Ext.tree.TreePanel({
renderTo:"tree1",
root:root,
width:200
});
tree.on("click",function(node,event){
alert("您点击了"+node.text);
})
c1.on("click",function(node,event){
alert(node.text);
})
});
//异步加载树(异步加载：数据不是一次发送给客户端的，而是根据用户的动作发送特定的数据)
//异步加载的url可以使jsp,js,或者是json
Ext.onReady(function(){
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"
});
var tree=new Ext.tree.TreePanel({
renderTo:"tree2",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.json"}),
width:100
});
});
//混合树
//如果一个AsyncTreeNode 节点在准备加载子节点的时候，如果该节点上没有定义loader，则会使用TreePanel 中定义的loader 作为加载器
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
href:"http://www.baidu.com",
hrefTarget:"_self",
text:"树的根"});
var c1 = new Ext.tree.TreeNode({
id:"hh_c1",
href:"http://www.google.cn",
hrefTarget:"_blank",
text:"sonNode1"
});
var c2 = new Ext.tree.AsyncTreeNode({
id:"hh_c2",
text:"sonNode2"
})
var c3 = new Ext.tree.AsyncTreeNode({
id:"hh_c3",
text:"sonNode3"
})
root.appendChild(c1);
root.appendChild(c2);
root.appendChild(c3);
var tree=new Ext.tree.TreePanel({
renderTo:"tree3",
root:root,
width:200,
loader:new Ext.tree.TreeLoader({
applyLoader:false,
url:"treedata.json"
})
});
});
</script>
</head>
<body>
<div id="tree1"></div>
<div id="tree2"></div>
<div id="tree3"></div>
</body>
</HTML>
