Работа с данными в ExtJS 4

Создание моделей

Для более удобной работы с данными в ExtJS 4 имеется класс Ext.data.Model, который представляет отдельную сущность в приложении или объект, обладающий определенными свойствами. Для хранения наборов подобных объектов используются хранилища данных. Итак, код нашего примера будет следующим:

Ext.onReady(function(){

	Ext.define('Person', {
		extend: 'Ext.data.Model',
		fields: [{
			name: 'Name',
			type: 'string'
		}, {
			name: 'Surname',
			type: 'string'
		}, {
			name: 'BirthDate',
			type: 'date',
			dateFormat: 'd-m-Y'
		}, {
			name: 'Salary',
			type: 'int'
		}, {
			name: 'Married',
			type: 'boolean'
		}]
	});

	var person = Ext.create('Person', {
		Name: 'Eugene',
		Surname: 'Popov',
		BirthDate: '22-05-1984',
		Salary: 300,
		Married: false
	});

	Ext.create('Ext.Panel', {
		title: 'Person: ' +person.get('Name')+ ' ' +person.get('Surname'),
		html: '<p>Имя: '+person.get('Name')+'</p>' +
		'<p>Фамилия: '+person.get('Surname')+'</p>' +
		'<p>Дата рождения: '+person.get('BirthDate')+'</p>' +
		'<p>Женат: '+(person.get('Married')==true?'да':'нет')+'</p>',
		width: 200,
		height: 200,
		renderTo: Ext.getBody(),
		style: 'margin-left: 30px;margin-top: 10px;'
	});
});

Теперь разберем его по порядку. Прежде всего нам необходимо создать класс модели. Этот класс в принципе идентичен обычному классу Ext JS. И с помощью метода Ext.define('Person', { extend: 'Ext.data.Model'.... мы расширяем функциональность класса Ext.data.Model, образуя новый класс Person. Определение полей новой модели находится в параметре fields. Этот параметр принимает массив объектов типа Ext.data.Field. С помощью свойства type определяется тип свойства, а с помощью свойства name - его имя.

Обратите внимание, что при указании свойства с типом date определяется формат даты, так как он в последствии используется методом Ext.Date.parse для надлежащего парсинга даты, особенно в тех случаях, когда она указана в нестандартных форматах.

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

var person = Ext.create('Person', {
		Name: 'Eugene',
		Surname: 'Popov',
		BirthDate: '22-05-1984',
		Salary: 300,
		Married: false
	});

И уже при выводе значения данной модели на панель мы используем метод get у определенного нами объекта. Передавая в качестве параметра имя свойства, мы можем получить его значение (person.get('Name'))

Подобным образом мы можем динамически изменить значение свойства объекта с помощью метода set: person.set('Name', 'Alexander'); или person.set('Married', true);

Предобработка модели

Иногда возникает необходимость перед загрузкой обработать выводимые данные. Для этого в качестве параметра у поля модели мы можем определить параметр convert. Этот параметр принимает функцию, возвращающую значение данного свойства модели. Так, выше у нас в качестве дохода (свойство Salary) выводилось простое число. Теперь изменим это свойство:

...........................
		{
			name: 'Salary',
			type: 'int',
			convert: function(v, record){
						return record.get('Name') + ' получает ' + v + ' рублей';
					}
		}, 
.........................

Функция, передаваемая в параметр convert, принимает два аргумента: v - передаваемое значение, record - текущий объект модели. Метод record.get('Name') получает имя объекта и затем выполняется конкатенация строк. В итоге мы получим при выводе строку "Eugene получает 300 рублей".

Модели и формы

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

Ext.onReady(function(){
    Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Name',
            type: 'string'
        }, {
            name: 'Surname',
            type: 'string'
        }, {
            name: 'BirthDate',
            type: 'date',
            dateFormat: 'd-m-Y'
        }, {
            name: 'Salary',
            type: 'int'
        }, {
            name: 'Married',
            type: 'boolean'
        }]
    });

    var person = Ext.create('Person', {
        Name: 'Eugene',
        Surname: 'Popov',
        BirthDate: '22-05-1984',
        Salary: 300,
        Married: false
    });

    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Данные',
        width: 300,
        height:280,
		bodyPadding: 10,
        layout: 'anchor',
    defaults: {
        anchor: '90%'
    },
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Имя',
                name: 'Name',
                labelAlign: 'top',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Фамилия',
                name: 'Surname',
                labelAlign: 'top',
                flex: 1
              },{
                xtype: 'datefield',
                fieldLabel: 'Дата рождения',
                name: 'BirthDate',
				},{
                xtype: 'numberfield',
                fieldLabel: 'Доход',
                name: 'Salary',
				},{
                xtype: 'checkbox',
                boxLabel: 'Женат(Замужем)',
                name: 'Married',
                checked:'true',
                }],
        buttons: [{
            text: 'Сброс',
            handler: function() {
                formPanel.getForm().loadRecord(person);
            }
        }]
    });
});

После нажатия на кнопку сброс у нас в поля формы будут загружены данные объекта модели person благодаря использованию метода formPanel.getForm().loadRecord(person), который в качестве параметра принимает объект загружаемой модели.