[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配置,我们可以避免了每一次都在标签前面自己写个星号,再写标签名称那样粗鲁的方法了,可以这样自定义方式实现选项的标签配置。
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配置给标签增加必填选项星号标志的更多相关文章
- [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38975633 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第22 Extjs5正在使用beforeLabelTpl添加所需的配置选项标注星号标记
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39395753 官方样例:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39667533 官方文档:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40507383 插件下载: http://download.csdn.net/detai ...
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39665979 官方文档:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
本文地址:http://blog.csdn.net/sushengmiyan/article/details/41911539 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...
随机推荐
- 习题 7-2 uva225(回溯)
题意:从(0.0)点出发,第一次走一步……第k次走k步,且每次必须转90度,不能走重复的点.求k次后回到出发点的所有情况.按最小字典序从小到大输出. 思路: 把所有坐标+220,保证其是正数,然后搜索 ...
- Calendar 时间日历简单例子
直接上代码: 运行结果:
- 以太坊MetaMask钱包插件简介
MetaMask是一个以太坊钱包插件,虽然只能在Chrome浏览器中使用,但作为以太坊钱包的metamask却很受以太坊开发者欢迎. MetaMask 评价(5★):安装设置:★★★★界面操作:★★★ ...
- 图像融合之拉普拉斯融合(laplacian blending)
一.拉普拉斯融合基本步骤 1. 两幅图像L,R,以及二值掩模mask,给定金字塔层数level. 2. 分别根据L,R构建其对应的拉普拉斯残差金字塔(层数为level),并保留高斯金字塔下采样最顶端的 ...
- js数组求差集
var arr1 = [2,3,5,88,99,444,66];var arr2 = [2,88,66]; arr_dive(arr1,arr2); function arr_dive(aArr,bA ...
- 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 引起 ...
- css文本强制一行 字间距
white-space:nowrap 在一行 .slideLastlyNews img{margin-left:9px;margin-right:5px;margin-top:6px;width:5p ...
- SQL Server用户自定义数据类型
用户自定义数据类型:基于系统数据类型,由数据库管理员生成.利用系统存储过程定义用户自定义数据类型` Sp_addtype [@typename=] 新数据类型名, [@phystype=] 系统数据类 ...
- iOS支付宝,微信,银联支付集成封装(上)
一.集成支付宝支付 支付宝集成官方教程https://docs.open.alipay.com/204/105295/ 支付宝集成官方demo https://docs.open.alipay.com ...
- ACM Bone Collector
Many years ago , in Teddy's hometown there was a man who was called "Bone Collector". Th ...