examples/grid/groupgrid.js

   1 Ext.require(['Ext.data.*', 'Ext.grid.*']);
   2 Ext.onReady(function() {
   3     // wrapped in closure to prevent global vars.
   4     Ext.define('Restaurant', {
   5         extend: 'Ext.data.Model',
   6         fields: ['name', 'cuisine']
   7     });
   8
   9     var Restaurants = Ext.create('Ext.data.Store', {
  10         storeId: 'restaraunts',
  11         model: 'Restaurant',
  12         sorters: ['cuisine','name'],
  13         groupField: 'cuisine',
  14         data: [{
  15             name: 'Cheesecake Factory',
  16             cuisine: 'American'
  17         },{
  18             name: 'University Cafe',
  19             cuisine: 'American'
  20         },{
  21             name: 'Slider Bar',
  22             cuisine: 'American'
  23         },{
  24             name: 'Shokolaat',
  25             cuisine: 'American'
  26         },{
  27             name: 'Gordon Biersch',
  28             cuisine: 'American'
  29         },{
  30             name: 'Crepevine',
  31             cuisine: 'American'
  32         },{
  33             name: 'Creamery',
  34             cuisine: 'American'
  35         },{
  36             name: 'Old Pro',
  37             cuisine: 'American'
  38         },{
  39             name: 'Nola\'s',
  40             cuisine: 'Cajun'
  41         },{
  42             name: 'House of Bagels',
  43             cuisine: 'Bagels'
  44         },{
  45             name: 'The Prolific Oven',
  46             cuisine: 'Sandwiches'
  47         },{
  48             name: 'La Strada',
  49             cuisine: 'Italian'
  50         },{
  51             name: 'Buca di Beppo',
  52             cuisine: 'Italian'
  53         },{
  54             name: 'Pasta?',
  55             cuisine: 'Italian'
  56         },{
  57             name: 'Madame Tam',
  58             cuisine: 'Asian'
  59         },{
  60             name: 'Sprout Cafe',
  61             cuisine: 'Salad'
  62         },{
  63             name: 'Pluto\'s',
  64             cuisine: 'Salad'
  65         },{
  66             name: 'Junoon',
  67             cuisine: 'Indian'
  68         },{
  69             name: 'Bistro Maxine',
  70             cuisine: 'French'
  71         },{
  72             name: 'Three Seasons',
  73             cuisine: 'Vietnamese'
  74         },{
  75             name: 'Sancho\'s Taquira',
  76             cuisine: 'Mexican'
  77         },{
  78             name: 'Reposado',
  79             cuisine: 'Mexican'
  80         },{
  81             name: 'Siam Royal',
  82             cuisine: 'Thai'
  83         },{
  84             name: 'Krung Siam',
  85             cuisine: 'Thai'
  86         },{
  87             name: 'Thaiphoon',
  88             cuisine: 'Thai'
  89         },{
  90             name: 'Tamarine',
  91             cuisine: 'Vietnamese'
  92         },{
  93             name: 'Joya',
  94             cuisine: 'Tapas'
  95         },{
  96             name: 'Jing Jing',
  97             cuisine: 'Chinese'
  98         },{
  99             name: 'Patxi\'s Pizza',
 100             cuisine: 'Pizza'
 101         },{
 102             name: 'Evvia Estiatorio',
 103             cuisine: 'Mediterranean'
 104         },{
 105             name: 'Cafe 220',
 106             cuisine: 'Mediterranean'
 107         },{
 108             name: 'Cafe Renaissance',
 109             cuisine: 'Mediterranean'
 110         },{
 111             name: 'Kan Zeman',
 112             cuisine: 'Mediterranean'
 113         },{
 114             name: 'Gyros-Gyros',
 115             cuisine: 'Mediterranean'
 116         },{
 117             name: 'Mango Caribbean Cafe',
 118             cuisine: 'Caribbean'
 119         },{
 120             name: 'Coconuts Caribbean Restaurant &amp; Bar',
 121             cuisine: 'Caribbean'
 122         },{
 123             name: 'Rose &amp; Crown',
 124             cuisine: 'English'
 125         },{
 126             name: 'Baklava',
 127             cuisine: 'Mediterranean'
 128         },{
 129             name: 'Mandarin Gourmet',
 130             cuisine: 'Chinese'
 131         },{
 132             name: 'Bangkok Cuisine',
 133             cuisine: 'Thai'
 134         },{
 135             name: 'Darbar Indian Cuisine',
 136             cuisine: 'Indian'
 137         },{
 138             name: 'Mantra',
 139             cuisine: 'Indian'
 140         },{
 141             name: 'Janta',
 142             cuisine: 'Indian'
 143         },{
 144             name: 'Hyderabad House',
 145             cuisine: 'Indian'
 146         },{
 147             name: 'Starbucks',
 148             cuisine: 'Coffee'
 149         },{
 150             name: 'Peet\'s Coffee',
 151             cuisine: 'Coffee'
 152         },{
 153             name: 'Coupa Cafe',
 154             cuisine: 'Coffee'
 155         },{
 156             name: 'Lytton Coffee Company',
 157             cuisine: 'Coffee'
 158         },{
 159             name: 'Il Fornaio',
 160             cuisine: 'Italian'
 161         },{
 162             name: 'Lavanda',
 163             cuisine: 'Mediterranean'
 164         },{
 165             name: 'MacArthur Park',
 166             cuisine: 'American'
 167         },{
 168             name: 'St Michael\'s Alley',
 169             cuisine: 'Californian'
 170         },{
 171             name: 'Cafe Renzo',
 172             cuisine: 'Italian'
 173         },{
 174             name: 'Osteria',
 175             cuisine: 'Italian'
 176         },{
 177             name: 'Vero',
 178             cuisine: 'Italian'
 179         },{
 180             name: 'Cafe Renzo',
 181             cuisine: 'Italian'
 182         },{
 183             name: 'Miyake',
 184             cuisine: 'Sushi'
 185         },{
 186             name: 'Sushi Tomo',
 187             cuisine: 'Sushi'
 188         },{
 189             name: 'Kanpai',
 190             cuisine: 'Sushi'
 191         },{
 192             name: 'Pizza My Heart',
 193             cuisine: 'Pizza'
 194         },{
 195             name: 'New York Pizza',
 196             cuisine: 'Pizza'
 197         },{
 198             name: 'California Pizza Kitchen',
 199             cuisine: 'Pizza'
 200         },{
 201             name: 'Round Table',
 202             cuisine: 'Pizza'
 203         },{
 204             name: 'Loving Hut',
 205             cuisine: 'Vegan'
 206         },{
 207             name: 'Garden Fresh',
 208             cuisine: 'Vegan'
 209         },{
 210             name: 'Cafe Epi',
 211             cuisine: 'French'
 212         },{
 213             name: 'Tai Pan',
 214             cuisine: 'Chinese'
 215         }]
 216     });
 217
 218     var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
 219         groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
 220     });
 221
 222     var grid = Ext.create('Ext.grid.Panel', {
 223         renderTo: Ext.getBody(),
 224         collapsible: true,
 225         iconCls: 'icon-grid',
 226         frame: true,
 227         store: Restaurants,
 228         width: 600,
 229         height: 400,
 230         title: 'Restaurants',
 231         features: [groupingFeature],
 232         columns: [{
 233             text: 'Name',
 234             flex: 1,
 235             dataIndex: 'name'
 236         },{
 237             text: 'Cuisine',
 238             flex: 1,
 239             dataIndex: 'cuisine'
 240         }],
 241         fbar  : ['->', {
 242             text:'Clear Grouping',
 243             iconCls: 'icon-clear-group',
 244             handler : function(){
 245                 groupingFeature.disable();
 246             }
 247         }]
 248     });
 249 });