本文地址: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配置,我们可以避免了每一次都在标签前面自己写个星号,再写标签名称那样粗鲁的方法了,可以这样自定义方式实现选项的标签配置。

2.labelAlign标签对齐方式

还有,标签的显示,我想把‘用户名’和‘密码’这两个对其,就是想在密码中间加个空格,但是我尝试之后发现不可行,不知道是不是ext的bug还是故意这么做的。后来发现可以设置label的对齐方式,设置为右对齐,那么密码的码字就和用户名的名字对齐了。但是前面字体还是不对齐,相比之下,又好看了一点啊。

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

3.错误提示信息msgTarget:

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

			msgTarget: 'under'
			blankText:"用户名不允许为空"

显示效果:

关于其他方式,可以自己试下效果,看名字也可以猜到效果的,看起来还不错呢。

[ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志的更多相关文章

  1. [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38975633 本文作者:sushengmiyan ------------------ ...

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

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39395753 官方样例:http://docs.sencha.com/extjs/5. ...

  3. [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39667533 官方文档:http://docs.sencha.com/extjs/5. ...

  4. [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...

  5. [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...

  6. [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40507383 插件下载: http://download.csdn.net/detai ...

  7. [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39665979 官方文档:http://docs.sencha.com/extjs/5. ...

  8. [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/41911539 本文作者:sushengmiyan ------------------ ...

  9. [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...

随机推荐

  1. 习题 7-2 uva225(回溯)

    题意:从(0.0)点出发,第一次走一步……第k次走k步,且每次必须转90度,不能走重复的点.求k次后回到出发点的所有情况.按最小字典序从小到大输出. 思路: 把所有坐标+220,保证其是正数,然后搜索 ...

  2. Calendar 时间日历简单例子

    直接上代码: 运行结果:

  3. 以太坊MetaMask钱包插件简介

    MetaMask是一个以太坊钱包插件,虽然只能在Chrome浏览器中使用,但作为以太坊钱包的metamask却很受以太坊开发者欢迎. MetaMask 评价(5★):安装设置:★★★★界面操作:★★★ ...

  4. 图像融合之拉普拉斯融合(laplacian blending)

    一.拉普拉斯融合基本步骤 1. 两幅图像L,R,以及二值掩模mask,给定金字塔层数level. 2. 分别根据L,R构建其对应的拉普拉斯残差金字塔(层数为level),并保留高斯金字塔下采样最顶端的 ...

  5. js数组求差集

    var arr1 = [2,3,5,88,99,444,66];var arr2 = [2,88,66]; arr_dive(arr1,arr2); function arr_dive(aArr,bA ...

  6. Redis Error:/var/redis/run/redis_6379.pid exists, process is already running or crashed

    命令service Redis start /var/redis/run/redis_6379.pid exists, process is already running or crashed 引起 ...

  7. css文本强制一行 字间距

    white-space:nowrap 在一行 .slideLastlyNews img{margin-left:9px;margin-right:5px;margin-top:6px;width:5p ...

  8. SQL Server用户自定义数据类型

    用户自定义数据类型:基于系统数据类型,由数据库管理员生成.利用系统存储过程定义用户自定义数据类型` Sp_addtype [@typename=] 新数据类型名, [@phystype=] 系统数据类 ...

  9. iOS支付宝,微信,银联支付集成封装(上)

    一.集成支付宝支付 支付宝集成官方教程https://docs.open.alipay.com/204/105295/ 支付宝集成官方demo https://docs.open.alipay.com ...

  10. ACM Bone Collector

      Many years ago , in Teddy's hometown there was a man who was called "Bone Collector". Th ...