`
bdk82924
  • 浏览: 564911 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Ext Textfield框必填项 *号

    博客分类:
  • Web
 
阅读更多


方法1:在items中加*号
var shortName = new Ext.form.TextField({
			fieldLabel : '客户简称',
			name : 'shortName',
			allowBlank : false,
			blankText : '客户简称不能为空',
			width : 100
		});
var formPanel = new Ext.form.FormPanel({
	layout : 'table',
	layoutConfig : {
		columns : 3
	},
	items : [{
		layout : 'form',
		items : [{
			layout : 'table',
			items : [{
						layout : 'form',
						items : [shortName]
					}, {
						html : '<font id="noFont" class="x-form-item" style="padding-left:1px" color="red">*</font>'
					}]
		}]
	}]
})






方法2:覆写onRender方法并添加个sideText属性,并定义样式x-form-sideText
/**
 * 适用于TextField、NumberField(转自互联网)
 */
Ext.override(Ext.form.TextField, {
			sideText : '',
			onRender : function(ct, position) {
				Ext.form.TextField.superclass.onRender.call(this, ct, position);
				if (this.sideText != '' && !this.triggerAction) {
					this.sideEl = ct.createChild({
								tag : 'div',
								html : this.sideText
							});
					this.sideEl.addClass('x-form-sideText');
				}
			}
		});
/**
 * 适用于ComboBox
 */
Ext.override(Ext.form.ComboBox, {
			sideText : '',
			onRender : function(ct, position) {
				Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
				if (this.sideText != '') {
					this.sideEl = ct.first('div').createChild({
								tag : 'div',
								style : 'padding-left: 19px; ',
								html : this.sideText
							});
					this.sideEl.addClass('x-form-sideText');
				}
				if (this.hiddenName) {
					this.hiddenField = this.el.insertSibling({
								tag : 'input',
								type : 'hidden',
								name : this.hiddenName,
								id : (this.hiddenId || this.hiddenName)
							}, 'before', true);

					// prevent input submission
					this.el.dom.removeAttribute('name');
				}
				if (Ext.isGecko) {
					this.el.dom.setAttribute('autocomplete', 'off');
				}

				if (!this.lazyInit) {
					this.initList();
				} else {
					this.on('focus', this.initList, this, {
								single : true
							});
				}
			}
		});





定义style:
<style>
        .x-form-sideText {   
            padding-left: 2px;   
            display: inline-block;   
            display: inline;
        }  
</style>




示例:
var shortName = new Ext.form.TextField({
			fieldLabel : '客户简称',
			name : 'shortName',
			allowBlank : false,
			blankText : '客户简称不能为空',
			sideText : '<font color=red>*</font>',
			width : 100
		});




方法3:


{
          fieldLabel: '用户名',
          xtype: 'textfield',
          name: 'userName',
          width:200,
          id: 'userName',
          listeners : {   
			 render:function(config){  
			 $("#"+config.id).after("<font id='font_"+config.id+"' color='red' > *</font>");
			 $("#font_"+config.id).after("<span id='span_"+config.id+"' style='color:red;'></span>");
			 }
		 }
      }

,

{
          fieldLabel: '用户名',
          xtype: 'textfield',
          name: 'u2',
          xtype:'trigger',
          triggerClass:'x-form-search-trigger',
          cls:'ux-readOnly',
          width:200,
          id: 'u2',
           listeners : {   
			 render:function(config){  
			    $("#"+config.id+" + img").after("<font id='font_"+config.id+"' color='red' style='padding-left:16px;'> *</font>");
			    $("#font_"+config.id).after("<span id='span_"+config.id+"' style='color:red;'></span>");
    
			 }
		 }
}




  • 大小: 1.8 KB
分享到:
评论

相关推荐

    extjs 自动为必填项增加提示后缀

    extjs 自动为必填项增加提示后缀,如题此js代码可以为必填时使用,样例功能为在必填项后增加红色星号,如: 编码*(当然此星色为红色),也可以修改成其它内容符号、文字等

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    1. **创建TextField**: 创建一个TextField实例通常需要指定ID和配置项。例如: ```javascript var tf = new Ext.form.TextField({ id: 'myTextField', fieldLabel: '请输入文字', width: 200 }); ``` 这里...

    ExtJs5 去掉textfield边框

    在给定的描述中,我们看到开发者遇到了一个问题:默认情况下,ExtJs5的`textfield`组件有明显的边框,但通过添加特定的配置项和CSS样式,可以成功移除这些边框。 首先,让我们详细了解一下如何在ExtJs5中配置`...

    Ext组件描述,各个组件含义

    **2.27 Text Field (Ext.form.TextField)** - **xtype**: `textfield` - **功能描述**:Text Field 是一个用于输入单行文本的文本框。 - **主要用途**:适用于需要用户输入少量文本的场景。 **2.28 Time Field ...

    extjs控件列表

    **Ext.form.TextField** - **描述**: 表单文本框,用于输入单行文本。 - **用途**: 输入用户名、邮箱等。 **Ext.form.TriggerField** - **描述**: 触发录入项,结合图标和文本框,点击图标触发特定操作。 - **用途*...

    Ext表单组件之textField

    本篇我们主要关注"Ext表单组件之textField",它是最基础也是最常用的输入控件,用于接收用户的文本输入。 一、Ext.form.TextField简介 Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行...

    EXT表单验证之TextField

    在EXT表单中,TextField是最常见的输入控件,用于接收用户的文本输入。`vtype`是EXT TextField的一个关键属性,用于定义输入字段的验证规则,确保用户输入的数据符合特定格式或条件。 EXT中的TextField支持多种...

    EXT dojochina文本框示例Ext.form.TextField.rar

    2. **配置项**:`Ext.form.TextField`支持多种配置项来定制其行为和外观,如`fieldLabel`(字段标签)、`name`(字段名,用于数据绑定)、`width`(宽度)、`maxLength`(最大字符数)等。 3. **验证**:EXT提供了...

    jquery表单验证实例,对数字,字数,必填项等校验

    `jQuery Validate`是基于`jQuery`的一个插件,专门用于实现客户端的表单验证,它可以高效且易于地实现对数字、字数、必填项等各种类型的验证。 在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,...

    Ext.form表单中各种属性应用详解

    **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **allowDecimals**: 类型为 `Boolean`,决定是否允许输入小数,默认为 `true`...

    Extjs xtype集合

    - **描述**: 选项菜单项,带有复选框。 5. **`menuitem`:** - **`xtype`**: `menuitem` - **`Class`**: `Ext.menu.Item` - **描述**: 普通菜单项。 6. **`menuseparator`:** - **`xtype`**: `menuseparator...

    Ext3 查询框

    Ext3 查询框是一种在Web应用中常见的用户交互组件,它主要用在EXT JavaScript库中,EXT是一个用于构建富客户端Web应用的开源框架。EXT3是EXT库的一个版本,它提供了丰富的UI组件和数据绑定功能,使得开发者能够创建...

    EXT开发文档

    - 表单是 Web 应用中必不可少的部分,**EXT** 提供了多种表单组件,如 TextField、ComboBox 等。 - 可以通过表单组件收集用户输入,并进行验证和提交。 12. **继承**: - **EXT** 支持面向对象编程,可以通过...

    SwiftUI实战之验证手机号并限制长度TextField

    1. **SwiftUI的TextField**: `TextField`是SwiftUI提供的一个基础组件,用于接收用户的文本输入。通过在视图构建器中声明`TextField`,可以轻松创建一个可编辑的文本字段。 2. **Textfield的初始值与占位符**: ...

    EXTJS___API详解

    **Checkbox, Radio, HtmlEditor, TextField, NumberField, TextArea, TriggerField 类**:表单字段类,提供了各种输入控件,如复选框、单选按钮、富文本编辑器等。 EXTJS的API详尽且强大,这些只是其中一部分,...

    Ext Extjs 禁止文本和日期编辑

    在Ext JS这个强大的JavaScript框架中,开发者经常使用各种组件来构建富客户端应用,其中包括TextField(文本字段)和DatePicker(日期选择器)。有时,我们可能需要根据应用需求在运行时禁用这些组件的编辑功能,...

    EXT3.0 登录实例

    在EXT3.0中,登录界面通常由EXT的组件构建,如FormPanel、TextField、Button等。FormPanel是承载表单元素的容器,TextField用于输入用户名和密码,Button则用于触发登录操作。登录过程涉及事件监听和处理,例如点击...

    Java中TextField类实例.pdf

    Java中的`TextField`类是Swing或AWT库中的一个核心组件,用于在用户界面中显示和编辑一行文本。这个类在开发GUI应用程序时非常常见,因为它提供了简单、直观的文本输入方式。以下是对`TextField`类的详细解释以及...

    Ext登陆login

    5. **Ext.form.field.Password**: 与`Ext.form.field.Text`类似,但用于输入密码,显示为星号或圆点。 6. **Ext.button.Button**: 创建按钮,通常会有一个`handler`配置项,用于定义点击按钮时执行的函数。 7. **...

    ext 类型框改变

    从给定的文件信息来看,我们正在探讨的是一个名为`Ext.form.ChangeField`的自定义控件类,它继承自`Ext.form.TextField`,旨在提供一种机制来改变字段类型,如数字框、文本框、日期框和下拉框。下面我们将深入解析这...

Global site tag (gtag.js) - Google Analytics