Form plug-ins and form layout, submission, and validation for "ExtJS" ExtJS

The ExtJS anchor can be used to lay out the various components of the form that ExtJS comes with, and of course, the Ext.Msg.alert in the "ExtJS" text input box with the date component, the container and the VBox alarm box two times (click the Open link) is also possible. In fact, ExtJS form plug-in and form layout is not the key, ExtJS form validation is OK, just a few lines of statement can be completed. The key is that ExtJS form submission must be done in Ajax mode, and in the background must return a JSON to complete the form of the submission, it may be a bit complicated, the following PHP as ExtJS background processing to explain the problem ExtJS form. Aspx,jsp and so on, you just have to change the parameters to get the statement as well.

I. BASIC OBJECTIVES

For example, this is the effect of the Windows2003 self-contained pure IE6 browser, first in the browser has a button, click to open the Form window, users fill in the information must meet the requirements, if not verified, the form's "OK" button is gray, of course, click "Close" button to close this dialog box at any time.

There is a text box, Password box, check box, drop-down list, radio box, all the values can be passed to the backstage formsubmit.php processing, and then back to the foreground. It is not recommended to use ExtJS color components, because all incompatible IE6 plugins are deceptive villains!

Second, the basic idea

The layout of the entire form, for example, is purely ExtJS form components, which are not used in HTML layout.

The HTML layout of the Login.html page is just a button with ID=BTN1, and all the rest of the layout is done by JavaScript scripts.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "Http://www.w3.org/TR/html4/strict.dtd" >

Third, Core script
1, login.html
This front-end page does not contain any backend language
(1) First can declare a window named Window1, the inside of a form named Form1, indicating that the BTN1 onclick event is the display Window1. This section is identical to the "ExtJS" folding layout and card layout (click to open link). Don't dwell on it.
var window1=ext.create (' Ext.window.Window ', {renderTo:Ext.getBody (), Header:false,//No caption            Border:false,// No border resizable:false,//Can not be freely resized, default can            Width:400,items:[form1]}); Window1.show ();     Ext.get ("Btn1"). On ("click", Function () {            window1.show ();        });  
(2) After declaring the form using ExtJS failed to pass the validation error message, if there are no two lines, ExtJS will not have any error reminders for forms that fail validation.
        Ext.QuickTips.init ();        Ext.form.Field.prototype.msgTarget = ' side ';
(3) followed by the real core, ExtJS's form
        var Form1 = ext.create (' Ext.form.Panel ', {width:400, method: ' POST ', layout: ' A Nchor ', title: ' Ext form ', items: [{fieldlabel: ' username ', xtype: ' TextField ', Name: ' username ', regex:/^[a-za-z]{4,12}$/,//Regular expression Regextext: ' must be 4-12 words in English                Characters ', Anchor: ' 90% '}, {fieldlabel: ' Password ', xtype: ' TextField ',                InputType: ' Password ',//password name: ' Password ', regex:/^[a-za-z]{4,12}$/,//Regular expression                Regextext: ' must be 4-12 English characters ', Anchor: ' 90% '}, {fieldlabel: ' check box ', Xtype: ' CheckboxGroup ', items: [{boxlabel: ' option 1 ', Name: '            C1 '}, {boxlabel: ' option 2 ', Name: ' C2 ', checked:true}]         }, {       Fieldlabel: ' Drop-down list ', Xtype: ' ComboBox ', Layout: ' Hbox ', Querymode: ' Loc                Al ', Valuefield: ' ID ',//list value value using the ID field in store Displayfield: ' name ',//display value using the Name field in store                forceselection:true,//must not be free to enter, not empty, you have to select an item from the drop-down list name: ' ComboBox ', Allowblank:false,                        Store: {fields: [' id ', ' name '], data: [{' id ': ' C1 ',                    Name: ' C1 '}, {' id ': ' C2 ', Name: ' C2 '                }, {' id ': ' C3 ', Name: ' C3 '}]  }}, {fieldlabel: ' Radio Box ', Xtype: ' Radiogroup ', Allowblank:                    False, Items: [{boxlabel: ' option 1 ', Name: ' Radiobox ',     Inputvalue: ' R1 '           }, {boxlabel: ' option 2 ', Name: ' Radiobox ', Inputvalue: ' R 2 '}, {boxlabel: ' option 3 ', Name: ' Radiobox ', Inputva                Lue: ' R3 '}]}], Bbar: [{xtype: ' Tbfill '}, {                Xtype: ' button ', text: ' OK ', disabled:true, Formbind:true,                        Listeners: {click:function () {var thisform = Form1.getform (); Thisform.submit ({url: "formsubmit.php", success:function (Form, action)                                   {Ext.Msg.alert (' Success ', action.result.msg, function () {                                Window1.hide ();                            });                    }                        });     }           }}, {xtype: ' button ', text: ' Off ', listeners: {                                                   Click:function () {window1.hide (); }}}, {xtype: ' Tbfill '}]});
After declaring the form's width, submission method, layout as anchor, title, and so on, the key is the contents of the items, which is one of the ExtJS form components.
First, the basic input box, whose type is Textfield,name, is used for a while back-end page formsubmit.php get. Where Regex is the regular expression of validation, Regextext is the error message that fails to pass authentication. Anchor: ' 90% ' indicates that this form occupies 90% of the entire row.
Then the Password box settings, the type is also TextField, but to fill a inputtype: ' Password ', indicating that the input box is a password box.
check box xtype: ' CheckboxGroup ' and the Radio group Xtype: ' Radiogroup ', nothing to say, for the single-select group, remember to fill in a allowblank:false, prohibit not empty on it.
The key is the drop-down list, which is the original <select> tag, the most complex, this thing ExtJS default is to let the user freely input, and then the options are read from the backend, very high-end, can now be changed to a normal drop-down list, must choose an element from the inside, This is in line with our thinking.
Finally in the bottom of the toolbar to set the left and right placeholder with two buttons, this bbar in the "ExtJS" tabpanel tab and modify the contents of the tab (click the open link) has said, the key is two button onclick event, first say the simple "close" button, This button must be set Window1 is hidden, do not use the close () method, this close is even this window1 variable is destroyed, no longer open, so can only be hidden. The most important thing is to submit the button, first to get Form1 the form, and then to indicate its properties after submission, action.result.msg is to accept, the backend after you verify the success of the information. Here is only one case, in fact, there is a failure situation, the complete writing is this:
                Listeners: {                    click:function () {                        var thisform = Form1.getform ();                        Thisform.submit ({                            URL: "formsubmit.php",                            success:function (form, action) {                                //What happens after success                                });                            }, Failure:function (form, action) {//What happens after failure                                });}}                        );                }}
Its success is based on formsubmit.php, the backend Web page, the final print out of the string determined that the string is a JSON
If this is the JSON, it means that the form submitted successfully, it returns the value of SS to the front end of the message
{"Success": True, "MSG": "SS"}
If you change the value of success from true to failure, it means that the form submission fails and returns the message with the SS value to the front end.
After the form is submitted, through the callback function of the pop-up window to complete the popup window action, this in the "ExtJS" with the date component of the text input box, the container and Ext.Msg.alert alarm box alarm two times "(Click to open the link) also talked about.
In summary, the entire login.html code is as follows, note that any code just mentioned will be written in Ext.onready (function () {}), the {}, this from "ExtJS" ExtJs4.2.1 Configuration and HelloWorld " (Click to open the link) has been mentioned many times.
Also note the comma of the declaration between the attribute and the attribute, do not end the JSON with a comma, or the IE series will not be recognized, please do not leave a comma at the end of the "JavaScript" Array definition (click the Open link) already said.
<!        DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

2, formsubmit.php
So the back-end processing page can also be written like this, of course, there is no error setting, just get the front end, the various form components passed over the value, and then put into the MSG.
The only noteworthy is the processing of the check box, if the front-end check box is not selected, it passes the value is empty, it must be processed here, or a printed JSON string in the MSG part is not normal, Login.html This page has been unable to wait for the desired JSON string, and will remain in an unresponsive state. Friends using JSP and ASPX are also faced with this problem and are likely to have null pointers or something.
<?php$username=$_request["username"]; $password =$_request["Password"];if (Empty ($_request["C1"]) {$c 1= "off";} else{$c 1=$_request["C1"];} if (Empty ($_request["C2"])) {$c 2= "off";} else{$c 2=$_request["C2"];} $combobox =$_request["ComboBox"]; $radiobox =$_request["Radiobox"];echo "{' Success ': true, ' msg ': ' username passed in: {$username }<br> Password: {$password The value of the}<br> check box: {$c 1},{$c the value of the 2}<br> drop-down list: {$combobox}<br> the value of the radio box: {$radiobox} '} ' ;? >


Form plug-ins and form layout, submission, and validation for "ExtJS" ExtJS