🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
本文地址:[http://blog.csdn.net/sushengmiyan/article/details/39395753](http://blog.csdn.net/sushengmiyan/article/details/39395753) 官方例子:[ http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Labelable-cfg-beforeLabelTpl](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Labelable-cfg-beforeLabelTpl)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者:[sushengmiyan](http://blog.csdn.net/sushengmiyan) ------------------------------------------------------------------------------------------------------------------------------------ 在注册页面获取填写信息的界面,我们都能看到必填选项的标志* 这个东西。在Ext中,我们可以通过fieldLabel来创建一个标签,但是没有选项明确指出有必填选项的配置,刚才看了下官方的examples/kitchensink/#form-contact例子,发现有个beforeLabelTpl配置可以用来设置必填选项的*标志。 看一下效果先: ![](https://box.kancloud.cn/2016-02-03_56b214eb6283e.jpg) 在标签的左边就增加了*必填标志。 实现方法: ~~~ 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配置,我们可以避免了每一次都在标签前面自己写个星号,再写标签名称那样粗鲁的方法了,可以这样自定义方式实现选项的标签配置。 2.labelAlign标签对齐方式 还有,标签的显示,我想把‘用户名’和‘密码’这两个对其,就是想在密码中间加个空格,但是我尝试之后发现不可行,不知道是不是ext的bug还是故意这么做的。后来发现可以设置label的对齐方式,设置为右对齐,那么密码的码字就和用户名的名字对齐了。但是前面字体还是不对齐,相比之下,又好看了一点啊。 ~~~ fieldDefaults: { labelAlign: 'right', labelWidth: 115, msgTarget: 'side' }, ~~~ ![](https://box.kancloud.cn/2016-02-03_56b214eb72f1e.jpg) 3.错误提示信息msgTarget: 一共可以设置qtip、title、under、side、none五种样式,我喜欢under的就是在下面出现错误信息的,需要定制客户化的信息使用的是blankText。 ~~~ msgTarget: 'under' ~~~ ~~~ blankText:"用户名不允许为空" ~~~ 显示效果: ![](https://box.kancloud.cn/2016-02-03_56b214eb808b8.jpg) 关于其他方式,可以自己试下效果,看名字也可以猜到效果的,看起来还不错呢。