[extjs] extjs第一个组件treepanel
Posted 与我同在
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[extjs] extjs第一个组件treepanel相关的知识，希望对你有一定的参考价值。
刚刚在接触extjs这个前段插件，由于公司是用这个来做前段的，所以有必要花点时间来掌握一下，下面是我自己的非常浅的学习总结，后期会慢慢添加的！！
一、TreePanel基本配置参数:
animate:true//展开,收缩动画,false时,则没有动画效果
autoHeight:true//自动高度,默认为false
enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
enableDrop:true//仅仅drop
lines:true//节点间的虚线条
loader:Ext.tree.TreeLoader//加载节点数据
root:Ext.tree.TreeNode//根节点
rootVisible:false//false不显示根节点,默认为true
trackMouseOver:false//false则mouseover无效果
useArrows:true//小箭头
二、TreeNode的基本配置参数:
checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
expanded:fasle//展开,默认不展开
href:"http:/www.cnblogs.com"//节点的链接地址
hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
leaf:true//叶子节点,看情况设置
qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
text:"节点文本"//节点文本
singleClickExpand:true//用单击文本展开,默认为双击
三、treepanel小例子
1、静态页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP \'main.jsp\' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" media="all"href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" language="javascript"> Ext.onReady(function(){ var mytree=new Ext.tree.TreePanel({ el:"container",//应用到的html元素id animate:true,//以动画形式伸展,收缩子节点 title:"Extjs静态树", collapsible:true, rootVisible:true,//是否显示根节点 autoScroll:true, //autoHeight:true, width:150, height : 300, lines:true,//节点之间连接的横竖线 loader:new Ext.tree.TreeLoader(),// root:new Ext.tree.AsyncTreeNode({ id:"root", text:"根节点",//节点名称 expanded:true,//展开 leaf:false,//是否为叶子节点 children:[{ text:\'子节点一\', leaf:true }, { id:\'child2\', text:\'子节点二\', children:[{ text:"111", id : \'cccc\', leaf:true } ] } ] }) }); mytree.render();//不要忘记render()下,不然不显示哦 }); </script> </head> <body> <div id="container"></div>//这个要与el里面的对应 </body> </html>
结果显示
第二种静态方法
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"Extjs静态树",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:150,
lines:true
});
//根节点
var root=new Ext.tree.TreeNode({
id:"root",
text:"控制面板",
expanded:true
});
//第一个子节点及其子节点
var sub1=new Ext.tree.TreeNode({
id:"news",
text:"新闻管理",
singleClickExpand:true
});
sub1.appendChild(new Ext.tree.TreeNode({
id:"addNews",
text:"添加新闻",
href:"http://www.baidu.com",
hrefTarget:"mainFrame",
qtip:"打开百度",
listeners:{//监听
"click":function(node,e){
alert(node.text)
}
}
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"editNews",
text:"编辑新闻"
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"delNews",
text:"删除新闻"
}));
root.appendChild(sub1);
root.appendChild(new Ext.tree.TreeNode({
id:"sys",
text:"系统设置"
}));
mytree.setRootNode(root);//设置根节点
mytree.render();//不要忘记render()下,不然不显示哦
});
结果
2.动态显示
对于我们来说最重要也就是动态插入了吧。至于前台这边大家都是差不多，后台代码我这里是用java,通过json来接收数据的！只需要把json数据同treepanel属性一一对应就可以了。
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"简单Extjs动态树",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
//autoHeight:true,
width:150,
height : 500,
lines:true,
//这里简简单单的loader的几行代码是取数据的,很经典哦
loader:new Ext.tree.TreeLoader({
dataUrl:"treeAction!syncMenu?date="+new Date()+""
})
});
后期有新的进展，我会继续添加到此博客的！！！！
以上是关于[extjs] extjs第一个组件treepanel的主要内容，如果未能解决你的问题，请参考以下文章
如何使用添加方法 Extjs 组件到另一个 Extjs 组件（moderntoolkit）