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

erichua

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>