ExtJs TreePanel 使用帮助
tree :树 node:节点 1、全部展开 tree.expandAll();
2、全部收缩 tree.collapseAll();
3、得到父节点 node.parentNode
4、判断是否有父节点 node.parentNode==null
5、判断是否有子节点 node.hasChildNodes()
6、获取下一级所有子节点 node.eachChild(function(child) { })
7、获取选择的节点 tree.getSelectionModel().getSelectedNode()
8、设置选中节点 node.select()
9、上移节点 node.selectPrevious();
10、下移节点 node.selectNext();
11、获取节点ID node.id
12、获取节点值 node.text
13、获取节点提示 node.attributes.qtip 带选择框
14、获取选中的的节点
var check= tree.getChecked();
Ext.each(check ,function(node){}) 15、获取是否选择 node.getUI().checkbox.checked;
16、设置节点选择 node.ui.toggleCheck(true); //显示选中 node.attributes.checked = true; //赋值 17、设置一个新的节点
var newNode=new Ext.tree.TreeNode({id:'id',text:'text',iconCls:'icon-group',qtip:'tip'}); iconCls 导入的是CSS设置的背景图片(节点图标)
css写法: .x-tree-node-leaf .icon-group{ background-image:url(group.png);} 前.x-tree-node-leaf必写 18、插入新的节点 node.appendChild(newNode);
19、删除节点 node.remove(); 20 这里说的选中是指鼠标点击一个节点后,节点那一行出现浅蓝色背景的选中,而非checkbox的勾选 方法 Ext.tree.TreePanel.getSelectionModel().getSelectedNode(); Ext.tree.TreePanel.getSelectionModel()获得的是一个TreeSelectionModel对象, 这个TreeSelectionModel目前在Ext中有两个Ext.tree.DefaultSelectionModel和Ext.tree.MultiSelectionModel Ext.tree.MultiSelectionModel的获取选中节点的方法是getSelectedNodes (),这个返回的是节点数组,Ext.tree.DefaultSelectionModel.getSelectedNode()返回的是单个节点对象 21 选中节点和父节点 1)、父节点选择 function parentclick(node)
{
var parent=node.parentNode; //获取父节点
var flag=node.getUI().checkbox.checked; //判断是否选中
if(parent!=null ) //父节点不为空
{
parent.ui.toggleCheck(flag); //选中
parent.attributes.checked = flag; //给值
parentclick(parent); //递归调用选中父节点
}
} 2)、选择子节点 function treeclick(node)
{
var flag=node.getUI().checkbox.checked; //获取选中状态
if (node.hasChildNodes()) { //是否有子节点
node.eachChild(function(child) { //循环下一级的所有子节点
child.ui.toggleCheck(flag); //选中
child.attributes.checked = flag; //赋值
treeclick(child); //递归选中子节点
});
}
} 3)、2个函数合并执行 function check(node)
{
tree.suspendEvents(); //暂停所有监听事件的执行
treeclick(node);
parentclick(node);
tree.resumeEvents(); //重新开始所有监听事件的执行
} 注: 选中事件发生在子节点,但要通过toggleCheck()改变其父节点未被选中的状态,而一旦改变了父节点未被选中状态为选中状态,就会激发树中的<CheckChange Handler="check(node)" />事件,
每次激发,传入的节点值node一直在改变,陷入一个死循环。因此要加入suspendEvents()停止监听事件,执行完后再恢复监听 22 如果使用Ext.QuickTips.init()替换tree.expandAll(),则只显示根节点。
ExtJs TreePanel 使用帮助的更多相关文章
- Extjs treePanel过滤查询功能【转】
Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路: ...
- Extjs treePanel 的treestore重复加载问题解决
在Extjs 4.2.2 中构建一个treePanel 发现设置rootVisible后 ,treeStore中设置的autoLoad:false不启作用,在组件初始化的时候即加载数据源,造成数据重复 ...
- 73. 解决ExtJS TreePanel 的 iconCls设置问题
转自:https://blog.csdn.net/hanchuang213/article/details/62881568 很久没有写代码了,最近在做一个在线帮助网站,于是又捡起了 ExtJS,我用 ...
- Extjs treePanel 后台Json的两种构建方法
public string json = ""; public string QueryMenuTreeJson(string ParentID, string userId) { ...
- Javascript - ExtJs - TreePanel组件
TreePanel组件(Ext.tree.TreePanel)logogram:Ext.tree.Panel | xtype:treepanel 树与节点 树面板组件的根是源头,从根上拓展出其它的子节 ...
- Extjs TreePanel API详解
转自:http://web.qhwins.com/CSS-JS-XML/2011091312092944999107.html config定义{ animate : Boolean, contain ...
- ExtJs TreePanel 全选与反选
selectAll: function() { this.getRootNode().eachChild(function (child) { child.set('checked', true); ...
- Extjs treePanel 加载等待框
beforeload : { fn : function (store, operation, eOpts){ loadMask = new Ext.LoadMask(Ext.get(this.get ...
- 基于Extjs的web表单设计器 第三节——控件拖放
看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性 ...
随机推荐
- iOS开发-友盟分享(3)
iOS 友盟分享 这个主要是提到如何通过友盟去自定义分享的步骤: 一.肯定要去友盟官网下载最新的SDK包,然后将SDK导入到你的工程文件夹里面去: 二.注册友盟账号,将你的APP添加到你的账号里面然后 ...
- Linux操作系统shell与函数详解
shell和函数的定义 1. linux shell 函数 将一组命令集或语句形成一个可用的块, 这些语句块称为函数. 2. shell 函数的组成 函数名:函数名字,注意一个脚本中函数名要唯一, ...
- android: SQLite删除数据
删除数据对你来说应该就更简单了,因为它所需要用到的知识点你全部已经学过了. SQLiteDatabase 中提供了一个 delete()方法专门用于删除数据,这个方法接收三个参数,第一 个参数仍然是表 ...
- java综合
java环境变量配置:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html 1.导入项目 当下载了包含Eclipse 项目的源代 ...
- python coroutine测试
目的:实现一个类似于asyn await的用法,来方便的编写callback相关函数 from __future__ import print_functionimport timeimport th ...
- Zone.js 简介 & 抛砖引玉
Zone.js是angular团队参照NodeJS的Domain,Dart的Zone,为angular 2开发的核心组件. 一开始,我对Zone.js是拒绝的.我们知道类似的 Domain 模块,主要 ...
- 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题
使用setImage 都无法更换 刷新图片 找了很久 什么方法都找过,最后发现...... 原来是 上传的图片的命名问题... 每次上传的图片 保存后都是同样的图片, 所以返回路径都是一样... jc ...
- WPF Window 服务安装
一.安装服务 1.已管理员的身份启动CMD 2.输入 cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 回车 3.输入 InstallUtil.exe ...
- Navi.Soft30.产品.DataWindowNet.操作手册
1概述 1.1功能简介 Sybase公司的PowerBuilder开发工具,在以前VS工具没有成事以前,是相当风光的.微软都要与其合作,学习它Db方面的技术,才成就了SQLServer数据库.PB开发 ...
- web端视频直播网站的弊端和优势
在YY上市前后,国内涌出一批类YY视频直播或9158的秀场类网站. 比如六间房,酷六等等 这种web端视频服务基本依靠web本身的特性,用flash直播,靠CDN提供服务. 但是这样的架构有2个问题 ...