Ext form输入框后加文字说明(二)

最新推荐文章于 2020-11-25 10:15:41 发布

转载最新推荐文章于 2020-11-25 10:15:41 发布 · 3.4k 阅读

文章标签：

#ext #autocomplete #layout #html #function #input

Ext 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种在ExtJS框架中为表单字段添加必填项标记的方法：一种是在items配置中直接加入星号；另一种是通过覆写TextField和ComboBox组件的onRender方法并利用sideText属性来实现。

方法1:在items中加*号

Js代码

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" mce_style="padding-left:1px" color="red">*</font>' }] }] }] })

方法2:覆写onRender方法并添加个sideText属性，并定义样式x-form-sideText

Js代码

/** * 适用于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:

Html代码

<mce:style></mce:style><style mce_bogus="1"> .x-form-sideText { padding-left: 2px; display: inline-block; display: inline; } </style>

示例:

Js代码

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

原文链接：http://fireinjava.iteye.com/blog/665258