项目需要带清空按钮的文本框组件,但是在网上找了找没找到,就自己写了个。我用在项目中没有问题,就分享给大家。
/**
* 带按钮选项的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);
分享到:
相关推荐
ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。
Extjs的Regex的验证属性分两种情况,一种是只有红色提示框;另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来。 特别提示:在属性regex后要用 ...
Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
解决了应用ExtJS进行界面开发时, 文本框后带单位的问题
extjs 自动为必填项增加提示后缀,如题此js代码可以为必填时使用,样例功能为在必填项后增加红色星号,如: 编码*(当然此星色为红色),也可以修改成其它内容符号、文字等
ExtJS4.0图文实例——数据组件介绍及简单应用
ExtJs5 去掉textfield边框
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
ExtJS 4 button 按钮实例
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
extJs4 toolbar 工具条,代码例子
三、函数 getCmp(string _id):得到id为_id的组件对象。 getValue():得到文件框值。 四、其它 layout:只在在此布局下才能正确显示文件框的标签名,布局的宿主对象必面 是Ext.Container或者Ext.Container的子类。 ...
NULL 博文链接:https://xinjie2009.iteye.com/blog/2207007
NULL 博文链接:https://mackyhe.iteye.com/blog/1002134
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
extjs时间日期选择组件.
Extjs的日期控件,只能支持到日期选择,对时间的选择并不完善。而网上下载的控件,都是基于Ext.form.dateField 开发,在选中日期后自动选择,并隐藏此...在经过一番改造后,终于做好了一个带确认按钮的时间选择控件。