ExtJS Form Формы, поля ввода, чебоксы и селекторы

Начнем с создания формы с единственным полем ввода input.

var name = new Ext.form.TextField({
    fieldLabel:'Фамилия И.О.',
    name:'name',
    value:'Неизвестнй Б.П.',
    id:ex1
});

var form = new Ext.FormPanel({// инициализация панели с формой
    renderTo: 'ex0',// результат поместить в контейнер с ID='ex0'
    items:[name] // массив элементов формы или их конфигураций
});

Выше расположенный код эквивалентен следующему:

var form = new Ext.FormPanel({ // инициализация панели с формой
    renderTo: 'ex0' // результат поместить в контейнер с ID='ex0'
    items:[{ // массив элементов формы или их конфигураций
        xtype:'textfield',
        fieldLabel:'Фамилия И.О.',
        name:'name',
        value:'Неизвестный Б.П.'
    }]
});

В результате выполнения данного кода ExtJS выведет на экран форму следующего вида.



Вывод простого текстового поля:

new Ext.form.TextField({
   fieldLabel:'Фамилия И.О.', // текст для label
   name:'fio', // параметр name для input
   value:'Неизвестный Б.П,', // дефотлное значение
   renderTo: 'ex1'// результат поместить в контейнер с ID='ex1'
});



То же самое поле но сделаное недоступным для ввода:

new Ext.form.TextField({
    fieldLabel:'должность',
    name:'position',
    value:'лаборант',
    renderTo: 'ex2',
    disabled: true
});



То же самое поле но с размещенной в нем подсказкой, которая появляется когда поле пустое.

new Ext.form.TextField({
    fieldLabel:'E-mail',
    name:'mail',
    emptyText:'Введите сюда любой адрес электронной почты',
    renderTo: 'ex3',
    width:500
});



Для использования поля ввода Textarea воспользуйтесь следующим кодом:

new Ext.form.field.TextArea({
    renderTo: 'ex4',
    name: 'message',
    fieldLabel: 'Биография',
    width:500
});



Так выводится поле для загрузки файлов:

new Ext.form.field.File({
    renderTo: 'ex5',
    name: 'photo',
    fieldLabel: 'Фото 3x6',
    labelWidth: 100,
    buttonText: 'Select Photo…'
});



Код поля для ввода чисел с селектором:

new Ext.form.field.Number({
    renderTo: 'ex6',
    name: 'age',
    fieldLabel: 'Возраст',
    value: 33,
    maxValue: 65,
    minValue: 16
});



Поле без окошка ввода, но с выводом текста, который также может быть оформлен с помощью CSS:

new Ext.form.field.Display({
    renderTo: 'ex8',
    fieldLabel: 'Просто Текст',
    name: 'any-text',
    value: 'просто какой-то текст'
    //  fieldCls :'red' - задать CSS-класс
    //  value: '<em>текст курсивом</em>' - вывести HTML
});



Код вывода селектора с выводом времени:

new Ext.form.field.Time({
    renderTo: 'ex9',
    name: 'time',
    format: 'H:i', //  формат времени: 24 часа в сутках
    fieldLabel: 'Время',
    minValue: '8:00',
    maxValue: '23:00',
    value:'15:00',
    increment: 30,
    anchor: '100%'
});



Поле ввода даты со всплывающим календарем:

new Ext.form.field.Date({
   new Ext.form.field.Date({
     renderTo: 'qqq',
     xtype: 'datefield',
     anchor: '100%',
     fieldLabel: 'From',
     name: 'from_date',
     maxValue: new Date() // Ограничено вводом текущей даты или ранее
 });
});



Скрытое поле:

<input type="hidden" name="hidden_field_1" value="value from hidden" />

new Ext.form.field.Hidden({
    renderTo: 'ex111',
    xtype: 'hiddenfield',
    name: 'hidden_field_1',
    value: 'value from hidden field'
});



WYSIWYG-редактор. Обычно его не используют.
Код для вывода редактора на экран:


Ext.create('Ext.form.HtmlEditor', {
    width: 580,
    height: 250,
    renderTo: 'ex2'
});



Комбобокс:

Ext.onReady(function(){ // отрабатывается по готовности DOM
    new Ext.form.ComboBox({
        renderTo: 'ex1',
        fieldLabel: 'Страна',
        store:  {            // конфигурация хранилища
                  fields: ['domen', 'name'],
                  data: [
                          {'domen':'ru', 'name':'Россия'},
                          {'domen':'ua', 'name':'Украина'},
                          {'domen'':'bf', 'name':'Буркино-Фасо'}
                        ]
                },
        displayField: 'name', // это текстовое значение <option>…</option>
        valueField: 'domen'   // а это значение поля <option value="…">
    });
});



Чекбоксы:

new Ext.form.FieldContainer({
    fieldLabel: 'Ваш заказ',
    defaultType: 'checkboxfield', // дефолное значение xtype
    items: [
        {
            xtype:  'checkboxfield', // если указан defaultType, то не обязательно
            boxLabel: 'Водка',
            name: 'order',
            inputValue: '1',
            checked: true // выбрано
        }, {
            boxLabel: 'Девочки',
            name: 'order',
            inputValue: '2'
        }, {
            boxLabel: 'Семечки',
            name: 'order',
            inputValue: '3'
        }
    ],
    renderTo: 'ex3'
});



Радио-кнопки:

new Ext.form.FieldContainer({
    fieldLabel: 'Ваш заказ',
    defaultType: 'radiofield', // дефолное значение xtype
    items: [
        {
            boxLabel: 'Водка',
            name: 'order2',
            inputValue: '1',
            checked: true,  // выбрано
            id: 'radio1'
        }
    ],
    renderTo: 'ex4'
});



Submit формы:

new Ext.form.FormPanel({ // инициализация панели с формой
    bodyStyle:'padding: 10px',
    width:400,
    renderTo: 'ex0', // результат поместить в контейнер с ID='ex0'
    id: 'login-form', // ID панели. Он понадобится для сабмита формы
    bodyStyle: 'padding:15px;',
    url:'test.php', // url по которому будет оправлена форма
    items: [ // массив полей формы
            {   xtype: 'textfield',
                fieldLabel: 'Login',
                name: 'login' // имя поля <input name="login"

            },
            {
                xtype: 'textfield',
                name: 'pass', // имя поля <input name="pass"
                fieldLabel: 'Password',
                inputType: 'password' // Не просто textfield, а  password

            }],
    buttons: [{  // Набор кнопок. Здесь она всего одна.
                text: 'Login',
                handler: function(){
                    Ext.getCmp('login-form') // По ID адресуемся к панели
                    .getForm() // берем форму
                    .submit();
                }
    }]
});



Для отправления сообщения в форму ввели кнопку, на которую навесили функцию отвечающую за отправление данных формы.

Сначала определяется форма, данные из которорй нужно отправить на сервер. При инициализации этой форме мы указали свой внутренний ID компонента id: 'login-form'.
Теперь к этому компоненту можно обратиться следующим образом:
Ext.getCmp('login-form') - getCmp посволяет получить компонент по id.
Из полученного компонента вытаскиваем форму Ext.getCmp('login-form').getForm()
Вызываем метод submit формы.

Теперь можно рассмотреть подробнее параметры Submit.

.getForm() // берем форму
.submit({  // сабмитим
        success: // устанавливаем обработчик нормального завершения
        function(form, action){ //  action.result - json отклик сервера Ext.Msg.alert(action.result.msg);}  
                                    },
        failure: // устанавливаем обработчик ошибки
        function(form, action){ Ext.Msg.alert(action.result.msg);}
});

В качестве данных передается объект, в котором указаны действия, которые отвечают за получение отклика сервера:
success - удачный результат;
failure - неудачный результат.

Сервер должен прислать ответ в формате JSON, в котором в качестве подтверждения должно быть свойство "success", которое свидетельствует о том что обработка прошла успешно.
Пример отклика сервера об успешной обработке:

{success:true,myFirstMsg:'OK!'}

Пример отклика сервера при ошибке:

{success:false,msg:'Error for example!'}

Через failure так же можно передавать поля и тексты для вывода сообщений об ошибке.