title: Extjs Grid Grouping - setting default header/value
body: <p>On the following grid grouping example. How can I display The first group as (0 Countries), if no data is returned for the first record.</p>
  
  <p>Currently, if there are no records, the first group does not appear</p>
  
  <p><img src="https://i.stack.imgur.com/rnjVO.jpg" alt="enter image description here"></p>
  
  <p>What I need to do is, show the first group with (0) count and not just make it disappear. Is there way to still show up the group header, even if there is no data, like a default header or something? Any ideas? I need to do this for all the 4 headers</p>
  
  <p>Update</p>
  
  <pre><code>Ext.require(['Ext.data.*', 'Ext.grid.*']);
  Ext.onReady(function() {
  Ext.define('Country', {
      extend: 'Ext.data.Model',
      fields: ['name']
  });
  
  var Country = Ext.create('Ext.data.Store', {
      storeId: 'country',
      model: 'Country',
      groupField: 'countryName',
      proxy: {
              type: 'ajax',
              scope: this,
              url: 'myExtjsApp/ExtjsGetRecord',
              reader: {
                  type: 'json',
                  root: 'data'
              }
          }
  });
  
  var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
      groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length &gt; 1 ? "s" : ""]})'
  });
  
  var grid = Ext.create('Ext.grid.Panel', {
      renderTo: Ext.getBody(),
      collapsible: true,
      iconCls: 'icon-grid',
      frame: true,
      store: Country,
      width: 600,
      height: 400,
      title: 'Country',
      features: [groupingFeature],
      columns: [{
          text: 'Country',
          flex: 1,
          dataIndex: 'name'
      }]
  });
  });
  </code></pre>