extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

 更新时间:2013年04月02日 15:13:05   作者:  
treePanel+chekBox全部选中以及清空选中,想必大家在学习使用过程中都见过这种效果吧,接下来为大家详细介绍下实现过程及细节,感兴趣的朋友可以参考下哈
复制代码 代码如下:

//树
var treePanel = new Ext.tree.TreePanel({
id:'ptree',
region:'west',
layout:'anchor',
border:false,
rootVisible: false,
root:{},
listeners:{
render: function() {
authorityTree(treePanel); /*渲染树*/
},
checkchange: function(node, state) {
if (node.parentNode != null) {
//选中子节点让相应的父节点选中
var pNode = node.parentNode;
if (state || treePanel.getChecked(id, pNode) == "") {
pNode.ui.toggleCheck(state);// 触发父节点被选中
pNode.attributes.checked = state;
}
}
treeId = node.attributes.id;
treeName = node.attributes.text;
}
}
});
//操作按钮
tbar: [{
id: 'btnQingKong',
text: '清空',
iconCls: 'winupdate-icon',
handler: function() {
var nodes = Ext.getCmp('ptree').getChecked();
if (nodes && nodes.length) {
for (var i = 0; i < nodes.length; i++) {
//设置UI状态为未选中状态
nodes[i].getUI().toggleCheck(false);
//设置节点属性为未选中状态
nodes[i].attributes.checked = false;
}
}
}
},{
id: 'btnQuanXuan',
text: '全选',
iconCls: 'winupdate-icon',
handler: function() {
var nodeT = Ext.getCmp('ptree').getRootNode();
treeCheckTrue(nodeT);
}
}]
/**
*checkTree全选
*/
var treeCheckTrue = function(node)
{
node.eachChild(function (child) {
child.getUI().toggleCheck(true);
child.attributes.checked = true;
treeCheckTrue(child);
});
}
/**
*checkTree清空
*/
var treeCheckfalse = function(tree)
{
var nodes = tree.getChecked();
if(nodes && nodes.length){
for(var i=0;i<nodes.length;i++){
//设置UI状态为未选中状态
nodes[i].getUI().toggleCheck(false);
//设置节点属性为未选中状态
nodes[i].attributes.checked=false;
}
}
}

相关文章

  • extjs 为某个事件设置拦截器

    extjs 为某个事件设置拦截器

    Ext.util.Observable有一个重要的功能,可以为某个事件设置拦截器,统一管理方法的处罚。使用capture()和releaseCapture()来实现这个功能。
    2010-01-01
  • Exjs 入门篇

    Exjs 入门篇

    Extjs是从yui-ext发展来的一套ajax控件,是一套完整的富客户端解决方案,也因为功能完整,ext-all.js有400多k(最新的extjs3.2.0 有600多k),以为是基于js和css的功能实现,对客户端机器性能也有一定的要求,比如对ie6以下版本的不支持。
    2010-04-04
  • extjs 如何给column 加上提示

    extjs 如何给column 加上提示

    本节主要介绍了extjs 如何给column 加上提示,需要的朋友可以参考下
    2014-07-07
  • extjs grid设置某列背景颜色和字体颜色的实现方法

    extjs grid设置某列背景颜色和字体颜色的实现方法

    extjs grid设置某列背景颜色和字体颜色的实现步骤,需要的朋友可以参考下。
    2010-09-09
  • 常用Extjs工具:Extjs.util.Format使用方法

    常用Extjs工具:Extjs.util.Format使用方法

    常用Extjs工具:Extjs.util.Format使用方法,需要的朋友可以参考下
    2012-03-03
  • ExtJS 配置和表格控件使用

    ExtJS 配置和表格控件使用

    ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库,所以非常有学习和使用价值,如果你还没有接触过ExtJS或者压根对其不感兴趣,那么没有必要看下去了
    2009-09-09
  • extjs 学习笔记(一) 一些基础知识

    extjs 学习笔记(一) 一些基础知识

    相信很多人对使用js进行客户端的编程比较头大,其实现在已经有了很多优秀的js库,可以大大简化js编程的工作量,其中,jquery和extjs就是两款非常优秀的js库。
    2009-10-10
  • Extjs4中的分页应用结合前后台

    Extjs4中的分页应用结合前后台

    本文为大家介绍下Extjs4中的分页如何使用且结合前后台,具体的示例如下,感兴趣的朋友可以参考下
    2013-12-12
  • 学习ExtJS TextField常用方法

    学习ExtJS TextField常用方法

    ExtJS TextField常用方法
    2009-10-10
  • Extjs学习笔记之六 面版

    Extjs学习笔记之六 面版

    面版表示页面上的一块相对独立的区域,利用传统的html+css要构建灵活统一的区域并非易事。
    2010-01-01

最新评论