var TEXTFIELD_Login = new Ext.form.TextField({
    fieldLabel: 'Login',
    id: 'TEXTFIELD_Login'
});
var TEXTFIELD_Password = new Ext.form.TextField({
    fieldLabel: 'Password',  
    inputType: 'password',
    id: 'TEXTFIELD_Password'
});

var FORM_Login = new Ext.FormPanel({
    labelWidth: 75, // label settings here cascade unless overridden
    url:'loginForm.php',
    bodyBorder: false, 
    frame: true,
    bodyStyle:'padding:10px 10px 0',   
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    border: false,  
    buttonAlign: 'center',   
    buttons:[{
        text:'Login',
        handler: function() {
            FORM_Login.getForm().submit({
                clientValidation: true,
                url: 'php/loginForm.php',
                params: {
                    login: TEXTFIELD_Login.getRawValue(), 
                    password : TEXTFIELD_Password.getRawValue(), 
                },
                success: function(form, action) {
                    Ext.Msg.alert('Login', 'You have successfully logged in'); 
                    document.location.href = '/';   
                },
                failure: function(form, action) {
                    Ext.Msg.alert('Login', 'Login fail');
                    WIN_Login.hide();    
                }
            });
        }
    },{
        text:'Cancel',
        handler: function(){
            WIN_Login.hide();
        }
    }],
    items: [TEXTFIELD_Login,TEXTFIELD_Password]


});

function loginOk() {

}



var WIN_Login = new Ext.Window({
    title: 'Login',
    iconCls: 'iConLogin', 
    id: 'WIN_Login', 
    layout: 'fit',
    bodyBorder: false, 
    height: 150,
    resizable: false,
    closeAction: 'hide',
    plain: true,
    animateTarget: 'BTN_Login',
    closable: false,
    border:false,

    items: [FORM_Login]
});