Загрузка и сохранение моделей с помощью прокси

Одним из преимуществ использования моделей в ExtJS4 является поддержка объекта proxy (прокси), который позволяет взаимодействовать с сервером - загружать с него данные или, наоборот, отправлять обратно данные. Рассмотрим, как мы можем осуществлять взаимодействие модели с сервером через объект proxy.

Итак, продолжим работу с нашей моделью, определенной в прошлом параграфе, внеся в нее небольшие изменения:

Ext.define('Person', {
		extend: 'Ext.data.Model',
		idProperty: 'PersonID',
		fields: [{
            name: 'PersonID',
            type: 'int'
        }, {
			name: 'Name',
			type: 'string'
		}, {
			name: 'Surname',
			type: 'string'
		}, {
			name: 'BirthDate',
			type: 'date',
			dateFormat: 'd-m-Y'
		}, {
			name: 'Salary',
			type: 'int'
		}, {
			name: 'Married',
			type: 'boolean'
		}],
		proxy: {
                   type: 'ajax',
                   api: {
                            read: 'read.php',
                            create: 'create.php',
                            update: 'update.php',
                            destroy: 'delete.php'
                       }
			}
	});
	Person.load(1, {
           callback: function(p, operation){
			alert(p.get('Name')); // вывод его отдельного свойства
            }
          });

Здесь мы произвели по сравнению с моделью из прошлого параграфа два изменения. Во-первых, мы использовали параметр модели idProperty. Этот параметр позволяет уникально идентифицировать объект модели по определенному полю. В данном случае это поле PersonID, которое представляет числовое значение.

Во-вторых, мы использовали свойство proxy, которое определено у модели. Параметр прокси позволяет обращаться к веб-ресурсам через ajax-запросы. Так, параметр type: 'ajax' указываетмодели, какой тип прокси использовать. В данном случае будет создаваться объект класса Ext.data.proxy.Ajax для взаимодействия с веб-ресурсами.

Задаваемый для прокси параметр api позволяет задать url-адреса для обработки запросов. Мы могли бы задать один универсальный адрес веб-ресурса для обработки всех запросов. Однако в данном случае используется система CRUD (Create, Read, Update, Delete), где для каждого типа запросов - создания объекта, чтения, обновления и удаления - используется определенный веб-ресурс.

К примеру файл read.php, который будет возвращать пользователю определенный объект, будет выглядеть таким образом:

<?php
$id=$_GET["id"]; //получаем переданное из приложения extjs id
$person = array(
			"PersonID" => $id,
			"Name" => "Eugene",
			"Surname" => "Popov",
			"BirthDate" => "22-05-1984",
			"Salary" => 300,
			"Married" => false
		);

echo json_encode($person);
?>

В данном случае скрипт просто создает один объект Person и возвращает его клиенту в формате json. В реальной ситуации это могла быть, например, выборка из бд mysql. После этого мы можем обратиться к этому ресурсу за получением нужного объекта по нужному нам id:

Person.load(1, {
           callback: function(p, operation){
			alert(p.get('Name')); // вывод его отдельного свойства
            }
          });

Обратите внимание, что функция Person.load будет обращаться к read.php, так как этот путь указан для чтения.

Для обновления некоторого объекта нам надо использовать его ID и затем свойство save - обращение будет идти к ресурсу update.php:

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

Однако если бы мы создавали объект без использования свойства PersonID, то обращение бы шло к ресурсу create.php:

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

И наконец метод удаления объекта:

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

Для удаления объекта мы также посылаем обект в POST-запросе на сервер, только в данном случае обращение идет к ресурсу delete.php.

Таким образом, используя свойства proxy у модели мы можем создать CRUD-интерфейс для работы с данными.