.. / 9.1 ExtJS: Форма. Простые элементы

  1. ExtJS-4

Лучше всего смотреть как работают элементы форм в официальной документации. Здесь я просто свел все примеры на одну страницу и по необходимости снабдил комментариями. Чуть более сложные компоненты я рассмотрю дальше.

Пример 1. Текстовое поле Ext.form.TextField

Поскольку здесь очень много мелких примеров, я буду рендерить их не в окно, как это делал ранее, а непосредственно на эту страницу. Но для начала рассмотрю как все-таки создавать форму c одним единственным input[@type='text']

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

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

Как уже говорил раньше, ExtJS позвоялет создавать компоненты несколькими способами. В примерах я использовал два основных варианта. И оба сейчас приведу на примере создания текстового окна.

1.2

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

Этот код эквивалентен следующему:

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

Дальше я буду рендерить (вставлять) элементы форм непосредственно в страничку и указывать необходимые данные

Пример 2. Текстовое поле Ext.form.TextField, xtype: textfield

 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
    });

Пример 4. Ext.form.field.TextArea xtype: textarea

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

Пример 5 Поле загрузки файлов Ext.form.field.File, xtype: filefield

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

    });

Пример 6 Поле ввода чисел. Ext.form.field.Number, xtype: numberfield

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

Пример 8 Просто текст. Ext.form.field.Display, xtype: displayfield

Здесь после Label выводится обычный текст. При необходимости этот текст можно украсить через CSS или HTML

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

Пример 9. Время. Ext.form.field.Time xtype: timefield

В этом компоненте - гадость. По умолчанию стоит американский формат времени («два часа после обеда»).

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%'

    });

Пример 9. Дата Ext.form.field.Date, xtype: datefield

   new Ext.form.field.Date({
      new Ext.form.field.Date({
        renderTo: 'qqq',
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'From',
        name: 'from_date',
        maxValue: new Date()  // limited to the current date or prior

    });
    });

Пример 11. Скрытое поле Ext.form.field.Hidden, xtype: hiddenfield, hidden

<- поле отрендерилось сюда
// <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'
    });

Пример 12. WYSIWYG Ext.form.field.HtmlEditor

Унылое говно, которое наверное проще выкинуть, чем допиливать. Впрочем, судя по сообщениям в форумах умельцы так и делают. Код приведу, но вставлять на стр. Не буду. Оно того не стоит.

 Ext.create('Ext.form.HtmlEditor', {
        width: 580,
        height: 250,
        renderTo: 'ex2'
    });
  1. 2011-12-04
  2. ExtJS-4
  1. docs.sencha.com/ext-js/4-0/#!/api - Form API на официальном сайте
  2. www.quizzpot.com/2009/10/ext-js-basic-forms-and-fields/ - quizzpot.com ExtJS basic forms and fields
Go Index Test