[extjs(2)] 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(2)] extjs第一个组件treepanel的更多相关文章
- Angular的第一个组件
创建组件 在vscode的命令窗口输入: ng generate component login --inline-template --inline-style 或者简写 ng g c login ...
- 【转载】COM 组件设计与应用(六)——用 ATL 写第一个组件
原文:http://vckbase.com/index.php/wv/1216.html 一.前言 1.与 <COM 组件设计与应用(五)>的内容基本一致.但本回讲解的是在 vc.net ...
- 【转载】COM 组件设计与应用(五)——用 ATL 写第一个组件
原文:http://vckbase.com/index.php/wv/1215.html 一.前言 1.如果你在使用 vc5.0 及以前的版本,请你升级为 vc6.0 或 vc.net 2003: 2 ...
- Extjs Hello extjs
<html > <head runat="server"> <title></title> <link rel="s ...
- react实战系列 —— react 的第一个组件
react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...
- ExtJS 4.2 第一个程序
本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
- 【ExtJS】各种获取元素组件方法
1.get().getDom().getCmp().getBody().getDoc(): get(id/obj): get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象, Ex ...
- ExtJs学习笔记之ComboBox组件
ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> ...
- ExtJs学习笔记之Button组件
按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...
随机推荐
- Java课程设计——GUI密码生成器团队博客
1.团队名称.团队成员介绍(需要有照片) 1.1团队名称 小黄人 1.2团队成员介绍 吴玲:组长,现任院就业会策划部副部长 郭琪容:组员,现任院硬件协会会长 2. 项目git地址 吴 玲 郭琪容 3. ...
- Java第十三周总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- 201521123048 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- 工厂模式 and 单例模式
工厂模式:使用工厂类使创建类与使用类分离,从而提高代码的易维护性,可扩展性等 工厂模式分位简单工厂模式和工厂方法模式 使用简单工厂模式的步骤: 1.创建父类及其子类 父类中有[ ...
- Java:静态内部类的使用目的、使用限制、与非静态内部类的对比
Java之静态内部类(static class) 在一个类中创建另外一个类,叫做成员内部类.这个成员内部类可以静态的(利用static关键字修饰),也可以是非静态的. 一.静态内部类的使用目的. 在 ...
- Day-17: 网络编程
---恢复内容开始--- 现有的互联网通讯方式,是服务器端的进程与客户端进程的通信.Python中进行网络编程,就是在Python程序本身这个进程内,连接别的服务器进程的通信端口进行通信. 互联网协议 ...
- 如何在CentOS上安装一个2048小游戏
如何在centos上安装一个2048小游戏 最近在学习CentOS系统,就琢磨着玩点什么,然后我看到有人在玩2048小游戏,所有我就在想,为啥不装一个2048小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...
- 《Head First Java》读书笔记(2) - Java面向对象思想
1.了解继承 对象继承实际上就是一种"is - a"的关系,如上图的"PantherMan is a SuperHero?",是,那么便属于继承的理解. 继承能 ...
- cas-单点登录-应用说明
单独在tomcat中启动cas 1, 我的百度网盘中有 cas 和 tomcat-cas 压缩包 http://pan.baidu.com/s/1bnxVRkF 直接解压缩就可以使用. 2, ...
- 【译】The Accidental DBA:Troubleshooting
最近重新翻看The Accidental DBA,将Troubleshooting部分稍作整理,方便以后查阅.此篇是Part 3Part 1:The Accidental DBA:SQL Server ...