title: EXT 4.2 ComboBox grouping of results with XTemplate
body: <p>I am trying to group results that I am getting from store to be displayed inside ComboBox . 
  I have a combobox that looks like this: 
  <img src="https://i.stack.imgur.com/dMXO1.png" alt="enter image description here"></p>
  
  <p>and I need it to look like this : </p>
  
  <p><img src="https://i.stack.imgur.com/7mFAE.png" alt="enter image description here"></p>
  
  <p>That means grouped by category (order / invoice ).</p>
  
  <p>My combobox defined like this :</p>
  
  <pre><code>Ext.define('NG.view.searchcombo.Combo', {
      requires: ['Ext.form.field.ComboBox'],
      extend: 'Ext.form.ComboBox',
      alias: 'widget.searchcombo',
      minChars:3,
      fieldLabel: 'Choose Search',
      store: 'Search',
      displayField: 'name',
      valueField: 'id',
      typeAhead: false,
      hideLabel: true,
      hideTrigger:false,
      anchor: '100%',
  
      listConfig: {
          loadingText: 'Searching...',
          emptyText: 'No matching posts found.',
  
          // Custom rendering template for each item
          getInnerTpl: function() {
              return '&lt;h3&gt;{name} / {category}&lt;/h3&gt;' +'{excerpt}' ;
          }
      },
      pageSize: 10,
      initComponent: function () {    
  
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>and my data is like this :</p>
  
  <pre><code>[{
      "id": 1,
      "name": "one",
      "category": "invoice"
  }, {
      "id": 2,
      "name": "two",
      "category": "invoice"
  }, {
      "id": 3,
      "name": "one",
      "category": "order"
  }, {
      "id": 4,
      "name": "two",
      "category": "order"
  }, {
      "id": 5,
      "name": "three",
      "category": "invoice"
  }, {
      "id": 6,
      "name": "four",
      "category": "invoice"
  }, {
      "id": 7,
      "name": "three",
      "category": "order"
  }, {
      "id": 8,
      "name": "four",
      "category": "order"
  }, {
      "id": 9,
      "name": "five",
      "category": "invoice"
  }, {
      "id": 10,
      "name": "six",
      "category": "invoice"
  }, {
      "id": 11,
      "name": "five",
      "category": "order"
  }, {
      "id": 12,
      "name": "six",
      "category": "order"
  }, {
      "id": 13,
      "name": "seven",
      "category": "invoice"
  }, {
      "id": 14,
      "name": "eight",
      "category": "invoice"
  }, {
      "id": 15,
      "name": "seven",
      "category": "order"
  }, {
      "id": 16,
      "name": "eight",
      "category": "order"
  }]
  </code></pre>
  
  <p>I think that can be done by using <code>Ext.XTemplate</code> but I am not familiar with <code>Ext.XTemplate</code>. </p>