.. / 9.2 ExtJS: Форма. Сложные (составные) элементы

  1. ExtJS-4

Пример 1. Листбокс Ext.form.field.ComboBoxx, type: combobox, combo

Листбокса в ExtJS нет. Вмсето него реализован громоздкий и сложный компонент в котором совмещены функции листбокса и поля текстового ввода, при наборе в котором происходит фильтрация заложенных в листбоксе данных типа гугловского Ajax Sugget. Он и создается при помощи хранилища, которое ранее рассматривалось в примерах с таблицами. Предполагается что источник данных для него может быть каким угодно - и локальный и удаленный и при этом в любом формате (json, xml)

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=»…»>
    });
});

В документации дано большое количество примеров различных варианов работы этого копонента, включая преобразование его в очень мощный и полноценный Ajax Suggest

Пример 3. Чекбоксы Checkbox+FieldContainer

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

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

Пример 4.RADIO Ext.form.field.Radio

Код практически тот же что и у чекбоксов

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

Далее

  1. Form. Часть 3 - Submit
  2. Деревья в ExtJS. Часть 1. Инициализация
  1. 2011-12-04
  2. ExtJS-4
  1. www.quizzpot.com/2009/10/ext-js-basic-forms-and-fields/ - quizzpot.com ExtJS basic forms and fields
  2. docs.sencha.com/ext-js/4-0/#!/api - Form API на официальном сайте
Go Index Test