[ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
本文地址：http://blog.csdn.net/sushengmiyan/article/details/39395753
官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Labelable-cfg-beforeLabelTpl
本文作者：sushengmiyan
------------------------------------------------------------------------------------------------------------------------------------
在注册页面获取填写信息的界面，我们都能看到必填选项的标志* 这个东西。在Ext中，我们可以通过fieldLabel来创建一个标签，但是没有选项明确指出有必填选项的配置，刚才看了下官方的examples/kitchensink/#form-contact例子，发现有个beforeLabelTpl配置可以用来设置必填选项的*标志。
看一下效果先：
在标签的左边就增加了*必填标志。
实现方法：
items:[{
xtype: ‘textfield‘,
name: ‘username‘,
labelWidth: 50,
fieldLabel: ‘用户名‘,
beforeLabelTextTpl: [
‘<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>‘
],
//allowBlank: false,
emptyText: ‘用户名或邮箱地址‘
},{
xtype: ‘textfield‘,
name: ‘password‘,
labelWidth: 50,
inputType: ‘password‘,
fieldLabel: ‘密 码‘,
beforeLabelTextTpl: [
‘<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>‘
],
//allowBlank: false,
emptyText: ‘请输入您的密码‘
}]通过设置beforeLabelTextTpl配置，我们可以避免了每一次都在标签前面自己写个星号，再写标签名称那样粗鲁的方法了，可以这样自定义方式实现选项的标签配置。还有，标签的显示，我想把‘用户名’和‘密码’这两个对其，就是想在密码中间加个空格，但是我尝试之后发现不可行，不知道是不是ext的bug还是故意这么做的。后来发现可以设置label的对齐方式，设置为右对齐，那么密码的码字就和用户名的名字对齐了。但是前面字体还是不对齐，相比之下，又好看了一点啊。
fieldDefaults: {
labelAlign: ‘right‘,
labelWidth: 115,
msgTarget: ‘side‘
},
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
