弥补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"> </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"> </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;
}

还不能将图片忘记了哈,附件为打包下载
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值