Заполнение формы

В прошлом разделе мы познакомились с формами и получением их значений. Теперь поговорим о заполнении. С одной стороны, тут все ясно - мы можем просто ввести значения в поля, заполнив форму вручную. Однако существуют и другие способы заполнения, например, динамически: с помощью загрузки данных с сервера или установки из кода приложения локально.

Во-первых, мы можем установить значение отдельного компонента с помощью метода setValue:

var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Форма авторизации',
        width: 300,
        height:200,
		layout: 'anchor',
		defaults: {
			anchor: '80%'
		},
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Логин',
                name: 'login',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Пароль',
                name: 'password',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
              }],	
		buttons: [{
			text: 'Логин',
			handler: function() {
				var login = formPanel.items.get(0);
				login.setValue('Eugene');
			}
		}]
 });

Однако если у нас на форме куча полей, то их заполнение в этом случае было бы утомительно, поэтому в ExtJS существуют более удобные инструменты. Так, можно задать какой-нибудь объект, которым мы будем заполнять форму. Например:

	var personalData = {
		FirstName: 'Евгений',
		LastName: 'Попов',
		Age: 28,
		Married: false
	};

Данный объект представляет собой совокупность пар имя свойства-значение, где в качестве имени свойства используются значения параметра name у компонентов формы. После мы можем заполнить всю форму данным объектом одной строкой кода:

formPanel.getForm().setValues(personalData);

Например:

var personalData = {
		FirstName: 'Евгений',
		LastName: 'Попов',
		Age: 28,
		Married: false
	};
Ext.onReady(function(){
    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Данные',
        width: 300,
        height:250,
		layout: 'anchor',
    defaults: {
        anchor: '80%'
    },
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Имя',
                name: 'FirstName',
                labelAlign: 'top',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Фамилия',
                name: 'LastName',
                labelAlign: 'top',
                flex: 1
              },{
				xtype: 'numberfield',
				fieldLabel: 'Возраст',
				name: 'Age',
				minValue: 1,
				maxValue: 100,
			},{
				xtype: 'checkbox',
				boxLabel: 'Женат(Замужем)',
				name: 'Married',
				inputValue: 'Married',
				checked:'true',
				}],
		buttons: [{
			text: 'Оправить',
			handler: function() {
				// действие отмены
			}
		}, {
			text: 'Сброс',
			handler: function() {
				formPanel.getForm().setValues(personalData);
			}
		}]
    });
});

Загрузка данных из объекта модели

Поскольку весь интерфейс работы с данными в ExtJS во многом связан с работой с моделями, то формы также имеют функционал, который позволяет работать с моделями. Например, мы можем загрузить модель в форму с помощью метода loadRecord. Итак, сначала определим модель для нашей формы и наполним ее данными из ранее созданного объекта personalData:

var personalData = {
		FirstName: 'Евгений',
		LastName: 'Попов',
		Age: 28,
		Married: false
	};
Ext.onReady(function(){
	Ext.define('Person', {
		extend: 'Ext.data.Model',
		fields: [
			'FirstName',
			'LastName',
			'Age',
			'Married'
		]
	});
	var personModel = Ext.create('Person', personalData); //заполнение модели данными
	
    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Данные',
        width: 300,
        height:250,
		layout: 'anchor',
    defaults: {
        anchor: '80%'
    },
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Имя',
                name: 'FirstName',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Фамилия',
                name: 'LastName',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
              },{
				xtype: 'numberfield',
				fieldLabel: 'Возраст',
				name: 'Age',
                cls: 'field-margin',
				minValue: 1,
				maxValue: 100,
			},{
				xtype: 'checkbox',
				boxLabel: 'Женат(Замужем)',
				name: 'Married',
				inputValue: 'Married',
                cls: 'field-margin',
				checked:'true',
				}],
		buttons: [{
			text: 'Сброс',
			handler: function() {
				formPanel.getForm().loadRecord(personModel);
			}
		}]
    });
});

По сути оба предложенных выше метода заполнения формы равнозначны.

Загрузка данных по AJAX-запросу

Еще одним способом заполнения формы данными является непосредственная загрузка данных с сервера.

Например, по вышеопределенному объекту создадим файл person.json, который у нас будет находится на сервере и к которому будет идти обращение из приложения:

{
	"success": true,
	"data": {
            "FirstName": "Иван",
            "LastName": "Иванов",
            "Age": 29,
            "Married": false
	}
}

Чтобы сигнализировать, что данные были успешно загружены, в начало добавляется свойство "success": true,, а непосредственно сами данные добавляются в параметр data.

Теперь, чтобы загрузить данные по ajax-запросу, нам надо у формы formPanel.getForm() использовать метод load. А метод load принимает в качестве параметра объект конфигурации запроса, в котором свойство url указывает на файл json, который надо загрузить:

    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Данные',
        width: 300,
        height:250,
		layout: 'anchor',
    defaults: {
        anchor: '80%'
    },
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Имя',
                name: 'FirstName',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Фамилия',
                name: 'LastName',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
              },{
				xtype: 'numberfield',
				fieldLabel: 'Возраст',
				name: 'Age',
                cls: 'field-margin',
				minValue: 1,
				maxValue: 100,
			},{
				xtype: 'checkbox',
				boxLabel: 'Женат(Замужем)',
				name: 'Married',
				inputValue: 'Married',
                cls: 'field-margin',
				checked:'true',
				}],
		buttons: [{
			text: 'Загрузка данных',
			handler: function() {
				formPanel.getForm().load({
					url: 'person.json',
					method: 'GET'
				});
			}
		}]
    });
});