开发者社区> eddie小英俊> 正文

[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不同意为空"
显示效果:

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





版权声明:本文博客原创文章,博客,未经同意,不得转载。





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4678480.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
什么是 SVG?本项目简单分享动画入门的相关知识,并附有相关代码演示,同时文档对SVG等相关内容有比较详细的叙述,如vector标签中属性所代表的意义解释、path标签所支持的指令解释等等。
33 0
Vue组件中表格文字内容太长,自动变省略号,鼠标悬浮上去显示全称。
Vue组件中表格文字内容太长,自动变省略号,鼠标悬浮上去显示全称。
337 0
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
744 0
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
307 0
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
238 0
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)二
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
484 0
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)二
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
247 0
JS中描述等长文本的显示或隐藏(十二)
JS中描述等长文本的显示或隐藏(十二)
80 0
手工翻译Vue.js源码:尝试重命名标识符与文本
尝试对vue.js源码中的标识符名和文本进行中文化. Try to translate identifiers and text in source code of vue.js.
766 0
Css规范整理:3.3、常规流布局:行内格式化上下文
行内级盒:参与行内格式化上下文的盒(outer = inner ) 行内盒:display = inline 的不可替换元素。 原子行内级盒:不属于行内盒的行内级盒。 行框(line box):包含来自同一行的盒的矩形区域叫做行框。(不是一个盒,没有padding border margin)
1480 0
+关注
eddie小英俊
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载