Ридеры хранилища

В предыдущем разделе в одном из примеров мы загружали данные из 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).