ExtJS. Создаем логин-форму / ExtJS / AjaxTips - место встречи программистов на JavaScript

ExtJS. Создаем логин-форму

Опубликовал root в блоге ExtJS 14 декабря 2009, 07:41

Данный урок расчитан на программистов, которые только начинают осваивать фреймворк ExtJS. Задача урока дать начальное представление о том, как стандартными средствами ExtJS быстро создать форму для входа в систему. Чтобы избежать путаницы, сразу хочу уточнить, что под словом «система» я понимаю разрабатываемое вами веб-приложение или сайт.

Сегодня познакомимся с двумя новыми классами фреймворка ExtJS: Ext.FormPanel и Ext.Window. Именно эти классы нам понадобятся для того, чтобы создать красивую и функциональную форму для входа в систему (пример скрипта можно посмотреть в самом низу урока).
Ext.FormPanel

Класс Ext.FormPanel используется всегда когда появляются необходимость получить данные от пользователя, фактически этот класс создает обычную веб-форму. Например, в нашем уроке это форма для получения имени пользователя (Login) и пароля (Password).

Для того, чтобы создать экземпляр класса делаем следующее:



var loginForm = new Ext.FormPanel({
... // здесь идут параметры инициализации формы 
});

Ext.Window

Клас Ext.Window используется для создания всплывающего окна с которым можно выполнять стандартные для всех окон действия — перетаскивать по экрану, изменять размер и т.д. Для создания окна используется следующий код:


var myWindow = new Ext.Window({
... // здесь идут параметры для инициализации окна
});

myWindow.show();

Реализация формы для входа в систему

Чтобы реализовать клиентскую часть нашего приложения нам понадобится два файла: login.html и login.js. В первом будет располагаться HTML верстка, а во втором непосредственно код для создания окна. При создании урока, я предполагал, что у вас уже установлен фреймворк ExtJS и для проверки созданной формы вы создали в каталоге examples подкатолог login, в котором и разместяться указанные файлы.

Файл login.html:


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Простая форма для входа</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="login.js"></script>
</head>
<body>


</body>
</html>

Файл login.js:


Ext.onReady(function(){


/*
 *  Создаем форму для входа
 */
var loginForm = new Ext.FormPanel({

  url:'login.php',
  frame: true,
  items: [
      {
	  xtype: 'textfield',
	  id: 'login',
	  fieldLabel: 'Login',
	  allowBlank:false,
	  anchor: '90%'
      },{
	  xtype: 'textfield',
	  fieldLabel:'Password',
	  name:'password',
	  inputType:'password',
	  anchor: '90%',
	  allowBlank:false
      }
  ],

  buttons: [
      {
	text: 'Login',
	handler: function() {
	    loginForm.getForm().submit({
		waitTitle: 'пожалуйста подождите...',
		waitMsg: 'вход в систему выполняется'
	    });
	}
      }
  ]
});


/*
 *  Создаем окно, в которое помещаем форму
 */
var loginWindow = new Ext.Window({
frame:true,
title:'Вход в систему',
width:330,
closable: false,
items: loginForm
});
 
loginWindow.show();

});