项目需要带清空按钮的文本框组件,但是在网上找了找没找到,就自己写了个。我用在项目中没有问题,就分享给大家。
/**
* 带按钮选项的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如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值
在ExtJs5中,开发人员有时需要自定义UI以满足特定的设计需求,比如去掉`textfield`组件的边框。在给定的描述中,我们看到开发者遇到了一个问题:默认情况下,ExtJs5的`textfield`组件有明显的边框,但通过添加特定的...
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
本文详细介绍了如何在ExtJS开发过程中解决文本框后带单位的问题。通过两种不同的方法——重写组件方法以及直接在父节点下创建子节点,我们成功地实现了这一功能。这些技术不仅可以应用于文本框,还可以扩展到其他...
6. **事件处理**:监听文件选择、点击上传按钮、上传成功和失败等事件,进行相应的操作,如清空选择的文件、更新进度条、向文件列表添加新项等。 7. **错误处理**:在上传过程中可能会遇到各种错误,如网络问题、...
工具栏项目可以是任意类型的 `ExtJS` 组件,如按钮、文本框等。在提供的代码示例中,可以看到以下几种类型的工具栏项目: 1. **文本**:直接放置纯文本作为工具栏的一部分,例如 `"վƣ"` 和 `"MAC:"`。 2. **...
ExtJS 3.x Upload组件由多个组件组成,包括文件选择按钮、进度条、取消上传按钮等。用户可以通过点击文件选择按钮选择要上传的文件,进度条则显示上传进度,而取消上传按钮则允许用户在上传过程中停止操作。 2. **...
ExtJS 4的Button组件还提供了一系列方法来控制和操作按钮的状态和行为,包括但不限于: - **enable()**:启用按钮,使其可被点击。 - **disable()**:禁用按钮,防止用户进行任何操作。 - **destroy()**:销毁按钮...
组件是ExtJS应用程序的基本构建块,可以是按钮、文本框、面板等。它们都有自己的配置选项、事件和方法,可以独立或组合使用来构建复杂的UI。 在创建YouTube视频播放组件时,我们首先需要一个容器来承载播放器。这...
extjs 自动为必填项增加提示后缀,如题此js代码可以为必填时使用,样例功能为在必填项后增加红色星号,如: 编码*(当然此星色为红色),也可以修改成其它内容符号、文字等
3. **Form(表单)**: ExtJS提供了多种表单组件,如文本框、下拉框、复选框、按钮等,以及表单验证功能,方便用户输入和提交数据。 4. **Tree(树形)**: Tree组件用于显示层次结构的数据,如目录结构或组织架构,...
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
标题提到的"ExtJS文字按钮列"是指在ExtJS表格中添加一列,该列包含的是文字按钮而非图片按钮。这样的设计使得用户可以更直观地理解按钮的功能,同时减少了对图形资源的依赖。 在官方3.3版本中,虽然默认提供的是...
Extjs的组件系统非常丰富,包括按钮、日期选择器、ComboBox等,它们都可以通过配置实现复杂的交互逻辑。数据管理部分涉及到了Extjs对Ajax请求的封装、数据代理、读取器、存储等概念。Extjs对分页、表单验证、表单...