AJAX авторизация + ExtJS

Июнь 21, 2009

ExtJSВдоволь "накопипастившись", если можно так выразится, я решил публиковать собственные статьи на тему программирования. Начну с моего любимого фрэймворка - Ext JS. Мое первое впечетление о данном фрэймворке было ужасным, я проклинал тот день когда начальство сказало, что пора бросать jQuery и переходить на Ext JS. На тот момент я и представить себе не мог, что это еще за Ext JS и с чем его едят... проведя пару месяцев за мануалами и примерами кода, я понял что данный фрэймворк - это великая сила! :)

Начнем с формы для авторизации. Зачем нужна авторизация и как она осуществляется - я писать не собираюсь. В данном примере я лишь приведу кусок кода, который позволяет построить красивую формочку, для ввода данных  и отправки на сервер с помощью Ajax'a.

Создаем форму с двумя полями (логин, пароль):

login_form = new Ext.form.FormPanel({
        labelWidth: 55,
        frame: true,
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Login',name: 'login',anchor:'100%'
        },{
            fieldLabel: 'Password',name: 'password',inputType: 'password',anchor: '100%'
        }]
});

Теперь для нашей формы необходим контейнер. Это может быть HTML элемент DIV, либо что-то по интереснее :)

login_window = new Ext.Window({
        title: 'Login form',
        width: 300,
        height: 150,
        layout: 'fit',
        plain:true,
        closable: false,
        bodyStyle:'padding:5px;',
        items: login_form,
        buttons: [{ text: 'Login', },{ text: 'Cancel' }]
    });

Мы создали плавающее окно, в которое поместили нашу форму ( items: login_form). Теперь необходимо реализовать Ajax запрос, который будет обрабатывать форму и отправлять полученные данные на сервер. Для этого мы расширим функционал кнопки login:

buttons: [{ text: 'Login', handler :
                    function() {
                        login_window.getEl().mask('Login...');
                       
                        Ext.Ajax.request({
                            url: '/users/login',
                            params: {user_login: login_form.getForm().getValues().login,
                                     user_password: login_form.getForm().getValues().password},
                            success: function (result, request) {                                                           
                                if (result.responseText != '') {
                                    Ext.MessageBox.show({
                                        title: 'Error',
                                        msg: result.responseText,
                                        minWidth: 200,
                                        bottons: Ext.MessageBox.OK,
                                        icon: Ext.MessageBox.WARNING
                                    });
                                    login_window.getEl().unmask(true);                                   
                                } else {
                                    window.location.href = '/admin';
                                    window.event.returnValue = false;
                                }
                            }
                        });
                    }
                },{ text: 'Cancel', handler : function(){  login_window.close();   }
}]

На севрер отправляется $_POST массив из двух элементов user_login и user_password. Обработав данные, можно вернуть сообщение об ошибки. Если сервер ничего не вернул, значит авторизация прошла успешно и пользователя перебросит на страницу админки window.location.href = '/admin';.

Чтобы вывести окно на экран, необходимо у login_window вызвать метод show() -> login_window.show(); Вызов рабочего окна можно установить по нажатию на кнопку либо другой HTML элемент.

Комментарии