From Learn About the Ext JavaScript Library

Рекомендую скачать исходники для работы с этими примерами, чтобы опробовать работу с формами на практике. Здесь вы можете посмотреть работающий пример.

Contents 1 Создание формы 2 Создание полей формы 3 Собираем форму 4 Что дальше?

Создание формы

Для начала создадим форму. Этот код примерно соответствует написанию тега <form> в HTML.

var form_employee = new Ext.form.Form({
        labelAlign: 'right',
        labelWidth: 175,
        buttonAlign: 'right'
});

Создание полей формы

В нашем примере форма будет содержать следующие поля: Имя(name), Должность(title), Дата приема на работу(hire_date) и Запись активна(active). Первые два поля – «Имя» и «Должность» - это простые текстовые поля, поэтому мы объявим их как TextField.

Обратите внимание на параметр name, который как и его аналог в HTML определяет название поля.

var employee_name = new Ext.form.TextField({
        fieldLabel: 'Имя',
        name: 'name',
        width:190
});
 
var employee_title = new Ext.form.TextField({
        fieldLabel: 'Должность',
        name: 'title',
        width:190
});

Следующее поле, «Дата приема на работу» – это дата, соответственно объявим его как DateField, чтобы использовать поле с календариком.

Параметр конфигурации format использует стандарт форматирования даты принятый в PHP, и подробно описан в документации. Вам нужно исправить формат даты a этом поле в соответствии и используемым вами.

var employee_hire_date = new Ext.form.DateField({
        fieldLabel: 'Дата приема на работу',
        name: 'hire_date',
        width:90,
        allowBlank:false,
        format:'m-d-Y'
});

Последний элемент формы «Запись активна» - это булево значением, поэтому мы объявим его как Checkbox.

var employee_active = new Ext.form.Checkbox({
        fieldLabel: 'Запись активна',
        name: 'active'
});

Собираем форму

Теперь добавим все поля формы в группу, которую поместим внутрь нашей формы. Если вы не хотите обводить поля в рамку, используйте вместо метода fieldset метод add.

form_employee.fieldset(
        {legend:'Редактирование карточки сотрудника'},
        employee_name,
        employee_title,
        employee_hire_date,
        employee_active
);

И наконец с помощью метода addButton добавим к форме кнопку отправки формы на сервер и добавим простую проверку ошибок заполнения. Вызвав метод render и передав ему id div-а мы наконец разместим форму на странице внутри этого div-а.

form_employee.addButton('Сохранить', function(){
        if (form_employee.isValid()) {
                Ext.MessageBox.alert('Успешно', 'Вы правильно запонили форму.');     
        }else{
                Ext.MessageBox.alert('Ошибка', 'Пожалуйста, исправьте ошибки запонения!');
        }
}, form_employee);
 
form_employee.render('employee-form');

Что дальше?

В этом руководстве мы рассмотрели процесс создания форм, но совершенно не уделили внимания их обработке, без которой формы попросту бесполезны. Обработку форм мы разберем в одном из следующих уроков.

• Документация по Ext API для программистов
• Форумы пользователей Ext