Extjs学习总结---checkbox的focus解决

Extjs中的checkbox无法获得焦点。通过重载可以解决这个问题。

Ext.override(Ext.form.Checkbox, {
			onRender : function(ct, position) {
				Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
				if (this.inputValue !== undefined) {
					this.el.dom.value = this.inputValue;
				}
				// this.el.addClass('x-hidden');
				this.innerWrap = this.el.wrap({
					// tabIndex: this.tabIndex,
					cls : this.baseCls + '-wrap-inner'
				});
				this.wrap = this.innerWrap.wrap({
					cls : this.baseCls + '-wrap'
				});
				this.imageEl = this.innerWrap.createChild({
					tag : 'img',
					src : Ext.BLANK_IMAGE_URL,
					cls : this.baseCls
				});
				if (this.boxLabel) {
					this.labelEl = this.innerWrap.createChild({
						tag : 'label',
						htmlFor : this.el.id,
						cls : 'x-form-cb-label',
						html : this.boxLabel
					});
				}
				// this.imageEl = this.innerWrap.createChild({
				// tag: 'img',
				// src: Ext.BLANK_IMAGE_URL,
				// cls: this.baseCls
				// }, this.el);
				if (this.checked) {
					this.setValue(true);
				} else {
					this.checked = this.el.dom.checked;
				}
				this.originalValue = this.checked;
			},
			afterRender : function() {
				Ext.form.Checkbox.superclass.afterRender.call(this);
				// this.wrap[this.checked ? 'addClass' :
				// 'removeClass'](this.checkedCls);
				this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
			},
			initCheckEvents : function() {
				// this.innerWrap.removeAllListeners();
				this.innerWrap.addClassOnOver(this.overCls);
				this.innerWrap.addClassOnClick(this.mouseDownCls);
				this.innerWrap.on('click', this.onClick, this);
				// this.innerWrap.on('keyup', this.onKeyUp, this);
			},
			onFocus : function(e) {
				Ext.form.Checkbox.superclass.onFocus.call(this, e);
				// this.el.addClass(this.focusCls);
				this.innerWrap.addClass(this.focusCls);
			},
			onBlur : function(e) {
				Ext.form.Checkbox.superclass.onBlur.call(this, e);
				// this.el.removeClass(this.focusCls);
				this.innerWrap.removeClass(this.focusCls);
			},
			onClick : function(e) {
				if (e.getTarget().htmlFor != this.el.dom.id) {
					if (e.getTarget() !== this.el.dom) {
						this.el.focus();
					}
					if (!this.disabled && !this.readOnly) {
						this.toggleValue();
					}
				}
				// e.stopEvent();
			},
			onEnable : Ext.form.Checkbox.superclass.onEnable,
			onDisable : Ext.form.Checkbox.superclass.onDisable,
			onKeyUp : undefined,
			setValue : function(v) {
				var checked = this.checked;
				this.checked = (v === true || v === 'true' || v == '1' || String(v)
						.toLowerCase() == 'on');
				if (this.rendered) {
					this.el.dom.checked = this.checked;
					this.el.dom.defaultChecked = this.checked;
					// this.wrap[this.checked ? 'addClass' :
					// 'removeClass'](this.checkedCls);
					this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
				}
				if (checked != this.checked) {
					this.fireEvent("check", this, this.checked);
					if (this.handler) {
						this.handler.call(this.scope || this, this,
								this.checked);
					}
				}
			},
			getResizeEl : function() {
				// if(!this.resizeEl){
				// this.resizeEl = Ext.isSafari ? this.wrap :
				// (this.wrap.up('.x-form-element', 5) || this.wrap);
				// }
				// return this.resizeEl;
				return this.wrap;
			}
		});
		Ext.override(Ext.form.Radio, {
					checkedCls : 'x-form-radio-checked'
				});

css

		<style type="text/css">
.x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap
	{
	height: auto;
}

.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap
	{
	height: auto;
}

.x-form-check-wrap,.x-form-radio-wrap {
	padding: 1px 0 3px;
	line-height: 18px;
}

.ext-ie .x-form-check-wrap,.ext-ie .x-form-radio-wrap {
	padding-top: 3px;
}

.ext-strict .ext-ie7 .x-form-check-wrap,.ext-strict .ext-ie7 .x-form-radio-wrap
	{
	padding-bottom: 1px;
}

.x-form-check-wrap-inner,.x-form-radio-wrap-inner {
	display: inline;
	padding: 0;
}

.x-form-check,.x-form-radio {
	height: 13px;
	width: 13px;
	vertical-align: bottom;
	margin: 2px 0;
}

.ext-ie .x-form-check,.ext-ie .x-form-radio {
	margin-top: 1px;
}

.ext-strict .ext-ie7 .x-form-check,.ext-strict .ext-ie7 .x-form-radio {
	margin-bottom: 4px;
}

.ext-opera .x-form-check,.ext-opera .x-form-radio {
	margin-top: 3px;
}

.x-form-check-focus .x-form-check,.x-form-check-over .x-form-check,.x-form-check-focus .x-form-radio,.x-form-check-over .x-form-radio
	{
	background-position: -13px 0;
}

.x-form-check-down .x-form-check,.x-form-check-down .x-form-radio {
	background-position: -26px 0;
}

.x-item-disabled .x-form-check,.x-item-disabled .x-form-radio {
	background-position: -39px 0;
}

.x-form-check-checked,.x-form-radio-checked {
	background-position: 0 -13px;
}

.x-form-check-focus .x-form-check-checked,.x-form-check-over .x-form-check-checked,.x-form-check-focus .x-form-radio-checked,.x-form-check-over .x-form-radio-checked
	{
	background-position: -13px -13px;
}

.x-form-check-down .x-form-check-checked,.x-form-check-down .x-form-radio-checked
	{
	background-position: -26px -13px;
}

.x-item-disabled .x-form-check-checked,.x-item-disabled .x-form-radio-checked
	{
	background-position: -39px -13px;
}

.x-form-check-wrap-inner input,.x-form-radio-wrap-inner input {
	position: absolute;
	-ms-filter: "alpha(opacity=0)";
	filter: alpha(opacity = 0);
	-moz-opacity: 0;
	opacity: 0;
}
</style>