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

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



相关文章
|
弹性计算 数据安全/隐私保护
阿里云域名申请+服务器购买+备案教程(图文讲解版)
阿里云域名申请+服务器购买+备案教程(图文讲解版)
|
关系型数据库 MySQL 数据库连接
使用Django框架完成用户的增删改查操作
使用Django框架完成用户的增删改查操作
284 1
解决SpringBoot无法访问静态资源文件
解决SpringBoot无法访问静态资源文件
解决SpringBoot无法访问静态资源文件
|
消息中间件 NoSQL 中间件
常用的消息队列和中间件都有哪些
常用的消息队列和中间件都有哪些
515 75
|
JSON 安全 IDE
收款云音箱云喇叭API开发接口文档(2021-10-7)
1.API接口终身免费使用。 2.云喇叭是用来在网络程序开发中使用的设备。 3.需要有开发能力的人员才能使用,喇叭通过2G/4G/WIFI链接,通过GET/POST方式网络接口使喇叭播报收款提示。
2752 0
|
机器学习/深度学习 PyTorch Shell
必知的技术知识:ImageNet数据集介绍和下载后的处理
必知的技术知识:ImageNet数据集介绍和下载后的处理
1908 0
|
设计模式 缓存 Devops
微服务架构最强讲解,那叫一个通俗易懂!
微服务架构(Microservice Architecture)是一种架构概念,旨在通过将功能分解到各个离散的服务中以实现对解决方案的解耦。你可以将其看作是在架构层次而非获取服务的
32997 3
微服务架构最强讲解,那叫一个通俗易懂!
|
C语言 Python
〈详解〉Python3调用C程序
胶水语言 python为什么要调用c ? c与python对比 python不擅长"大量运算"任务; python程序优势在于:编写简单,适合"IO密集型作业"(比如打开文件,下载图片,运行脚本).
2282 0
|
Linux API 调度
Linux内核中断系统
中断在驱动中是非常常用的,无论是外部的GPIO中断,还是SPI,I2C等发送或接收中断,都是必不可少的。所以今天来看看Linux中的中断处理。
|
弹性计算 Ubuntu Linux
在阿里云ECS上的Hyperledger Fabric 1.1.0 搭建与测试
从去年底到现在一直在准备今年的竞赛作品,其中一个主力项目是基于Hyperledger Fabric联盟链框架的电子病历相关应用。在完成作品背景调研、需求分析以及设计工作后,目前团队在进行作品实现。所以开始研究在阿里云ECS云服务器上搭建Fabric项目的基础环境。由于Fabric项目是一个非常新、年轻的开源框架,中文资料稀少,英文资料理解困难,因此在云服务器上完成环境搭建并跑通示例非常不容易。特写此文,作为工具查阅。