Summary of common ext Problems

Scripts/EXT/resources/CSS/ext-all.css // ext General CSS that contains all styles (required)
Scripts/EXT/resources/CSS/icon.css // you can customize menu items or other page icons.
Scripts/utils/HiTRUST-CMS.css // css for older Payment Systems
Scripts/EXT/ext-base.js // framework base library (required)
Scripts/EXT/ext-all.js // contains all ext class libraries (required)
Scripts/EXT/ext-lang-zh_CN.js // ext all Chinese tips (required)
File Import Sequence
Begin, so the first import
Problem highlights
1: The trial (Docs. JS) tab page cannot be displayed, or Javascript is forbidden.
Solution: when instantiating an autoload object, you need to set the scripts attribute in it. The default value is false, that is, to load the tab subpage without executing JavaScript, you need to adjust it to the following:
A: var autoload = {URL: heaf, scripts: true };
Of course, you can also nest IFRAME,
B: HTML: '<IFRAME src = "+ URL +" width = "100%" Height = "100%"/> ',
In this way, the ext class library is loaded every time, but the single page becomes detachable and the coupling is reduced.

2: questions about email Verification
Xtype: 'textfield ',
Fieldlabel: 'email address ',
ID: 'edit _ spemail ',
Name: 'spemail ',
Vtype: 'email ', // you can verify the email after adding this.
Anchor: '000000'

3: usage of select statements
// Create JSON data
VaR statusarray = [
['Normal', 'normal'],
['Deregistered ', 'deregistered'],
['Free', 'free']
];
// Use
Xtype: 'combo ',
Store: New Ext. Data. simplestore ({
Fields: ['value', 'desc'],
Data: statusarray
}),
Fieldlabel: 'status ',
Loadingtext: 'loading ...',
Displayfield: 'desc', // hidden data
Valuefield: 'value', // displayed data
Mode: 'local', // read local data (Remote indicates Remote Data)
Triggeraction: 'all ',
ID: 'statusid ',
Hiddenname: 'statusname ',
Editable: True, // whether it can be edited. This attribute also supports the input search function.

4: basic verification of text box input
Allowblank: false, // if it is null, a prompt is displayed.
Minlength: 6, // minimum allowed characters
Minlengthtext: 'enter at least 6 characters! ', // If it is less than the minimum allowed characters, this message is displayed.
Maxlength: 12, // maximum allowed characters
Maxlengthtext: 'enter a maximum of 50 characters! ', // More than the maximum allowed characters, this message is displayed.

5: How ext implements psot
The reference code is as follows:
Buttons :[{
Text: 'Submit ',
Handler: function () {// when you click the button to execute this function
// Verify the validity
If (win. getcomponent ('form'). Form. isvalid ()){
// Login is the from ID
Win. getcomponent ('form'). Form. Submit ({
URL: 'login _ chk. php ',
Waittitle: 'hs ',
Method: 'post ',
Waitmsg: 'login verification in progress. Please wait ...',
Success: function (Form, Action) {// If post is successfully executed here
VaR loginresult = action. Result. success;
If (loginresult = false ){
// If login_chk.php returns false, execute the following command:
Alert (action. Result. Message );
} Else if (loginresult = true) {// The execution is successful.
Alert (action. Result. Message );
}
},
Failure: function (Form, Action) {// failed to execute or post, an exception is returned
Alert (action. Result. Message );
}
});
}
}
},{
Text: 'cancel ',
Handler: function () {simple. Form. Reset ();} // reset the form
}]
Background return:
If (Verification Successful ){
Out. Print ("{success: True, message:" "execution successful! ""}");
} Else {
Out. Print ("{success: false, message:" "execution failed! ""}");
}
Note:
Of course, you can also choose not to use post, you can manually obtain the value, using Ajax technology such as DWR, you can also achieve, in fact, the principle is the same, all are asynchronous calls

6: Garbled Solutions
Garbled code has been a headache, especially JS and page, interaction between the front and the background, it is recommended to use a unified encoding UTF-8, or GBK, generally can be a good solution, if not, you can implement a filter to unify the request and restore information encoding consistency. Of course, you can also manually change the character encoding format and then manually decode it.

7: Why is the prompt text not displayed when the input is invalid in my text box?
Ext. quicktips. INIT (); // The display box when the cursor is initialized. Tips prompt is supported.
// Method of prompting. The enumerated values are "QTip", "title", "under", "side", and Id (element ID)
Ext. Form. Field. Prototype. msgtarget = 'day ';
QTip: for example, the default "QTip" means that the cursor is moved up and automatically displayed.
Side
Title: similar to the title attribute in a common HTML control, it is displayed when you hover your mouse over it.
Under: it is displayed under the control. It is displayed automatically without hovering over the mouse.
If your text box is not set for verification, it cannot be displayed.

8: how to implement the same authentication as Ext?
// The default supported vtype in Form Verification
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 jack_luoting@126.com
4. url // URL format verification, required format is http://www.skywin.com

Implement custom Verification
// 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 here, and field refers to the text box 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 the Compare value.
}
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! ", // Invalid prompt
Confirmto: "pass1", // ID of another component to be compared
Anchor: "90%"
}

9: Optional display

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:
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.
{
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%"
}]
}