Ридеры хранилища
В предыдущем разделе в одном из примеров мы загружали данные из json-файла в хранилище, используя свойство proxy. Но поскольку в качестве источника данных могут выступать наборы данных в различных форматах, ExtJS позволяет нам более точно настроить опции загрузки в хранилище. Так, мы можем воспользоваться ридерами.
JSON
Например, у нас данные на сервере находятся в следующем файле users.json:
{ "data":{ "users":[{ "id": 1, "name": "Eugene" },{ "id": 2, "name": "Ivan" }] } }
В данном случае интересующие нас данные находятся в узле data.users, поскольку узел users является вложенным узлом по отношению к узлу data. Тогда для того, чтобы загрузить данные в приложение, мы будет использовать следующее определение хранилища:
Ext.onReady(function(){ Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] }); Ext.define('UserStore', { extend: 'Ext.data.Store', model: 'User', proxy: { type: 'ajax', url: 'users.json', reader:{ type:'json', root: 'data.users' } } }); var myStore = Ext.create('UserStore'); myStore.load(function() { myStore.each(function(record){ alert(record.get('name')); }); }); });
По сравнению с кодом хранилища из прошлого раздела у нас в данном случае добавлен следующий участок кода:
reader:{ type:'json', root: 'data.users' }
Параметр reader опредедяет ридер хранилища. В данном случае он имеет тип json (параметр type указывает на тип читаемых данных), а параметр root определяет узел данных, откуда будет вестись чтение. Так как у нас в файле json данные находятся по пути data.users, следовательно, параметр root и будет принимать это значение. Вложенность узлов при определении пути определяется точкой.
XML
Еще одним способом хранения данных является xml. Итак, определим следующий файл users.xml, который будет хранить данные:
<users> <user> <id>1</id> <name>Eugene</name> </user> <user> <id>2</id> <name>Ivan</name> </user> </users>
В этом случае определение хранилища выглядело бы следующим образом:
Ext.define('UserStore', { extend: 'Ext.data.Store', model: 'User', proxy: { type: 'ajax', url: 'users.xml', reader:{ type:'xml', root: 'users', record: 'user' } } });
Весь остальной код остался бы тем же самым. В данном случае опять же в опции reader мы устанавливаем параметр type (только теперь xml).
В параметре root устанавливаем корневой элемент, в котором находятся данные. А параметр record указывает на узел в файле xml, который будет сопоставляться с моделью хранилища (то есть в данном случае узел user).