PHP5

Группировка в гриде

У ряда объектов какие-то данные могут повторяться. И иногда бывает нужно сгруппировать данные по определенному критерию. Связка хранилище+грид позволяют нам настроить группировку данных. Во-первых, настроим хранилище:

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

Параметр groupField указывает по какому свойству будут группироваться объекты. После этого мы в принципе могли бы уже использовать грид, так как данные у нас уже будут сгруппированы.

Но грид позволяет настроить визуальное отображение групп с помощью плагина Ext.grid.feature.Grouping:

Ext.create('Ext.grid.Panel', {
        title: 'Пользователи',
        height: 250,
        width: 550,
		margin:10,
        store: store,
		features: [Ext.create('Ext.grid.feature.Grouping', {groupHeaderTpl: 'Группа  {name} ({rows.length})' })],
        columns: [{
           xtype:'rownumberer'
          },{
           text:'Имя',
           xtype:'templatecolumn',
           flex:1,
           dataIndex:'name',
           tpl:'{name} {surname}'
      },{
            header: 'Дата рождения',
            dataIndex: 'date',
            xtype:'datecolumn',
            format: 'd/m/Y',
            flex:1
        },{
            header: 'E-mail',
            dataIndex: 'email',
            flex:1
        },{
            text:'Женат/Замужем',
            xtype:'booleancolumn',
            width:90,
            dataIndex:'married',
            trueText:'Да',
            falseText:'Нет'
        },{
    xtype:'actioncolumn',
    width:40,
    items:[{
            icon:'del.png',
            handler:function (grid, rowIndex, colIndex) {
				store.removeAt(rowIndex);
            }
        }]
	}],
        renderTo: Ext.getBody()
    });

Для использования плагина мы применяем параметр feauture:

	features: [Ext.create('Ext.grid.feature.Grouping', {groupHeaderTpl: 'Группа  {name} ({rows.length})' })],

Опция groupHeaderTpl указывает формат отображения в плагине группировки. В данном случае мы получаем через {name} значение свойства группировки (то есть свойства married), а с помощью выражения {rows.length} получаем количество строк в группе.

После этого мы получим сгруппированные данные в гриде:

comments powered by Disqus