Extjs learning notes (1)-Form Verification, ext. formpanel

Optional fieldset instances
In fact, it is to bring a chechbox, a bit like the effect of selecting information when registering a forum. The main knowledge points are as follows:

// This parameter is special.
1. checkboxtoggle: True // true: A fieldset with checkbox is displayed. If it is selected, it is expanded. Otherwise, the default value is false.
2. checkboxname: String // when the preceding value is true, it is used as the name of the checkbox to facilitate form operations.

Here I paste the JS core code (the HTML code is exactly the same as that in the previous article, not listed ):

// Add the following configuration in items of the basic code in the previous section.
{
Xtype: "fieldset ",
Checkboxtoggle: True, // key parameter. Others are the same as previous
Checkboxname: "dfdf ",
Title: "optional information ",
Defaulttype: 'textfield ',
Width: 330,
Autoheight: True, // enable Adaptive Layout
Items :[{
Fieldlabel: "username ",
Name: "user ",
Anchor: "95%" // 330px-labelwidth 95% of the remaining width, leaving 5% as the verification error message mentioned later
},
{
Fieldlabel: "password ",
Inputtype: "password", // Password text
Name: "pass ",
Anchor: "95%"
}]
}

4. Form Verification instance (empty verification, password validation, email verification)
We can use a separate js to write form verification, but extjs has come to mind for us (it is not convenient to write it independently ).
Before verification, I had to mention two tips: // you can see these two in a lot of extjs code, and they all played a role as a reminder.
Ext. quicktips. INIT (); // tips prompt supported
Ext. form. field. prototype. msgtarget = 'day'; // method of prompting. The enumerated values are "QTip", "title", "under", "side", and Id (element ID)
// Many side methods are used. There is a red exclamation mark on the right side, and an error prompt is displayed when you move the mouse up. I will not introduce other methods. You can verify them by yourself.
// You can remove these two lines of code to understand their functions (put them in onready's function)

1. Let's look at the simplest example: Empty verification (in fact, this is not a special verification example)

// Empty verification parameters
1. allowblank: false // false cannot be blank. The default value is true.
2. blanktext: String // error message when it is null

JS Code: var form1 = new Ext. Form. formpanel ({
Width: 350,
Frame: True,
Renderto: "form1 ",
Labelwidth: 80,
Title: "formpanel ",
Bodystyle: "padding: 5 p x 5 p x 0 ",
Defaults: {width: 150, xtype: "textfield", inputtype: "password "},
Items :[
{Fieldlabel: "cannot be blank ",
Allowblank: false, // null is not allowed
Blanktext: "This field is required by default. Enter", // error message!
ID: "blanktest ",
Anchor: "90%"
}
]
});

2. Simple verification in vtype format.
In this example of email verification, rewrite the items configuration in the code above: items :[
{Fieldlabel: "cannot be blank ",
Vtype: "email", // verify the email format
Vtypetext: "invalid email address", // error message. I will leave it blank by default.
ID: "blanktest ",
Anchor: "90%"
}

You can modify the above vtype to the following extjs vtypes supported by default verification: // Form Verification in the default supported vtype
1. Alpha // only letters can be entered, and other characters (such as numbers and special symbols) cannot be entered)
2. alphanum // only letters and numbers can be entered.
3. Email // email verification, the required format is "langsin@gmail.com"
4. url // URL format verification. The required format is http: // www .***

3. Confirm Password verification (Advanced custom verification)
The previous verification is based on the verification provided by extjs. We can also customize the verification function, which is more complex than above. Let's make an example of Password confirmation.
Modify the previous Code: // first use the Ext. Apply method to add a custom password verification function (you can also use another name)
Ext. Apply (ext. Form. vtypes ,{
Password: function (Val, field) {// Val refers to the value of the text box. Field refers to the text box component.
If (field. confirmto) {// confirmto is our custom configuration parameter. It is generally used to save the id value of another component.
VaR Pwd = ext. Get (field. confirmto); // gets the value of the ID of confirmto.
Return (val = PWD. getvalue ());
}
Return true;
}
});
// Configure items Parameters
Items: [{fieldlabel: "password ",
ID: "pass1 ",
Anchor: "90%"
},{
Fieldlabel: "Confirm Password ",
ID: "pass2 ",
Vtype: "password", // custom authentication type
Vtypetext: "The two passwords are inconsistent! ",
Confirmto: "pass1", // ID of another component to be compared
Anchor: "90%"
}

There is still a lot of content about vtype to be explored, but now we will end here, and we will have the opportunity to discuss other advanced verification.