[ExtJS5 Study Notes] section 22nd use the beforeLabelTpl configuration in Extjs5 to add the required asterisk sign to the tag, extjs5

[ExtJS5 Study Notes] section 22nd use the beforeLabelTpl configuration in Extjs5 to add the required asterisk sign to the tag, extjs5

Address: http://blog.csdn.net/sushengmiyan/article/details/39395753

Official example: http://docs.sencha.com/extjs/5.0/apidocs! /Api/Ext. form. Labelable-cfg-beforeLabelTpl

Author: sushengmiyan

Certificate ------------------------------------------------------------------------------------------------------------------------------------

On the registration page, you can see the required flag. In Ext, we can use fieldLabel to create a tag, but there is no option to explicitly specify a required configuration, I have read the official examples/kitchensink/# form-contact example and found that there is a beforeLabelTpl configuration that can be used to set the required * flag.

Take a look at the effect first:

The * required sign is added to the left of the tag.

Implementation Method:

Items: [{xtype: 'textfield ', name: 'username', labelWidth: 50, fieldLabel: 'username', beforeLabelTextTpl: [' <span style = "color: red; font-weight: bold "data-qtip =" required "> * </span> '], // allowBlank: false, emptyText: 'user name or email address '}, {xtype: 'textfield ', name: 'Password', labelWidth: 50, inputType: 'Password', fieldLabel: 'password', beforeLabelTextTpl: ['<span style = "color: red; font-weight: bold" data-qtip = "required"> * </span>'], // allowBlank: false, emptyText: 'enter your password'}]

By setting the beforeLabelTextTpl configuration, we can avoid writing an asterisk in front of the label every time, and then writing the label name as rude. You can customize the label configuration of the option in this way.

2. labelAlign label alignment

Also, for the display of tags, I want to pair the 'username 'and 'Password' to add a space in the middle of the password, but I found it unfeasible after trying, I don't know if ext is a bug. Later, we found that we can set the alignment of the label and set it to the right alignment. Then, the password code is aligned with the name of the user name. However, the front font is still not aligned. In contrast, it looks better.

fieldDefaults: {labelAlign: 'right',labelWidth: 115,msgTarget: 'side'},

3. error message msgTarget:

You can set a total of five styles: qtip, title, under, side, And none. What I like about under is that there is an error message below. You need to customize the custom information to use blancertext.

msgTarget: 'under'

BlankText: "The user name cannot be blank"

Display Effect:

For other methods, you can try the effect yourself. You can also guess the effect by name. It looks good.