Extjs tree2
本案例中记载了Extjs中一棵树的形成以及各种案例集成,并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的,整理出来,方便以后查看。
JSP页面:
- <%@ page contentType="text/html;charset=UTF-8" %>
- <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
- <html>
- <head>
- <title>区域管理</title>
- <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/resources/css/ext-all.css" />
- <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/ux/treegrid/treegrid.css" />
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ext-all.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns.js"></script>
- <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid.js"></script>
- <script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
- <script type="text/javascript" src="${ctxStatic}/js/srcs/srcs-treegrid.js"></script>
- <script type="text/javascript">
- //项目根目录地址
- var ctxStatic = '${ctxStatic}';
- </script>
- </head>
- <body>
- <div id="container"></div>
- </body>
- </html>
js页面:
- Ext.onReady(function() {
- // 初始化节点提示qtip
- Ext.QuickTips.init();
- // 定义一个根节点
- var root = new Ext.tree.TreeNode({
- id : 'root',
- text : '树根',
- checked : true,
- qtip : '我是树根'
- });
- // 定义一个树叶或者枝
- var leaf1 = new Ext.tree.TreeNode({
- id : "leaf1",
- text : '我是树叶1',
- checked : true,
- qtip : '我是树叶'
- });
- var leaf2 = new Ext.tree.TreeNode({
- id : "leaf2",
- text : '我是树枝2',
- checked : true,
- qtip : '我是树枝'
- });
- var leaf3 = new Ext.tree.TreeNode({
- id : "leaf3",
- text : '我是树叶3',
- href : 'http://www.baidu.com',
- checked : true,
- qtip : '我是树叶'
- });
- var leaf4 = new Ext.tree.TreeNode({
- id : "leaf4",
- text : '我是树枝4',
- checked : true,
- qtip : '我是树枝'
- });
- var leaf5 = new Ext.tree.TreeNode({
- id : "leaf5",
- text : '我是树叶5',
- checked : true,
- qtip : '我是树叶'
- });
- var leaf6 = new Ext.tree.TreeNode({
- id : "leaf6",
- text : '我是树叶4',
- checked : true,
- qtip : '我是树叶'
- });
- root.appendChild(leaf1);
- root.appendChild(leaf2);
- leaf2.appendChild(leaf3);
- leaf2.appendChild(leaf4);
- leaf4.appendChild(leaf5);
- leaf4.appendChild(leaf6);
- // 定义一个菜单
- // var contextMenu = new Ext.menu.Menu({ items : [(
- // ),( )] }); contextMenu.showAt(event.getXY());
- // tree.on('contextmenu',treeContextHandler);
- //
- //
- // var root = new Ext.tree.AsyncTreeNode({ text:'i am a root', id:'root',
- // children:[{ text:'node1',leaf:true },{ text:'node2',leaf:true },{
- // text:'node3',leaf:true }] }); var loader = new Ext.tree.TreeLoader();
- // 定义一棵树
- var tree = new Ext.tree.TreePanel({
- renderTo : 'container',
- // loader : loader,
- root : root,
- title : '我是一颗小小树',// 树标题
- collapsible : true,// 树形是否有缩放功能
- autoHeight : true,// 自动高度,默认false
- animate : true,// 展开动画
- enableDrag : true,// 是否可以拖动(效果上)
- enableDD : true,// 不进可以拖动,还可以改变节点层次结构
- enableDrop : false,// 仅仅drop
- lines : true,// 节点间的虚线条是否显示
- rootVisible : true,// 是否显示根节点,默认true
- userArrows : true,// 是否显示小箭头
- // autoScroll : true,//是否显示滚动条
- // height : 150,
- width : 200
- });
- // 第一个参数为true,展开所有节点,false只展开一级。第二个参数为true,慢慢展开,显示展开,false,则不显示过程
- root.expand(false, true);
- // 编写树节点的单击事件
- tree.on('click', function(node, event) {
- // Ext.Msg.alert("信息提示","you clicked me!");
- Ext.Msg.show({
- title : '信息提示',
- msg : node.text,
- animEl : node.ui.textNode
- });
- // 为节点修改样式
- var ui = node.ui;
- ui.hide();
- (function() {
- ui.show();
- }).defer(2000);
- // ui.addClass("big");
- // (
- // function(){
- // ui.removeClass("big");
- // }
- // ).defer(5000);
- // 删除选中的节点
- // tree.getSelectionModel().getSelectedNode().remove();
- });
- // 编写树节点的双击事件
- tree.on('dblclick', function(node, event) {
- Ext.Msg.alert("信息提示", "you clicked me twice!");
- });
- // 编辑树节点的拖放事件
- tree.on('nodedrop', function(event) {
- Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
- + event.target.text + '上,掉落的方式是' + event.point);
- switch (event.point) {
- case 'append':
- Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '变成了'
- + event.target.text + '子节点');
- break;
- case 'above':
- Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
- + event.target.text + '和'
- + event.target.previousSibling.text + '之间');
- break;
- case 'below':
- Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
- + event.dropNode.previousSibling.text + '和'
- + event.target.nextSibling.text + '之间');
- break;
- }
- })
- // 对树节点进行排序的工具
- // new Ext.tree.TreeSorter(tree,{folderSort:true,dir:desc,property:'text'});
- // //编写树节点的双击事件 tree.on('expandnode',function(node,event){
- // Ext.Msg.alert("信息提示","expandnode!"); }); //编写树节点的双击事件
- // tree.on('collapsenode',function(node,event){
- // Ext.Msg.alert("信息提示","collapsenode!"); });
- var root2 = new Ext.tree.TreeNode({
- id : 'root2',
- text : '树根2',
- qtip : '我是树根2'
- });
- var tree2 = new Ext.tree.TreePanel({
- renderTo : 'container',
- root : root2,
- enableDrop : true,
- // enableDrag:true,
- title : '我是一颗小小草',
- collapsible : true,
- width : 200
- });
- root2.expand();
- });
一、Ext.tree.TreePanel
主要配置项:
root:树的根节点。
rootVisible:是否显示根节点,默认为true。
useArrows:是否在树中使用Vista样式箭头,默认为false。
lines:是否显示树线,默认为true。
loader:树节点的加载器,默认为Ext.tree.TreeLoader。
selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
pathSeparator:树节点路径的分隔符,默认为“/”。
singleExpand:是否一次只展开树中的一个节点,默认为true。
requestMethod:请求方法,可选值有POST、GET。
containerScroll:是否将树形面板注册到滚动管理器ScrollManager中。
主要方法:
collapseAll():收缩所有树节点
expandAll():展开所有树节点
getRootNode():获取根节点
getNodeById(String id):获取指定id的节点
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展开panel的body以便让其变得可见
expandPath( String path, [String attr], [Function callback] )展开当前TreePanel中的指定路径
getChecked( [String attribute], [TreeNode startNode] )获得选中的节点列表,或者被选中节点的某个指定的属性数组
selectPath( String path, [String attr], [Function callback] ) 从树中选中所给路径的节点
getSelectionModel():返回此TreePanel使用的选择模型
二、Ext.tree.TreeNode
主要配置项:
text:节点上的文本信息
qtip:节点上的提示信息
icon:节点图标对应的路径
iconCls:应用到节点图标上的样式
checked:当前节点的选择状态
true:在节点前显示一个选中状态的复选框
false:在节点前显示一个未选中状态的复选框
不指定该值:不显示任何复选框
href:节点的连接属性,默认为#
hrefTarget:显示节点连接的目标框架
editable:是否允许编辑,默认为true
expanded:是否展开节点,默认为false
disabled:是否禁用节点,默认为false
singleClickExpand:是否通过单击方式展开节点
allowChildren:是否允许当前节点具有子节点,默认为true
expandable:当不含子节点时,是否总显示一个加减图标,默认为false
uiProvider:节点的UI类,默认为Ext.tree.TreeNodeUI
主要属性:
text:节点上的文本信息
disabled:当前节点是否被禁用
主要方法:
collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):收缩当前节点
deep:是否级联收缩全部子节点
collapseChildNodes( [Boolean deep] ):收缩所有子节点
disable():禁用当前节点
enable():启用当前节点
ensureVisible( [Function callback], [Object scope] ):确保所有父节点都是展开的
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):展开当前节点
expandChildNodes( [Boolean deep] ):展开所有子节点
isExpanded():当前节点是否展开
isSelected():当前节点是否被选中
select():选择当前节点
setText( String text ):设置当前的文本
toggle():切换当前节点的展开和收缩状态
unselect():取消对当前节点的选择
getUI():取得节点的UI对象
三、Ext.tree.AsyncTreeNode
主要配置项:
loader:当前节点的树加载器,默认使用树中配置的树加载器
主要方法:
isLoaded():当前节点是否已经加载数据
reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数
Extjs tree2的更多相关文章
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
- ExtJS 4.2 第一个程序
本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
- ExtJS 4.2 业务开发(一)主页搭建
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...
- ExtJS 4.2 业务开发(二)数据展示和查询
本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...
- ExtJS 4.2 业务开发(三)数据添加和修改
接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
随机推荐
- SVN更新操作提示需要清理操作,清理操作提示乱码,更新SVN失败
1.下载sqlite3.exe,下载方式如下: 1):sqlite网址:https://www.sqlite.org/download.html (根据操作系统自行下载) 2.下载的文件解压后将sql ...
- 【hive】lateral view的使用
当使用UDTF函数的时候,hive只允许对拆分字段进行访问的 例如: select id,explode(arry1) from table; —错误 会报错FAILED: SemanticExcep ...
- 014——数组(十四)array_reduce array_slice array_splice array_sum
<?php /** */ //array_reduce()递归的用回调函数递归的对数组元素进行处理,返回处理后的值 /*$arr=array(1,2,3,4,5); function func( ...
- 由浅入深了解EventBus:(五)
事件分发 EventBus3.0的事件的分发时通过EventBus类中的post(粘性事件为postSticky)方法,post与postSticky的唯一区别就是,在postSticky内部首先会向 ...
- SC用法
转自:(http://blog.163.com/yf_handsome/blog/static/20238174200802495124164/) SC使用这样的语法: 1. SC [Serverna ...
- CSS3径向渐变linear-gradient
语法: 选择器{ background:linear-gradien(线性渐变的方向,起点颜色,终点颜色): } 第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left ...
- jfreechart 在jsp页面显示所画的图片(resin服务器的servelet配置是关键)(图片只过内存)
用的web服务器是resin服务器,在配置web.xml时需要注意,其实resin服务器的web.xml服务器配置和tomcat服务器的配置很像, 1. 我第一次按照自己的想法,想当然的在resin- ...
- UICollectionView 数据库元素分组 多种section分开显示
第一遍 复杂方法 : 数据库查询一个表中userID 然后进行分类 中间去重 获得ID个数 放到section 中 显示 #pragma mark - 查询不同的ID 各数 - (void)c ...
- Python3 移动文件——合集
文件/文件夹操作头文件 import os import shutil 参考 Python3批量移动指定文件到指定文件夹
- java程序编写需注意的问题
初学java,免不了很多注意事项 加分号 类名与文件名一致 javac fileName而非javac fileName.class ```java System.out.println(" ...