您的位置：首页 > Web前端 > JavaScript

[ExtJS5学习笔记]第22 Extjs5正在使用beforeLabelTpl添加所需的配置选项标注星号标记

2015-07-26 19:12 686 查看

本文地址：/article/1331627.html

官方样例: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Labelable-cfg-beforeLabelTpl href="http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each" target=_blank>

本文作者：sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

在注冊页面获取填写信息的界面，我们都能看到必填选项的标志* 这个东西。

在Ext中，我们能够通过fieldLabel来创建一个标签，可是没有选项明白指出有必填选项的配置，刚才看了下官方的examples/kitchensink/#form-contact样例，发现有个beforeLabelTpl配置能够用来设置必填选项的*标志。

看一下效果先：

在标签的左边就添加了*必填标志。

实现方法：

items:[{
xtype: 'textfield',
name: 'username',
labelWidth: 50,
fieldLabel: 'username',
beforeLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
],
//allowBlank: false,
emptyText: 'username或邮箱地址'
},{
xtype: 'textfield',
name: 'password',
labelWidth: 50,
inputType: 'password',
fieldLabel: '密  码',
beforeLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
],
//allowBlank: false,
emptyText: '请输入您的password'
}]

通过设置beforeLabelTextTpl配置，我们能够避免了每一次都在标签前面自己写个星号，再写标签名称那样粗鲁的方法了。能够这样自己定义方式实现选项的标签配置。

2.labelAlign标签对齐方式

还有，标签的显示，我想把‘username’和‘password’这两个对其。就是想在password中间加个空格，可是我尝试之后发现不可行。不知道是不是ext的bug还是有益这么做的。

后来发现能够设置label的对齐方式。设置为右对齐，那么password的码字就和username的名字对齐了。可是前面字体还是不正确齐。相比之下。又好看了一点啊。

fieldDefaults: {
labelAlign: 'right',
labelWidth: 115,
msgTarget: 'side'
},

3.错误提示信息msgTarget：

一共能够设置qtip、title、under、side、none五种样式。我喜欢under的就是在以下出现错误信息的，须要定制客户化的信息使用的是blankText。

msgTarget: 'under'

blankText:"username不同意为空"

显示效果：

关于其它方式，能够自己试下效果，看名字也能够猜到效果的，看起来还不错呢。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航