Как сделать форму в Ext JS 6

Формовая панель унаследована от панели и расширена функциональностью связанной с формами: управление полями, валидация, отправка и т.д. По умолчанию используется лейаут anchor, но это можно поменять. Для того чтобы задать значения по умолчанию для полей формы надо использовать опцию fieldDefaults.

События поддерживаемые формовой панелью:
  • beforeaction: происходит перед выполнением любого действия;
  • actionfailed: происходит при неудачном выполнении действия;
  • actioncomplete: происходит после выполнения действия;
  • validitychange: происходит при изменении валидности всей формы;
  • dirtychange: происходит при изменении dirty-состояния формы.

Поля

Ext JS предоставляет следующие виды полей:
  • Ext.form.field.Checkbox
  • Ext.form.field.ComboBox
  • Ext.form.field.Date
  • Ext.form.field.File
  • Ext.form.field.Hidden
  • Ext.form.field.HtmlEditor
  • Ext.form.field.Number
  • Ext.form.field.Radio
  • Ext.form.field.Text
  • Ext.form.field.TextArea
  • Ext.form.field.Time

Ext.form.field.Text

Базовое текстовое поле. Свойство vtype используется для валидации. Если установить ему значение email то оно будет проверять валидность введенного эл. почтового адреса. Свойство allowBlank позволяет или не позволяет оставлять поле пустым.
Ext.create('Ext.form.field.Text', {
 renderTo: Ext.getBody(),
 name: 'email',
 fieldLabel: 'Email',
 allowBlank: false,
 vtype: 'email'
});

Ext.form.field.Number

Числовое поле расширяется от spinner-поля, которое в свою очередь было расширено от текстового поля.
Ext.create('Ext.form.field.Number', {
 renderTo: Ext.getBody(),
 name: 'Count',
 fieldLabel: 'Count',
 value: 0,
 maxValue: 10,
 minValue: 0
});
Вы можете удалить spinner-кнопки, обработчики нажатия на клавиши стрелок и колесико мыши через свойства hideTrigger, keyNavEnabled и mouseWheelEnabled.

Ext.form.field.ComboBox

У combobox есть свойство store. datastore предоставляет данные для выпадающего списка. datastore это часть data packages в ExtJS.

Другое важное свойство это queryMode. Оно может быть локальным или удаленным. При удаленном datastore грузится в режиме runtime путем отправки запроса к удаленному серверу.
var months = Ext.create('Ext.data.Store', {
 fields: ['abbr', 'name'],
 data: [
 {"abbr":"JAN", "name":"January"},
 {"abbr":"FEB", "name":"February"},
 {"abbr":"MAR", "name":"March"},
 {"abbr":"APR", "name":"April"},
 {"abbr":"MAY", "name":"May"},
 {"abbr":"JUN", "name":"June"},
 {"abbr":"JUL", "name":"July"},
 {"abbr":"AUG", "name":"August"},
 {"abbr":"SEP", "name":"September"},
 {"abbr":"OCT", "name":"October"},
 {"abbr":"NOV", "name":"November"},
 {"abbr":"DEC", "name":"December"}
 ]
});
Ext.create('Ext.form.ComboBox', {
 fieldLabel: 'Choose Month',
 store: months,
 queryMode: 'local',
 displayField: 'name',
 valueField: 'abbr',
 renderTo: Ext.getBody()
});

Ext.form.field.HtmlEditor

В Ext JS есть сносный HTML-редактор:
Ext.create('Ext.form.HtmlEditor', {
 width: 800,
 height: 200,
 renderTo: Ext.getBody()
});

Валидация полей

Большинство полей предоставляют собственные правила для валидации полей. Например если ввести не числовое значение в числовое поле, то будет показано сообщение о неправильном вводе. У текстовых полей есть свойства  allowBlank, minLength, и maxLength. Также для валидации могут быть использованы регулярные выражения.

Контейнеры полей

Ext.form.CheckboxGroup

CheckboxGroup расширяет FieldContainer и используется для группировки флажков.
Ext.create('Ext.form.CheckboxGroup', {
 renderTo: Ext.getBody(),
 fieldLabel: 'Skills ',
 vertical: true,
 columns: 1,
 items: [
 { boxLabel: 'C++', name: 'rb', inputValue: '1' },
 { boxLabel: '.Net Framework', name: 'rb', inputValue: '2',
checked: true },
 { boxLabel: 'C#', name: 'rb', inputValue: '3' },
 { boxLabel: 'SQL Server', name: 'rb', inputValue: '4' },
 ]
});

Ext.form.FieldContainer

FieldContainer полезен когда надо объединить множество связанных полей в группу и дать этой группе текстовую метку.
Ext.create('Ext.form.FieldContainer', {
 renderTo: Ext.getBody(),
fieldLabel: 'Name',
 layout: 'hbox',
 combineErrors: true,
 defaultType: 'textfield',
 defaults: {
 hideLabel: 'true'
 },
 items: [{
 name: 'firstName',
 fieldLabel: 'First Name',
 flex: 2,
 emptyText: 'First',
 allowBlank: false
 }, {
 name: 'lastName',
 fieldLabel: 'Last Name',
 flex: 3,
 margin: '0 0 0 6',
 emptyText: 'Last',
 allowBlank: false
 }]
});

Ext.form.RadioGroup

RadioGroup расширяет CheckboxGroup и используется для группировки радио-кнопок.
Ext.create('Ext.form.RadioGroup', {
 renderTo: Ext.getBody(),
 fieldLabel: 'Sex ',
 vertical: true,
 columns: 1,
 items: [
 { boxLabel: 'Male', name: 'rb', inputValue: '1' },
 { boxLabel: 'Female', name: 'rb', inputValue: '2' }

]});

Отправка формы

Для того чтобы отправить форму надо воспользоваться методом submit. Метод getForm используется для получения формы. А метод isValid для того чтобы проверить валидность формы.
var form = this.up('form').getForm();
if (form.isValid()) {
 form.submit({
 url: 'someurl',
 success: function () {

 },
 failure: function () {

 }
 });
} else {
 Ext.Msg.alert('Error', 'Fix the errors in the form')
}


Теги: