ExtJs CheckboxSelectionModel非レベルのカスタムコントロールを補完

ExtJSはCheckboxSelectionModelをしている場合、2級3級などの多段カスケードが存在することを考慮していないため、現在カスケードが存在する場合、上位を選択し、下位を選択することが多いが、実際には選択されておらず、視覚的にviewが選ばれただけである.プロジェクトの中でこのような情況に出会って、もともとインタフェースの原型を変えたいと思って、ただ需要はこのようにして、葛藤を変えて、気がふさぐと、CheckboxSelectionModelのソースコードを修正して、使う時、jsとcssを一緒に引用する必要があります:
js:

/*
 * Ext JS Library 2.0.0
 * created by:raoyifeng
 * created at:2012-03-01
 * [email protected]
 * 
 */
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;
}

画像を忘れてはいけませんが、添付ファイルはパッケージとしてダウンロードします.