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

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

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:'Тынгылчав И.'
    }]
});

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

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

new Ext.form.field.Display({
        renderTo: 'ex8',
        fieldLabel: 'Просто Текст',
        name: 'any-text',
        value: 'просто какой-то текст'
        //  fieldCls :'red' - задать CSS-класс
        //  value: 'текст курсивом' - вывести 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()  // limited to the current date or prior

    });
    });

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

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