Таблицы и Ext.grid.Panel

Ext.grid.Panel и отображение данных

Для отображения и управления данными в виде таблицы в ExtJS 4 предназначен такой мощный элемент управления, как Ext.grid.Panel. Разберем на примере простейшее отображение данных в данном элементе.

Итак, сначала определим сами данные. Это могут быть к примеру данные, находящиеся в формате json на сервере. Пусть это будет файл users.json следующего содержания:

{
	"success": true,
	"users": [{
        "userID": 1,
        "name": "Вася",
		"surname": "Иванов",
        "date": '10/08/1991',
        "email": 'vasiv@mail.ru',
		"married": false
    }, {
        "userID": 2,
        "name": "Петя",
		"surname": "Федоров",
        "date": '03/08/1993',
        "email": 'petfed@yandex.ru',
		"married": true
    }, {
        "userID": 3,
        "name": "Вова",
		"surname": "Кузнецов",
        "date": '11/07/1989',
        "email": 'vok@mail.ru',
		"married": false
    }, {
        "userID": 4,
        "name": "Саша",
		"surname": "Сидоров",
        "date": '05/08/1991',
        "email": 'vvvs@mail.ru',
		"married": true
    }]
}

Каждый элемент представляет пользователя с несколькими свойствами, как id, дата рождения, имя, фамилия, семейное положение и адрес электронной почты. Вторым шагом будет создание модели, соответствующей этим данным, и хранилище, которое будет загружать данные с сервера:

Ext.define('User', {
           extend: 'Ext.data.Model',

			idProperty: 'userID',

            fields: [{
                name: 'userID',
                type: 'int'
			}, {
                name: 'name',
                type: 'string'
            }, {
                name: 'surname',
                type: 'string'
            }, {
                name: 'date',
                type: 'date'
            }, {
                name: 'email',
                type: 'string'
            }, {
                name: 'married',
                type: 'bool'
            }]
      });

       var store = Ext.create('Ext.data.Store', {
                    model: 'User',
                    autoLoad: true,
					proxy: {
							type: 'ajax',
							url: 'users.json',
							reader: {
								type: 'json',
								root: 'users'
							}
				}
        });

Хранилище store будет автоматически загружать данные из файла users.json. Теперь свяжем сам элемент Ext.grid.Panel с хранилищем:

Ext.create('Ext.grid.Panel', {
		title: 'Пользователи',
		height: 200,
		width: 400,
		store: store,
		columns: [{
			header: 'Имя',
			dataIndex: 'name'
		}, {
			header: 'Фамилия',
			dataIndex: 'surname'
		}, {
			header: 'Дата рождения',
			dataIndex: 'date',
			xtype:'datecolumn',
			format: 'd/m/Y',
			flex:1
		}, {
			header: 'E-mail',
			dataIndex: 'email',
			flex:1
		}, {
			header: 'Женат/Замужем',
			dataIndex: 'married',
			flex:1
		}],
		renderTo: Ext.getBody()
	});

Итак, элемент Ext.grid.Panel представляет собой панель в виде таблицы. Чтобы связать Ext.grid.Panel с хранилищем, устанавливаем свойство store. Затем с помощью свойства columns определяем массив столбцов, которые будут отображать данные из хранилища.

Для каждого столбца устанавливаются свойство header, которое обозначает название столбца, выводимое на веб-странице, и свойство dataIndex, которое в качестве значения принимает свойство модели, значение которого будет отображаться в данном столбце.

При определении столбца, выводящего дату, мы использовали свойство xtype. Позже мы посмотрим на его использование в столбцах, а пока надо понимать, что данное свойство использовалось прежде всего для явного указания типа столбца и преобразования даты в определенный формат.

Также надо отметить, что необязательно создавать столбцы для всех свойств модели. В итоге, мы получим следующий вывод:

comments powered by Disqus