`
bdk82924
  • 浏览: 569756 次
  • 性别: 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简单例子

    可以通过配置属性来设定其大小、初始值、是否为必填项等。 2. **密码字段(PasswordField)**:与文本字段类似,但输入的内容会被遮罩,用于保护敏感信息。 3. **选择框(ComboBox)**:允许用户从预设的选项列表...

    Ext2.0 form使用实例的例程

    2. **表单字段(Form Fields)**:包括文本字段(TextField)、密码字段(PasswordField)、选择框(Checkbox)、复选框组(CheckboxGroup)、单选框(RadioButton)、下拉列表(ComboBox)、日期选择器(DateField...

    JS小练习代码之二第1/2页

    - `allowBlank: false` 配置项使得字段为必填,如果留空,表单验证会失败。 - `blankText` 提供了当字段为空时的提示信息。 - `vtype: "age"` 设置了一个自定义验证类型,确保年龄字段输入的数据是有效的年龄值。...

    初试extJs,控件

    `blankText` 属性用于设定当输入为空时显示的提示信息,强调某些字段为必填项。 在 ExtJs 中,`items` 是表单或面板中包含的组件集合,可以是其他表单字段、按钮、容器等。`layout` 属性用于设置组件的布局方式,如...

    extjs-form:使用 Sencha ExtJS 的简单表单

    例如,`Ext.form.TextField` 用于创建文本输入框,`Ext.form.NumberField` 用于数字输入,还有 `Ext.form.DateField` 用于日期选择等。表单字段可以通过 `xtype` 属性定义,并在 `items` 配置项中添加到表单面板...

Global site tag (gtag.js) - Google Analytics