After ext is input, a check mark is displayed.

After using extjs for a while, I feel that ext has a lot of room for improvement in style and user experience. For example, displaying a check mark after a form is verified is a popular method. After two days of source code research, I finally found a simple implementation method. As follows:

I have done two things here:
1. When an error message is displayed in 'side' mode, the form is indented. I removed this effect.
2. switch between the check mark and the exclamation mark icon

Note:
I have customized the CSS style of the check mark, which is called 'icon-Yes'

// When the form verification is passed, the check box is displayed. // ext is rewritten. layout. component. field. field, which is used to process the label and error information of the form. // showvalidicon: booleanext. layout. component. field. field. override ({geterrorstrategy: function () {var me = This, owner = me. owner, strategies = me. errorstrategies, msgtarget = owner. msgtarget; var strategy =! Owner. preventmark & Ext. isstring (msgtarget )? (Strategies [msgtarget] | strategies. elementid): strategies. none; // customize showvalidicon: Boolean configuration item for the form // If showvalidicon is set to true and 'day' is used, use a check box (otherwise, it is the default, does not affect the original code.) If (msgtarget = 'day' & owner. showvalidicon) {// If (owner. isiconinit) {owner. errorel. setdisplayed (false); Owner. isiconinit = true;} // once verified, the icon owner is displayed. on ('validitychange', function (Me, valid) {me. errorel. setdisplayed (true );}); Ext. apply (strategy, {// unindent effect adjusthorizinsets: ext. emptyfn, layouthoriz: function (ownercontext, owner, size) {ownercontext. errorcontext. setprop ('x', size. width) ;}, layoutvert: function (ownercontext, owner) {ownercontext. errorcontext. setprop ('y', ownercontext. insets. top) ;}, prepare: function (ownercontext, owner) {var errorel = owner. errorel; errorel. addcls (ext. basecssprefix + 'form-inva Lid-Icon '); errorel. set ({'data-errorqtip ': Owner. getactiveerror () | ''}); var activeerror = owner. getactiveerror (), haserror = !! Activeerror; // switch the check icon errorel [haserror? 'Removecls': 'addcls'] ('icon-Yes'); Ext. layout. component. field. field. inittip () ;}}) ;}return strategy ;}});

   You only need to configure showvalidicon: true for multiple form items.

I am not satisfied with this code because the 'validitychange' event is used. If you define your own validitychange event, there may be sequence problems during execution. However, I am also helpless. The layout encapsulation of extjs4 is too complicated to figure out how it is implemented. Currently, no problem is found.

If you have better implementation methods, we are looking forward to sharing them !!!