`
Brooke
  • 浏览: 1182205 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

弥补ExtJs CheckboxSelectionModel不能级联的自定义控件

 
阅读更多
由于 ExtJS 在做CheckboxSelectionModel的时候,没有考虑到会存在二级 三级等多级级联,导致目前存在做级联的时候,选择上级,往往会把下级 下下级选中,而实际上并没有被选中,只是视觉上view被选中了而已。项目中遇到此种情况,本来想改变界面原型的,单需求就这个样,改纠结了,一郁闷之下,将CheckboxSelectionModel的源代码做了修改,在使用的时候,需要将js和css一并引用:
js:
/*
 * Ext JS Library 2.0.0
 * created by:raoyifeng
 * created at:2012-03-01
 * licensing@extjs.com
 * 
 */
Ext.grid.MyCheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {

    header: '<div class="x-grid3-hd-checker-my">&#160;</div>',
    singleSelect:true,
    width: 20,
    sortable: false,
	menuDisabled:true,
    fixed:true,
    dataIndex: '',
    id: 'checker',
    initEvents : function(){
		Ext.grid.MyCheckboxSelectionModel.superclass.initEvents.call(this);
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
            Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
        }, this);
    },
    onMouseDown : function(e, t){
    	var hd = Ext.fly(t);
         if(e.button === 0 && hd.hasClass('x-grid3-row-checker-my')){ // Only fire if left-click
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            if(row){
                var index = row.rowIndex;
                if(this.isSelected(index)){
                    this.deselectRow(index);
                }else{
                    this.selectRow(index, true);
                }
            }
        }
        
        var isChecked = hd.hasClass('x-grid3-row-checker-on-my');
         if(isChecked){
        	 hd.removeClass('x-grid3-row-checker-on-my');
         }else{
        	hd.addClass('x-grid3-row-checker-on-my');
         }
    },
    onHdMouseDown : function(e, t){
        if(t.className == 'x-grid3-hd-checker-my'){
            e.stopEvent();
            var hd = Ext.fly(t.parentNode);
           

            
           	var parentNode=hd.parent().parent().parent().parent().parent().parent().parent().parent();
        	var hdP=Ext.fly(parentNode);
        	var childs=hdP.query('.x-grid3-row-checker-my');
        	var isChecked = hd.hasClass('x-grid3-hd-checker-on-my');
            if(isChecked){
                hd.removeClass('x-grid3-hd-checker-on-my');
                this.clearSelections();
                if(childs!=null){
	                for(i=0;i<childs.length;i++){
	                	Ext.fly(childs[i]).removeClass('x-grid3-row-checker-on-my');
	                }
                }
            }else{
                hd.addClass('x-grid3-hd-checker-on-my');
                this.selectAll();
                if(childs!=null){
	                for(i=0;i<childs.length;i++){
	                	Ext.fly(childs[i]).addClass('x-grid3-row-checker-on-my');
	                }
                }
            }
        }
    },
    renderer : function(v, p, record){
        return '<div class="x-grid3-row-checker-my">&#160;</div>';
    }
});

.x-grid3-hd-row td,.x-grid3-row-my td,.x-grid3-summary-row td{font:normal 11px arial,tahoma,helvetica,sans-serif;-moz-outline:none;-moz-user-focus:normal;}
.x-grid3-row-my td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px;-moz-user-select:none;}
.x-grid3-row-my .x-grid3-marker{padding:3px;}
.x-grid3-row-my{cursor:default;border:1px solid #ededed;border-top-color:#fff;width:100%;}

.x-grid3-row-checker-my,.x-grid3-hd-checker-my{width:100%;height:18px;background-position:2px 2px;background-repeat:no-repeat;background-color:transparent;background-image:url(images/row-check-sprite.gif);}
.x-grid3-row-my .x-grid3-row-checker-my{background-position:2px 2px;}
.x-grid3-row-selected-my .x-grid3-row-checker-my,.x-grid3-hd-checker-on-my .x-grid3-hd-checker-my{background-position:-23px 2px;}
.x-grid3-hd-checker-my{background-position:2px 3px;}
.x-grid3-hd-checker-on-my .x-grid3-hd-checker-my,.x-grid3-row-checker-on-my{background-position:-23px 3px;}


.x-grid3-row-checker-my, .x-grid3-hd-checker-my {
    width:100%;
    height:18px;
    background-position:2px 2px;
    background-repeat:no-repeat;
    background-color:transparent;
	 background-image:url(images/row-check-sprite.gif);
}
.x-grid3-row-my .x-grid3-row-checker-my {
    background-position:2px 2px;
}
.x-grid3-row-selected-my .x-grid3-row-checker-my, .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my {
    background-position:-23px 2px;
}
.x-grid3-hd-checker-my {
    background-position:2px 3px;
}
.x-grid3-hd-checker-on-my .x-grid3-hd-checker-my, .x-grid3-row-checker-on-my{
    background-position:-23px 3px;
}

.x-grid3-hd-row-my td, .x-grid3-row-my-my td, .x-grid3-summary-row-my td{
	font:normal 11px arial, tahoma, helvetica, sans-serif;
    -moz-outline: none;
	-moz-user-focus: normal;
}
.x-grid3-row-my td, .x-grid3-summary-row-my td {
    line-height:13px;
    vertical-align: top;
	padding-left:1px;
    padding-right:1px;
    -moz-user-select: none;
}

.x-grid3-row-my .x-grid3-marker-my {
    padding:3px;
}

.x-grid3-row-my {
	cursor: default;
    border:1px solid #ededed;
    border-top-color:#fff;
    /*border-bottom: 1px solid #ededed;*/
    width:100%;
}

.x-grid3-row-checker-on-my{
    background-position:-23px 3px;
}

还不能将图片忘记了哈,附件为打包下载
分享到:
评论

相关推荐

    ExtJS4.2 tree 级联选择

    ExtJS4.2 Tree 级联选择是一个用于构建用户界面的功能,特别是在处理层次结构数据时非常有用。在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有...

    extjs自定义控件

    自定义控件允许开发者根据项目需求创建独特的用户界面元素,这些元素可能不包含在ExtJS的默认组件库中。下面将详细介绍ExtJS自定义控件的相关知识点。 1. **自定义控件基础** - **组件模型**:ExtJS基于MVC(Model...

    EXTJS 自定义combo控件

    xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法

    ExtJs5 日期自定义控件 精确到时分秒

    该代码仅适用于ExtJs5.x, 使用方法: 在Extjs5.x.js文件后引入以下两文件,注意顺序和路径: 例如: &lt;script type="text/javascript" src="ext/5.1/ext-all-debug.js"&gt;&lt;/script&gt; ${src}/DateTimePicker.js"&gt; ${src...

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...

    extjs日期+时间控件

    2. **日期时间控件(DateTime Field)**:在ExtJS中,日期和时间的输入通常通过`Ext.form.field.Date`和`Ext.form.field.Time`实现,但为了同时处理日期和时间,可以使用`Ext.picker.DateTime`或自定义组合控件。...

    extjs 微调控件,时间微调控件,微调,javascript 微调

    理解并掌握这些知识点,你就能有效地在ExtJS应用中实现和使用微调控件,为用户提供直观且易用的交互体验。通过实践和调试压缩包中的"spinner"文件,你可以深入理解其工作原理,并将这些知识应用到自己的项目中。

    ExtJs4.1.1a 异步树&级联选择

    说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....

    extjs6.2月份年份控件.rar

    标题提到的"extjs6.2月份年份控件.rar"是一个针对EXTJS 6.2版本定制的日期选择组件,它专注于年份的选择,而不涉及具体的月份和日期。这种控件在某些特定场景下非常有用,例如只需要用户输入年份的信息时。 EXTJS ...

    ExtJS时间控件、IP输入控件【控件】

    通过这个压缩包,开发者可以学习如何自定义ExtJS组件来满足特定需求,如创建具有特定行为的时间选择器和IP地址输入框。这不仅涉及ExtJS API的使用,还包括对JavaScript和HTML的理解,以及前端开发的基本原理。对于想...

    Ext自定义控件库

    自定义控件库是ExtJS开发中的一个重要资源,它体现了开发者对于业务理解和技术实践的积累,可以帮助团队快速开发出高质量的应用。在实际使用时,应根据具体需求选择合适的控件,并结合自身项目的特点进行适当的修改...

    extjs3.2、3.3 时间控件 日期控件扩展

    总之,“extjs3.2、3.3 时间控件 日期控件扩展”是关于如何在ExtJS 3.x版本中使用和自定义日期及时间选择器的知识点,涵盖了基本使用、扩展开发、实际应用等多个方面。通过深入理解这些概念,开发者可以创建出更加...

    extjs时间控件精确秒

    在“EXTJS时间控件精确秒”这个主题中,我们将深入探讨EXTJS如何实现时间控件的秒级精确选择,以及如何自定义和优化这一功能。 EXTJS的时间控件主要通过`Ext.form.field.Time`类来实现。这个类提供了一个标准的时间...

    extjs3.0 日期时间控件

    在标签中提到的"扩展日期控件"可能指的是DateTimeField组件在ExtJS中的扩展功能,比如自定义格式化、验证规则、事件监听等。这些扩展功能增强了标准日期时间选择器的灵活性和可定制性,以满足不同项目的需求。 在...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...

    extjs 4.0 日期时间控件

    8. **自定义模板**:如果你对默认的显示样式不满意,可以自定义模板,以满足特定的设计需求。 9. ** Accessibility**:ExtJS 4.0也考虑了无障碍性,日期时间控件可以配合键盘导航和屏幕阅读器使用,符合WCAG 2.0...

    ExtJs6.2中包含文本及时间选择框的自定义查询控件的解决方案

    ### ExtJs 6.2 中包含文本及时间选择框的自定义查询控件解决方案 在ExtJs 6.2框架中实现一个具有文本输入与时间选择功能的自定义查询控件是一个常见但实用的需求。本篇文章将详细介绍如何设计并实现这样一个控件,...

    extjs中 google 不兼容 datefield 控件

    在本篇文章中,我们将深入探讨一个具体的技术问题:在ExtJS框架中,Google浏览器与DateField控件的不兼容性问题。这个问题对于那些正在使用ExtJS进行Web应用程序开发的开发者来说,是一个非常实用且需要解决的技术...

Global site tag (gtag.js) - Google Analytics