PHP5

Работа с хранилищем в ExtJS

В прошлом параграфе мы получали данные, обращаясь через прокси модели к определенному веб-ресурсу. Одним из простых методов загрузки данных в модель представляет использование объекта Ext.data.Store:

 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'id',  type: 'int'},
		 {name: 'name', type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User'
 });

Хранилище предназначено для хранения объектов модели. А тип модели указывается в свойстве model. В данном случае это ранее созданная модель User.

Также мы можем создать свое собственное хранилище, унаследовав его от Ext.data.Store:

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'
 });
 var myStore = Ext.create('UserStore');

Добавление данных в хранилище

Добавление данных производится с помощью метода add:

 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'id',  type: 'int'},
		 {name: 'name', type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User'
 });
 var user = Ext.create('User', {
     id: 1, name: 'Eugene'
 });
 myStore.add(user);
 alert(myStore.count());

Если вдруг нам надо добавить объект на определенное место в хранилище, то мы используем метод insert:

var user = Ext.create('User', {
     id: 1, name: 'Eugene'
 });
 myStore.insert(0,user);

Удаление данных из хранилища

Удаление данных из хранилища производится методом remove и его модификациями:

Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'id',  type: 'int'},
		 {name: 'name', type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User'
 });
 var user1 = Ext.create('User', {
     id: 1, name: 'Eugene'
 });
  myStore.add(user1);
 var user2 = Ext.create('User', {
     id: 2, name: 'Ivan'
 });
 myStore.add(user2);
 myStore.remove(user1); // удаление определенной модели
 myStore.removeAt(0); // удаление по индексу
 myStore.removeAll(); // удаление всех объектов из хранилища

Получение данных из хранилища

Получить объекты мы можем по индексу с помощью метода getAt, а также мы можем с помощью специальных методов извлечь первый и последний элементы:

 var userFromStore = myStore.getAt(0); //получение по индексу в хранилище
 alert(userFromStore.get('name'));

 var i=3;
 // проверка на наличие элемента по индексу
 if(i<myStore.count())
 {
	userFromStore = myStore.getAt(i);
	alert(userFromStore.get('name'));
 }

 var first = myStore.first(); //получение первого объекта
 var last = myStore.last(); // получение последнего объекта
 alert(first.get('name'));
 alert(last.get('name'));

Проверку на количество объектов в хранилище мы можем сделать с помощью метода count, которое возвращает кол-во объектов.

Также мы можем получить целый диапазон объектов с помощью метода getRange:

var i=0;
  var j=1
 if(i<myStore.count() && j<myStore.count())
 {
	var users = myStore.getRange(i,j);
	Ext.each(users, function(record,index){
		alert((index+1)+'. '+record.get('name'));
	});
 }

Также мы просто можем перебрать все объекты хранилища:

myStore.each(function(record,index){
		alert((index+1)+'. '+record.get('name'));
	});

Загрузка данных с сервера

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'
		},
		autoLoad: true
	});
	var myStore = Ext.create('UserStore');
	myStore.load(function() {
		myStore.each(function(record){
			alert(record.get('name'));
		});
	});
});

В данном случае у нас простая модель - User и для загрузки данных в модель используется хранилище myStore. Чтобы ассоциировать хранилище с определенной моделью, мы указываем эту модель в параметре model. Далее опция proxy позволяет задать параметры загрузки, указав в свойстве url адрес, по которому будут загружаться данные.

Важную роль играет установка ридера (параметр reader), где мы говорим, что чтение загруженных данных будет производиться в формате json, а в качестве корневого узла будет выбран узел users (reader: {type: 'json', root: 'users'}). Далее мы посмотрим, что можно создать ридер также для данных в формате xml.

Файл users.json, находящийся на сервере, мог бы быть таким:

[
	{
		"id": 1,
		"name": "Eugene"
	},{
		"id": 2,
		"name": "Ivan"
	}
]

Указанный у хранилища параметр autoLoad: true говорит о том, что загрузка данных с веб-ресурса будет происходить автоматически при загрузке страницы. Но мы также можем загрузить данные динамически, использовав метод load:

myStore.load(function() {
		myStore.each(function(record){
			alert(record.get('name'));
		});
	});

Метод load принимает функцию, которая выполняется после выполнения запроса к ресурсу.

Группировка данных

Хранилище позволяет нам упорядочить данные по определенному типу:

Ext.onReady(function(){
	Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'id',  type: 'int'},
		 {name: 'name', type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
	 groupers: [{
            property: 'name'
        }]
 });
 var user1 = Ext.create('User', {
     id: 1, name: 'Sasha'
 });
  myStore.add(user1);
 var user2 = Ext.create('User', {
     id: 2, name: 'Ivan'
 });
 myStore.add(user2);

  myStore.each(function(record,index){
		alert((index+1)+'. '+record.get('name'));
	});
});

В данном случае в определении хранилища мы добавили параметр groupers. В этот параметр определили элемент группировки по свойству name. Поэтому в данном случае первым будет выведен второй добавленный элемент, а не первый.

Альтернативой определения группировки в хранилище служит использование метода group:

var myStore = Ext.create('Ext.data.Store', {
     model: 'User'
 });
 //..........................................
 myStore.group('name');

Специальные методы хранилища

Объекты хранилища также содержат пять специальных методов, выполняющих различные функции:

• count: вычисляет количество данных в хранилище (alert(myStore.count());)

• sum: вычисляет сумму всех элементов, по которым проводится группировка (alert(bookStore.sum('id'));)

• average: вычисляет среднее арифметическое всех элементов, по которым проводится группировка (alert(bookStore.average('id'));)

• min: вычисляет минимальное значение из всех элементов, по которым проводится группировка(alert(bookStore.min('id'));)

• max: вычисляет максимальное значение из всех элементов, по которым проводится группировка(alert(bookStore.max('id'));)