AJAX авторизация + ExtJS - Статьи - Каталог статей - World Wide WEB servises
Воскресенье, 11.12.2016, 09:57

Hack FoR LiFE inTeRnet -                        "hackersoft"

Вы вошли как Гость | Группа "Залетные"| 
Категории раздела
Статьи [30]
история Украины [33]
метрология [25]
психология [30]
прочее [0]
тут вы найдете информацию
+18 [0]
Мини-чат
опрос
какая у вас ОС?
Всего ответов: 535
облако
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
...

Каталог статей

Главная » Статьи » Статьи

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

Начнем с формы для авторизации. Зачем нужна авторизация и как она осуществляется - я писать не собираюсь. В данном примере я лишь приведу кусок кода, который позволяет построить красивую формочку, для ввода данных и отправки на сервер с помощью 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, либо что-то по интереснее smile

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 элемент.

Источник: http://blog4smart.com/node/71
Категория: Статьи | Добавил: mank (07.06.2011)
Просмотров: 1888 | Теги: AJAX, ExtJS | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]