Extjs 的 TextField 后面加上红星标记

本文介绍了一种在Extjs的TextField中添加红色必填标记(*)的方法,通过自定义函数实现,确保用户注意到哪些字段是必须填写的。
在输入框后面加上 * 作为标记。但是,好像Extjs的 TextField没有直接添加的组件,在此贴出一份解决方法,方便自己日后使用,代码如下:


var nameField=new Ext.form.TextField({
fieldLabel: 'Name',
allowBlank:false
});
nameField.on('render',addRedStar);
function addRedStar(obj)
{
var font=document.createElement("font");
font.setAttribute("color","red");
var redStar=document.createTextNode('*');
font.appendChild(redStar);
obj.el.dom.parentNode.appendChild(font);
}


引用:http://hi.baidu.com/qust409xls/blog/item/8af6e2313e151795a8018e6b.html
ExtJS 中,TextField 校验不通过时会显示红色框,这是通过 CSS 类来实现的。要去掉校验时的红色框,可以通过以下几种方法: ### 方法一:全局修改 CSS 样式 可以通过覆盖 ExtJS 默认的 CSS 类来去掉红色框。在 HTML 文件中添加自定义的 CSS 代码: ```css .x-form-invalid-field { border-color: inherit !important; background-image: none !important; } ``` 上述代码中,`x-form-invalid-field` 是 ExtJS 中表示校验不通过的字段的 CSS 类。通过将 `border-color` 设置为 `inherit`,可以让边框颜色继承父元素的颜色,从而去掉红色边框;将 `background-image` 设置为 `none` 可以去掉背景图标。 ### 方法二:在组件配置中修改样式 在创建 TextField 时,可以通过 `invalidCls` 配置项来指定自定义的校验不通过时的 CSS 类: ```javascript Ext.create('Ext.form.field.Text', { fieldLabel: 'Name', renderTo: Ext.getBody(), invalidCls: 'my-invalid-field' }); ``` 然后在 CSS 文件中定义 `my-invalid-field` 类: ```css .my-invalid-field { border-color: inherit !important; background-image: none !important; } ``` ### 方法三:重写验证逻辑 可以通过重写 `validate` 方法来避免显示红色框。在 TextField 中添加一个自定义的 `validate` 方法: ```javascript Ext.define('MyApp.view.MyTextField', { extend: 'Ext.form.field.Text', alias: 'widget.mytextfield', validate: function() { var me = this, valid = me.callParent(arguments); if (!valid) { me.removeCls(me.invalidCls); } return valid; } }); ``` 然后使用自定义的 `MyTextField` 组件: ```javascript Ext.create('MyApp.view.MyTextField', { fieldLabel: 'Name', renderTo: Ext.getBody() }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值