Загрузка и сохранение моделей с помощью прокси
Одним из преимуществ использования моделей в 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-интерфейс для работы с данными.