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

简介:

官方例子: 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:"用户名不允许为空"
显示效果:

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



相关文章
|
7月前
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
407 0
|
7月前
VSCode 自动修改闭合标签
VSCode 自动修改闭合标签
117 0
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
|
JSON Linux 数据格式
ChatGPT无所不知?? 怎么可能? vscode启用括号对参考线, 他就不知道
一开始我是这样问的 问ChatGPT vscode , 当我点击某个括号时, 显示配对的括号, 有一条线连接两个括号, 怎么实现? vscode自带这个功能吗? 或者用什么插件扩展
493 0
ChatGPT无所不知?? 怎么可能? vscode启用括号对参考线, 他就不知道
|
JavaScript SQL 前端开发
FineReport 复选框实现多个值查询(使用JS通过文本控件作为值传递实现)
FineReport 复选框实现多个值查询(使用JS通过文本控件作为值传递实现) 给复选框添加编辑后事件,事件使用Javascript,具体的js如下
740 0
|
JavaScript
通过js判断点击键码的值,禁用F12、复制粘贴、右键等功能
通过js判断点击键码的值,禁用F12、复制粘贴、右键等功能
181 0
|
Web App开发 前端开发
类选择器和所作用的标签一起写为什么不起作用? - CSDN博客
原文:类选择器和所作用的标签一起写为什么不起作用? - CSDN博客 HTML代码: css样式: 这不是将样式作用于circle类下的有current类的li标签吗?为什么不起作用? 原因: 选择器理解错误! 一般常用的选择器有标签选择器,类选择器,ID选择器,后代选择器等等。
1147 0