docs/guides/grid/examples/grouping/app.js

   1 /**
   2  * @example Grouping Grid Panel
   3  *
   4  * A grid panel that demonstrates grouping rows using the {@link Ext.grid.feature.Grouping} feature
   5  */
   6 Ext.require('Ext.data.Store');
   7 Ext.require('Ext.grid.Panel');
   8
   9 Ext.define('Employee', {
  10     extend: 'Ext.data.Model',
  11     fields: [ 'name', 'seniority', 'department' ]
  12 });
  13
  14 Ext.onReady(function() {
  15
  16     var employeeStore = Ext.create('Ext.data.Store', {
  17         model: 'Employee',
  18         data: [
  19             { name: 'Michael Scott', seniority: 7, department: 'Manangement' },
  20             { name: 'Dwight Schrute', seniority: 2, department: 'Sales' },
  21             { name: 'Jim Halpert', seniority: 3, department: 'Sales' },
  22             { name: 'Kevin Malone', seniority: 4, department: 'Accounting' },
  23             { name: 'Angela Martin', seniority: 5, department: 'Accounting' }
  24         ],
  25         groupField: 'department'
  26     });
  27
  28     Ext.create('Ext.grid.Panel', {
  29         renderTo: Ext.getBody(),
  30         store: employeeStore,
  31         width: 200,
  32         height: 300,
  33         title: 'Employees - Scranton Branch',
  34         columns: [
  35             {
  36                 text: 'Name',
  37                 width: 100,
  38                 dataIndex: 'name'
  39             },
  40             {
  41                 text: 'Seniority',
  42                 flex: 1,
  43                 dataIndex: 'seniority'
  44             }
  45         ],
  46         features: [{ ftype: 'grouping' }]
  47     });
  48
  49 });