Extjs4创建简单的用户登录

首先给出Extjs代码：

Ext.define('MyApp.view.ui.MyForm', {
    extend: 'Ext.form.Panel',
    height: 124,
    width: 343,
    bodyPadding: 10,
    title: '用户登录',
    initComponent: function() {
        var me = this;
        me.items = [
            {
                xtype: 'textfield',
                name: 'username',
                fieldLabel: '用户名',
                labelWidth: 60,
                allowBlank: false,
                anchor: '100%',
                emptyText:'请填写用户名'
            },
            {
                xtype: 'textfield',
                name: 'password',
                inputType:'password',
                fieldLabel: '密码',
                labelWidth: 60,
                allowBlank: false,
                anchor: '100%',
                emptyText:'请填写密码'
            },
            {
                xtype: 'container',
                padding: '0 0 0 65',
                items: [
                    {
                        xtype: 'button',
                        text: '登录',
                        handler:function(btn){
                            var form=btn.up('form').getForm();
                            if(form.isValid())
                            {
                                form.submit({
                                    url:'pro.php',
                                    success:function(){
                                        location.href="main.php";
                                    },
                                    failure:function(grid,action)
                                    {
                                        Ext.Msg.alert('信息提示',action.result.msg);
                                    }
                       
                                });
                            }
                            else
                            {
                                Ext.Msg.alert('信息提示','请填写用户名和密码');
                            }
                        
                        }
                    },
                    {
                        xtype: 'button',
                        margin: '0 0 0 10',
                        text: '重置',
                        handler:function(btn){
                            btn.up('form').getForm().reset();
                        }
                    }
                ]
            }
        ];
        me.callParent(arguments);
    }
});


Ext.onReady(function(){
    Ext.create('MyApp.view.ui.MyForm',{
        renderTo:Ext.get('main')
    });
});

下面给出服务端代码（PHP）:

<?php

$username=$_POST['username'];
$password=$_POST['password'];

if($username=='root' && $password=='123')
{
    echo "{
        success:true,
        msg:'登陆成功！'
    }";
    
}
else
{
    echo "{
        success:false,
        msg:'登录失败！'
    }";
}

?>