title: Extjs Custom Combobox
body: <p><img src="https://i.stack.imgur.com/2Brcn.png" alt="enter image description here"></p>
  
  <p>how to create a custom combo like above?
  here i just did a small hack to the component.by this way you can add any html element to the selection item in combo.</p>
  
  <pre><code>Ext.define('AMShiva.ux.custom.Combo', {
      extend: 'Ext.form.field.ComboBox',
      alias: 'widget.ux_combo',
  
  
      colorField: 'color',//to get color value
      displayField: 'text',
      valueField:'value',
  
      initComponent: function () {
          var me = this;
          // dropdown item template
          me.tpl = Ext.create('Ext.XTemplate',
                      '&lt;tpl for="."&gt;',
                      '&lt;div class="x-boundlist-item"&gt;',
                      '&lt;span style="background-color: {' + me.colorField + '};" class="color-box-icon"&gt;&lt;/span&gt;{' + me.displayField + '}',
                      '&lt;/div&gt;',
                      '&lt;/tpl&gt;'
                  );
          me.callParent(arguments);
  
          // here change the selection item html
          me.on('change',
              function(element, newValue) {
                  var inputEl = element.inputCell.child('input');
                  var data = element.getStore().findRecord(element.valueField, newValue);
  
                      if (data) {
                          inputEl.applyStyles('padding-left:26px');
                          var parent = inputEl.parent(),
                              spanDomEle = parent.child('span');
  
                          if (!spanDomEle) {
                              Ext.DomHelper.insertFirst(parent, { tag: 'span', cls: 'color-box-icon' });
                              var newSpanDomEle = parent.child('span');
                              newSpanDomEle.applyStyles('background-color: ' + data.get(element.colorField) + ';float: left;position: absolute;margin: 3px 2px 2px 4px;');
                          } else {
                              spanDomEle.applyStyles('background-color:' + data.get(element.colorField));
                          }
                      }
              });
      }
  });
  </code></pre>
  
  <p>sample store:</p>
  
  <pre><code>var store = Ext.create('Ext.data.Store', {
              fields: ['value', 'text', 'color']
          });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.color-box-icon {
  width: 16px;
  height: 16px;
  margin: 0px 4px 0px -3px;
  padding: 0px 8px;
  }
  </code></pre>
  
  <p>Is there another way to do this kind of thing?</p>