效果图

Login.js代码

/// <reference path="vswd-ext_2.0.2.js" />


Ext.onReady(function() {

Ext.QuickTips.init();

<span style="color: green">// Create a variable to hold our EXT Form Panel. 
// Assign various config options as seen.     
</span><span style="color: blue">var </span>login = <span style="color: blue">new </span>Ext.FormPanel({
    labelWidth: 80,
    url: <span style="color: #a31515">'Default.aspx'</span>,
    frame: <span style="color: blue">true</span>,
    title: <span style="color: #a31515">'请登陆'</span>,
    defaultType: <span style="color: #a31515">'textfield'</span>,
    monitorValid: <span style="color: blue">true</span>,
    <span style="color: green">// Specific attributes for the text fields for username / password. 
    // The &quot;name&quot; attribute defines the name of variables sent to the server.
    </span>items: [{
        fieldLabel: <span style="color: #a31515">'用户名'</span>,
        name: <span style="color: #a31515">'loginUsername'</span>,
        allowBlank: <span style="color: blue">false
    </span>}, {
        fieldLabel: <span style="color: #a31515">'密码'</span>,
        name: <span style="color: #a31515">'loginPassword'</span>,
        inputType: <span style="color: #a31515">'password'</span>,
        allowBlank: <span style="color: blue">false


}],

        <span style="color: green">// All the magic happens after the user clicks the button     
        </span>buttons: [{
            text: <span style="color: #a31515">'登陆'</span>,
            formBind: <span style="color: blue">true</span>,
            <span style="color: green">// Function that fires when user clicks the button 
            </span>handler: <span style="color: blue">function</span>() {
                login.getForm().submit({
                    method: <span style="color: #a31515">'POST'</span>,
                    waitTitle: <span style="color: #a31515">'连接服务器'</span>,
                    waitMsg: <span style="color: #a31515">'传送数据...'</span>,

                    <span style="color: green">// Functions that fire (success or failure) when the server responds. 
                    // The one that executes is determined by the 
                    // response that comes from login.asp as seen below. The server would 
                    // actually respond with valid JSON, 
                    // something like: response.write &quot;{ success: true}&quot; or 
                    // response.write &quot;{ success: false, errors: { reason: 'Login failed. Try again.' }}&quot; 
                    // depending on the logic contained within your server script.
                    // If a success occurs, the user is notified with an alert messagebox, 
                    // and when they click &quot;OK&quot;, they are redirected to whatever page
                    // you define as redirect. 

                    </span>success: <span style="color: blue">function</span>() {
                        Ext.Msg.alert(<span style="color: #a31515">'Status'</span>, <span style="color: #a31515">'Login Successful!'</span>, <span style="color: blue">function</span>(btn, text) {
                            <span style="color: blue">if </span>(btn == <span style="color: #a31515">'ok'</span>) {
                                <span style="color: blue">var </span>redirect = <span style="color: #a31515">'Default.aspx'</span>;
                                window.location = redirect;
                            }
                        });
                    },

                    <span style="color: green">// Failure function, see comment above re: success and failure. 
                    // 如果登录失败，弹出对话框。 

                    </span>failure: <span style="color: blue">function</span>(form, action) {
                        <span style="color: blue">if </span>(action.failureType == <span style="color: #a31515">'server'</span>) {
                            obj = Ext.util.JSON.decode(action.response.responseText);
                            Ext.Msg.alert(<span style="color: #a31515">'登陆失败!'</span>, obj.errors.reason);
                        } <span style="color: blue">else </span>{
                            Ext.Msg.alert(<span style="color: #a31515">'Warning!'</span>, <span style="color: #a31515">'Authentication server is unreachable : ' </span>+ action.response.responseText);
                        }
                        login.getForm().reset();
                    }
                });
            }


}]

        });


        <span style="color: green">// This just creates a window to wrap the login form. 
        // The login object is passed to the items collection.       
        </span><span style="color: blue">var </span>win = <span style="color: blue">new </span>Ext.Window({
            layout: <span style="color: #a31515">'fit'</span>,
            width: 300,
            height: 150,
            closable: <span style="color: blue">false</span>,
            resizable: <span style="color: blue">false</span>,
            plain: <span style="color: blue">true</span>,
            border: <span style="color: blue">false</span>,
            items: [login]
        });
        win.show();
    });</pre>




   original link:
   <a href='http://Apiaceae.github.io/blog/2009/06/14/ExtJS%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2/'>http://Apiaceae.github.io/blog/2009/06/14/ExtJS%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2/</a><br/>
   &nbsp;written by <a href='http://Apiaceae.github.io'>Hooker</a>
   &nbsp;posted at <a href='http://Apiaceae.github.io'>http://Apiaceae.github.io</a>
   </p>