Ext.TreePanel基本配置参数
2012-10-11 17:01
337 查看
TreePanel基本配置参数:
//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头
show.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/extBase/resources/css/ext-all.css" />
<script type="text/javascript" src="/extBase/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extBase/ext-all.js"></script>
<title>simple tree1</title>
<script type="text/javascript">
/**
创建一个简单(静态)的树
*/
function createSimpleTreePanel(){
//因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).
var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点
var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));
var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.
vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
width: 300,
style:"margin:30",
height: 200,
root: vRoot
});
}
/**
创建异步简单树
*/
function createSimpleTreeLoader(){
//创建一个由treeLoader.js定义的节点结构[{...},{...}]
var vNode = new Ext.tree.TreeLoader({url:'/eg/base/tree/treeLoader.jsp'});
//创建一个根节点,将上面定义的子节点结构与根节点绑定.
var vRoot = new Ext.tree.AsyncTreeNode({text: '根节点',loader:vNode}) ;
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
style:"margin:30",
width: 300,
height: 200,
root: vRoot//绑定根节点.
});
}
/**
创建动态(从JSP文件动态载入)树
*/
function createSimpleDynamicTreeLoader(){
//创建一个节点,节点的结构由JSP文件提供
var vNode = new Ext.tree.TreeLoader({url:'treeLoader.jsp'});
//为该节点添加beforeload(点击节点之前触发)事件监听器.
vNode.on("beforeload",function(myLoader,node){
//myLoader.baseParams.parentId是为treeLoader.jsp传递参数,参数名为parentId,可以自己取名.node代表正要点击的节点对象
myLoader.baseParams.parentId = node.id=='root'?"":node.id;
}) ;
var vRoot = new Ext.tree.AsyncTreeNode({id: 'root',text: '根节点',loader: vNode}) ;
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
width: 300,
style:"margin:30",
height: 200,
root: vRoot//绑定根节点.
});
}
Ext.onReady(function(){
//createSimpleTreePanel();
//createSimpleTreeLoader();
createSimpleDynamicTreeLoader();
});
</script>
</head>
<body>
</body>
</html>
treeLoader.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String parentId = request.getParameter("parentId") ;
System.out.println(parentId) ;
if("".equals(parentId) || parentId==null){
out.print("[{id:\'bj\',text:\'北京\'},"+"{id:\'ll\',text:'辽宁'}]");
}else if("bj".equals(parentId)){
out.print("[{text: \'朝阳\',leaf: true},"+"{text: '东城',leaf: true}]");
}else if("ll".equals(parentId)){
out.print("[{text: \'沈阳\',leaf: true},"+"{text: '大连',leaf: true}]");
}
%>
//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头
show.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/extBase/resources/css/ext-all.css" />
<script type="text/javascript" src="/extBase/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extBase/ext-all.js"></script>
<title>simple tree1</title>
<script type="text/javascript">
/**
创建一个简单(静态)的树
*/
function createSimpleTreePanel(){
//因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).
var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点
var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));
var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.
vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
width: 300,
style:"margin:30",
height: 200,
root: vRoot
});
}
/**
创建异步简单树
*/
function createSimpleTreeLoader(){
//创建一个由treeLoader.js定义的节点结构[{...},{...}]
var vNode = new Ext.tree.TreeLoader({url:'/eg/base/tree/treeLoader.jsp'});
//创建一个根节点,将上面定义的子节点结构与根节点绑定.
var vRoot = new Ext.tree.AsyncTreeNode({text: '根节点',loader:vNode}) ;
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
style:"margin:30",
width: 300,
height: 200,
root: vRoot//绑定根节点.
});
}
/**
创建动态(从JSP文件动态载入)树
*/
function createSimpleDynamicTreeLoader(){
//创建一个节点,节点的结构由JSP文件提供
var vNode = new Ext.tree.TreeLoader({url:'treeLoader.jsp'});
//为该节点添加beforeload(点击节点之前触发)事件监听器.
vNode.on("beforeload",function(myLoader,node){
//myLoader.baseParams.parentId是为treeLoader.jsp传递参数,参数名为parentId,可以自己取名.node代表正要点击的节点对象
myLoader.baseParams.parentId = node.id=='root'?"":node.id;
}) ;
var vRoot = new Ext.tree.AsyncTreeNode({id: 'root',text: '根节点',loader: vNode}) ;
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
width: 300,
style:"margin:30",
height: 200,
root: vRoot//绑定根节点.
});
}
Ext.onReady(function(){
//createSimpleTreePanel();
//createSimpleTreeLoader();
createSimpleDynamicTreeLoader();
});
</script>
</head>
<body>
</body>
</html>
treeLoader.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String parentId = request.getParameter("parentId") ;
System.out.println(parentId) ;
if("".equals(parentId) || parentId==null){
out.print("[{id:\'bj\',text:\'北京\'},"+"{id:\'ll\',text:'辽宁'}]");
}else if("bj".equals(parentId)){
out.print("[{text: \'朝阳\',leaf: true},"+"{text: '东城',leaf: true}]");
}else if("ll".equals(parentId)){
out.print("[{text: \'沈阳\',leaf: true},"+"{text: '大连',leaf: true}]");
}
%>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- mongo入门--基本参数配置
- [Ext.Net] 1.2.0_Ext.Net.TreePanel 勾选“纠结”发送给服务器端的方法
- Ext JS TreePanel
- LINUX基本网络参数（一）基本配置文件
- nginx 基本配置与参数说明详细介绍
- Ext.tree.TreePanel 属性详解
- Struts2学习---基本配置，action，动态方法调用，action接收参数
- Ext.net TreePanel的Checkbox操作及父子联动
- samba服务器的基本配置(一）----参数详解
- nginx基本配置与参数说明
- Ext.tree.TreePanel,accordion布局基于SSH+JSON的系统级应用之菜单设计
- [Ext.Net]TreePanel自定义图标
- nginx.conf基本配置与参数说明
- [Ext.Net]TreePanel+gridPanel实例
- ExtJs2.0学习系列--Ext.TreePanel之第二式(可增删改的树)
- Ext.tree.TreePanel如何启用和控制节点拖拽功能
- [Ext.Net] 1.2.0_Ext.Net.TreePanel 勾选“纠结”发送给服务器端的方法
- ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
- MySQL 配置文件基本参数详解
- java_ log4j的基本配置参数