`
crabdave
  • 浏览: 1294810 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS TreeCheckNodeUI组件的使用 示例

EXTJavaScriptCSSUIperformance 
阅读更多

ExtJS TreeCheckNodeUI组件的使用 示例

效果：

 

 

创建调用的HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="extjs/ext-all.js"></script>
 <script type="text/javascript" src="TreeCheckNodeUI.js"></script>
 <script type="text/javascript" src="test.js"></script>
 

<style type="text/css">
</style>
<script>
Ext.onReady(function() {
  var tree = new Ext.tree.TreePanel({
  renderTo : document.body,
 
    //el:'tree-ct',
    width:568,
    height:300,
    checkModel: 'cascade',   //对树的级联多选
    onlyLeafCheckable: false,//对树所有结点都可选
    animate: false,
    rootVisible: false,
    autoScroll:true,
    loader: new Ext.tree.TreeLoader({
   url  :'./test.js',
     baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性
    }),
    root: new Ext.tree.AsyncTreeNode({ id:'0' })
   });
   tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
   //tree.render();
 });

</script>
</head>
<body>

</body>
</html>

 

test.js

[{
id: 1,
text: '子节点1',
leaf: true
},{
id: 2,
text: '儿子节点2',
children: [{
id: 3,
text: '孙子节点',
leaf: true
}]
}]

 

备注：

得放上服务下，不然test.js不能返回值噢！

 

TreeCheckNodeUI.js源码：

/**
 * @class Ext.ux.TreeCheckNodeUI
 * @extends Ext.tree.TreeNodeUI
 *
 * 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
 *
 * 扩展的功能点有：
 * 一、支持只对树的叶子进行选择
 *    只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
 *    使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
 *
 * 二、支持对树的单选
 *    只允许选择一个结点
 *    使用时，只需在声明树时，加上属性 checkModel: "single" 既可
 *
 * 二、支持对树的级联多选
 *    当选择结点时，自动选择该结点下的所有子结点，或该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
 *    使用时，只需在声明树时，加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可
 *
 * 三、添加"check"事件
 *    该事件会在树结点的checkbox发生改变时触发
 *    使用时，只需给树注册事件,如：
 *    tree.on("check",function(node,checked){...});
 *
 * 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
 *
 * 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.
 * 例如：
 *   var tree = new Ext.tree.TreePanel({
 *  el:'tree-ct',
 *  width:568,
 *  height:300,
 *  checkModel: 'cascade',   //对树的级联多选
 *  onlyLeafCheckable: false,//对树所有结点都可选
 *  animate: false,
 *  rootVisible: false,
 *  autoScroll:true,
 *  loader: new Ext.tree.DWRTreeLoader({
 *   dwrCall:Tmplt.getTmpltTree,
 *   baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性
 *  }),
 *  root: new Ext.tree.AsyncTreeNode({ id:'0' })
 * });
 * tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
 * tree.render();
 *
 */

Ext.ux.TreeCheckNodeUI = function() {
 //多选: 'multiple'(默认)
 //单选: 'single'
 //级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)
 this.checkModel = 'multiple';
 
 //only leaf can checked
 this.onlyLeafCheckable = false;
 
 Ext.ux.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.ux.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {

    renderElements : function(n, a, targetNode, bulkRender){
     var tree = n.getOwnerTree();
  this.checkModel = tree.checkModel || this.checkModel;
  this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
     
        // add some indent caching, this helps performance when rendering a large tree
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        //var cb = typeof a.checked == 'boolean';
  var cb = (!this.onlyLeafCheckable || a.leaf);
        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
            '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
            '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
            '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
            cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
            '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
             a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
            "</li>"].join('');

        var nel;
        if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
            this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
        }else{
            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
        }
       
        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];
        var cs = this.elNode.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];
        var index = 3;
        if(cb){
            this.checkbox = cs[3];
            Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    },
   
    // private
    check : function(checked){
        var n = this.node;
  var tree = n.getOwnerTree();
  this.checkModel = tree.checkModel || this.checkModel;
  
  if( checked === null ) {
   checked = this.checkbox.checked;
  } else {
   this.checkbox.checked = checked;
  }
  
  n.attributes.checked = checked;
  tree.fireEvent('check', n, checked);
  
  if(this.checkModel == 'single'){
   var checkedNodes = tree.getChecked();
   for(var i=0;i<checkedNodes.length;i++){
    var node = checkedNodes[i];
    if(node.id != n.id){
     node.getUI().checkbox.checked = false;
     node.attributes.checked = false;
     tree.fireEvent('check', node, false);
    }
   }
  } else if(!this.onlyLeafCheckable){
   if(this.checkModel == 'cascade' || this.checkModel == 'parentCascade'){
    var parentNode = n.parentNode;
    if(parentNode !== null) {
     this.parentCheck(parentNode,checked);
    }
   }
   if(this.checkModel == 'cascade' || this.checkModel == 'childCascade'){
    if( !n.expanded && !n.childrenRendered ) {
     n.expand(false,false,this.childCheck);
    }else {
     this.childCheck(n); 
    }
   }
  }
 },

   
    // private
 childCheck : function(node){
  var a = node.attributes;
  if(!a.leaf) {
   var cs = node.childNodes;
   var csui;
   for(var i = 0; i < cs.length; i++) {
    csui = cs[i].getUI();
    if(csui.checkbox.checked ^ a.checked)
     csui.check(a.checked);
   }
  }
 },
 
 // private
 parentCheck : function(node ,checked){
  var checkbox = node.getUI().checkbox;
  if(typeof checkbox == 'undefined')return ;
  if(!(checked ^ checkbox.checked))return;
  if(!checked && this.childHasChecked(node))return;
  checkbox.checked = checked;
  node.attributes.checked = checked;
  node.getOwnerTree().fireEvent('check', node, checked);
  
  var parentNode = node.parentNode;
  if( parentNode !== null){
   this.parentCheck(parentNode,checked);
  }
 },
 
 // private
 childHasChecked : function(node){
  var childNodes = node.childNodes;
  if(childNodes || childNodes.length>0){
   for(var i=0;i<childNodes.length;i++){
    if(childNodes[i].getUI().checkbox.checked)
     return true;
   }
  }
  return false;
 },
 
    toggleCheck : function(value){
     var cb = this.checkbox;
        if(cb){
            var checked = (value === undefined ? !cb.checked : value);
            this.check(checked);
        }
    }
});

分享到：
| 使用localXHR.js让ExtJS docs可以在本地浏 ...
评论
1 楼 lian819 2014-03-10  
哈利路亚, 真是个牛逼哄哄的组件.
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXTJS 上传组件及示例

    本篇文章将详细解析EXTJS中的上传组件及其示例，帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`（也称为FileField或UploadField）实现。这个组件提供了一个表单字段，用户...

    extjs 3.1 组件 使用

    在本篇文章中，我们将深入探讨如何在实际项目中使用ExtJS 3.1的组件。 首先，`css`目录包含了ExtJS 3.1的样式文件。这些CSS文件用于定义组件的外观和布局，包括颜色、字体、边距、边框等。在使用过程中，我们需要...

    ExtJS静态使用示例

    以下是对标题"ExtJS静态使用示例"和描述中涉及知识点的详细解释： 1. **ExtJS库**：ExtJS是Sencha公司开发的一个前端框架，它基于MVC（Model-View-Controller）设计模式，提供了丰富的UI组件和强大的数据管理能力。...

    EXTJS 4 树形表格组件使用示例

    在提供的压缩包文件"extjs4.1_TreeGrid"中，可能包含了一些EXTJS 4树形表格组件的示例代码和资源，通过学习和分析这些示例，你可以更好地理解如何在项目中应用这个组件。 总结来说，EXTJS 4的树形表格组件是一个...

    ExtJs各组件简单应用例子导入到eclipse即可

    1. **下载ExtJS组件示例**：首先，你需要从官方或者其他可靠的源获取ExtJS的组件示例代码。这些示例通常包括HTML文件、JavaScript文件和可能的CSS文件，它们展示了如何在实际项目中使用各种组件。 2. **创建Eclipse...

    extjs3.0开发包含示例api

    示例代码是学习EXTJS 3.0的重要途径，通过查看和分析示例，开发者可以快速掌握各种组件的使用方法和功能。示例通常包括以下内容： 1. **基础组件示例**：如创建基本的按钮、文本框、下拉列表等。 2. **高级组件...

    extjs后台交互完整示例

    总的来说，这个示例将帮助我们理解如何使用ExtJS的Store、Model、Proxy和Controller等组件与后台服务器进行有效的数据交互，从而实现数据的加载、添加、编辑和删除等操作。通过学习这个示例，开发者可以掌握如何构建...

    Extjs配置文件和示例文件

    通过理解和使用这些配置文件、示例JSP和js程序，开发者可以深入理解ExtJS的工作原理，掌握如何配置和构建复杂Web应用程序。同时，这也是一个很好的起点，对于初学者来说，通过实践这些示例，能够快速提升ExtJS的开发...

    ExtJS6 MVC 精简示例

    最新版本，ExtJS6 MVC 精简示例!!!，一个可以参考的小例子！

    extjs C#控件全示例

    这个示例集合为开发者提供了丰富的控件使用方法，展示了如何在C#环境中有效地利用ExtJS进行前端界面的构建。 【描述】中的"封装的extjs2.0"表明该示例集是将ExtJS 2.0的功能与C#编程语言相结合，创建了一个易于理解...

    EXTJS4导出excel示例

    EXTJS4的核心是其组件模型，包括表格（Grid）等数据展示组件，这些组件可以与服务器端进行交互，处理各种数据操作。在EXTJS4中，导出表格数据到Excel通常涉及以下几个关键步骤： 1. **准备数据**：首先，你需要确保...

    ExtJs 4.1 mvc 简单示例

    在这个"ExtJs 4.1 mvc 简单示例"中，我们将深入探讨如何在ExtJS 4.1中应用MVC模式来创建一个简单的应用程序。 首先，让我们来看看核心组件： 1. **index.html**：这是Web应用的入口点，通常包含HTML结构以及必要的...

    extjs portal组件代码

    这个文件夹可能包含Portal组件的示例代码、样式表、JavaScript文件以及可能的数据源文件。你需要正确引用这些资源，以确保Portal组件能够正常运行。 为了进一步了解EXTJS Portal组件的用法，你需要熟悉EXTJS的MVC...

    extjs4.1部分控件示例

    extjs4.1部分控件示例 MVC2 VS2010

    几个不错的EXTJS拓展组件

    使用这些EXTJS扩展组件，开发者可以直接引用到自己的项目中，节省开发时间和成本，同时也能提高应用的专业性和用户体验。只需根据项目需求，挑选合适的组件进行集成，就能快速构建出功能强大且用户友好的应用程序。 ...

    ExtJs使用示例代码之窗口组件和异步请求

    ExtJs使用示例代码之窗口组件和异步请求

    Extjs树分页组件扩展

    在ExtJS中，树形（Tree）组件是一种用于展示层级数据的强大工具，它允许用户以树状结构浏览和操作数据。然而，在处理大量数据时，一次性加载所有节点可能导致页面响应变慢，这时就需要引入分页功能。"Extjs树分页...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    6. **开始开发**: 现在你可以开始使用Spket的强大功能，如代码提示、自动完成、语法检查和调试，来提高你的ExtJS开发效率。 通过以上步骤，你可以充分利用Spket的特性，高效地进行ExtJS 3.0的开发工作。Spket的强大...

Magicbox
Global site tag (gtag.js) - Google Analytics