ExtJS带清空按钮的文本框TextField组件
项目需要带清空按钮的文本框组件，但是在网上找了找没找到，就自己写了个。我用在项目中没有问题，就分享给大家。
/** * 带按钮选项的TextField组件 * * @class Ext.form.ClearableTextField * @extends Ext.form.TextField * @author zk */Ext.form.ClearableTextField = Ext.extend(Ext.form.TriggerField, {triggerStatus : 0, //0隐藏，1显示initComponent : function() {Ext.form.ClearableTextField.superclass.initComponent.call(this);this.addEvents('clear');this.triggerConfig = {tag : 'span',cls : 'x-form-twin-triggers',cn : [{tag : "img",src : Ext.BLANK_IMAGE_URL,cls : "x-form-trigger x-form-clear-trigger"}]};},getTrigger : function() {return this.trigger;},afterRender : function(){ Ext.form.ClearableTextField.superclass.afterRender.call(this); this.trigger.hide();},initTrigger : function(){var triggerField = this; triggerField.triggerStatus = 0; //默认 this.trigger.hide = function(){ var w = triggerField.width; this.dom.style.display = 'none'; triggerField.el.setWidth(w + triggerField.trigger.getWidth()); triggerField.triggerStatus = 0; }; this.trigger.show = function(){ var w = triggerField.width; this.dom.style.display = ''; triggerField.el.setWidth(w-triggerField.trigger.getWidth()); triggerField.triggerStatus = 1; }; this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true}); this.trigger.addClassOnOver('x-form-trigger-over'); this.trigger.addClassOnClick('x-form-trigger-click'); }, onResize : function(w, h){ Ext.form.TriggerField.superclass.onResize.call(this, w, h); },onTriggerClick : function() {if (this.readOnly || this.disabled) {return;}this.clearValue();this.fireEvent('clear', this);if (this.hasListener('change')) {this.fireEvent('change', this);}},onBlur : function() {Ext.form.ClearableTextField.superclass.onBlur.call(this);if (this.getValue()&&this.getValue().length > 0) {this.trigger.show();} else {this.trigger.hide();}},setValue : function(v) {Ext.form.ClearableTextField.superclass.setValue.call(this,v);if (this.getValue()&&this.getValue().length > 0) {this.trigger.show();} else {this.trigger.hide();}},clearValue : function() {this.setRawValue('');this.applyEmptyText();this.value = '';this.trigger.hide();},reset : function() { Ext.form.ClearableTextField.superclass.reset.call(this);if (this.getValue()&&this.getValue().length > 0) {this.trigger.show();} else {this.trigger.hide();}}});Ext.reg('cleartextfield', Ext.form.ClearableTextField);