[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. 当出发点 ...
随机推荐
- 201521123100《Java程序设计》 第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. A: 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结 ...
- 201521123031 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 1.将Student对象(属性:int id, String name,int age,dou ...
- Java多线程高并发学习笔记(二)——深入理解ReentrantLock与Condition
锁的概念 从jdk发行1.5版本之后,在原来synchronize的基础上,增加了重入锁ReentrantLock. 本文就不介绍synchronize了,有兴趣的同学可以去了解一下,本文重点介绍Re ...
- Java面试准备
今天我们会分为四个部分来谈论这个问题,由于我本身是Java出身,因此关于主语言的问题,都是与Java相关,其它语言的同学可以选择性忽略.此外,面试的时候一般面试官的问题都是环环相扣,逐渐深入的,这点在 ...
- 关于数据库中datareader的用法
1.C#中提供的DataReader可以从数据库中每次提取一条数据. using System; using System.Collections.Generic; using System.Comp ...
- 实例讲解webpack的基本使用第一篇
更新文章不容易,尤其是更新高质量的文章更加不易,因此为了节约时间,闲话就不多说了.关于webpack的介绍,webpack是用来干嘛的,这些基础概念性的东西,就不在此赘述,下面直接开始正题. webp ...
- Java数据结构和算法总结-数组、二分查找
前言:在平时开发中数组几乎是最基本也是最常用的数据类型,相比链表.二叉树等又简单很多,所以在学习数据和算法时用数组来作为一个起点再合适不过了.本篇博文的所有代码已上传 github ,对应工程的 ar ...
- 均值滤波去除图像噪声的matlab程序
所谓均值滤波实际上就是用均值替代原图像中的各个像素值. 均值滤波的方法是:对待处理的当前像素,选择一个模板,该模板为其近邻的若干像素组成,用模板中的像素的均值来替代原像素. 优点:算法简单,计算速度快 ...
- Docker入门之四搭建私有仓库
前面学习了下镜像和容器,今天来学习下仓库,来搭建本地私有仓库.当然可以使用远程的共有的仓库,但在企业中有的还是放在本地,所以需要搭建私有仓库. 一.搭建仓库 可以在容器中run一个仓库镜像. dock ...
- MySQL or MariaDB 错误解决方法之报错代码1045
phpMyAdmin登录报错:mysqli_real_connect(): (28000/1045): Access denied for user 'root'@'localhost' (using ...