[ExtJS5学习笔记]第22 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: '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不同意为空"
显示效果:
关于其它方式,能够自己试下效果,看名字也能够猜到效果的,看起来还不错呢。
版权声明:本文博客原创文章,博客,未经同意,不得转载。
[ExtJS5学习笔记]第22 Extjs5正在使用beforeLabelTpl添加所需的配置选项标注星号标记的更多相关文章
- [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38975633 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39395753 官方例子:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简单介绍
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...
- Flutter学习笔记(22)--单个子元素的布局Widget(Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox)
如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38313537 本文作者:sushengmiyan ----------------- ...
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...
随机推荐
- shell编程三大神器之awk
- POJ1811_Prime Test【Miller Rabin素数测试】【Pollar Rho整数分解】
Prime Test Time Limit: 6000MS Memory Limit: 65536K Total Submissions: 29193 Accepted: 7392 Case Time ...
- 第3周 区_SQL Server中管理空间的基本单位
原文:第3周 区_SQL Server中管理空间的基本单位 哇哦,SQL Server性能调优培训已经进入第3周了!同时你已经对SQL Server内核运行机制有了很好的认识.今天我会讲下SQL Se ...
- Java 并发专题 : Semaphore 实现 互斥 与 连接池
继续并发方面的知识.今天介绍Semaphore,同样在java.util.concurrent包下. 本来准备通过例子,从自己实现到最后使用并发工具实现,但是貌似效果并不是很好,有点太啰嗦的感觉,所有 ...
- Javascript 进阶 作用域 作用域链
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/25076713 一直觉得Js很强大,由于长期不写js代码,最近刚好温故温故. 1. ...
- HDOJ 4687 Boke and Tsukkomi 一般图最大匹配带花树+暴力
一般图最大匹配带花树+暴力: 先算最大匹配 C1 在枚举每一条边,去掉和这条边两个端点有关的边.....再跑Edmonds得到匹配C2 假设C2+2==C1则这条边再某个最大匹配中 Boke and ...
- IIS在W7下使用
1.0.发布程序
- A Mathematical Curiosity
A Mathematical Curiosity Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/O ...
- java计算器 图形用户界面 精简版
package com.rgy.entity; import java.awt.*; import java.awt.event.*; @SuppressWarnings("serial&q ...
- CF417D--- Cunning Gena(序列+像缩进dp)
A boy named Gena really wants to get to the "Russian Code Cup" finals, or at least get a t ...