ExtJS 6.0 - Color Picker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/theme-neptune-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all_1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all_2.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

CSS

.x-panel-header-custom1 {
 background-image: url('http://www.iconhot.com/icon/png/brush-intense-messenger/256/msn-web-2.png') !important;
}

.x-panel-header-custom1:hover {
  background: red;
 background-image: url('https://image.flaticon.com/icons/png/128/12/12195.png') !important; 
}

.x-panel-header-custom1-collapsed {
  background-image: url('https://image.flaticon.com/icons/png/128/12/12195.png') !important;
}

JavaScript

Ext.create('Ext.data.Store', {
  storeId: 'problemListStoreDetails',
  fields: ['name', 'email', 'phone'],
  data: [
    { value1: 'Value 1', value2: "Active", value3: "11/2006" },
    { value1: 'Value2', value2: "Inactive", value3: "1/1/1998" },
    { value1: 'Value3', value2: "Active", value3: "5/2017" },
    { value1: 'Value4', value2: "pending", value3: "11/2017" },
    { value1: 'Value5', value2: "Historic", value3: "1/9/2000" }
  ]
});
Ext.define('MyApp.MyClass', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.panel-details',
  store: Ext.data.StoreManager.lookup('problemListStoreDetails'),
  width: 300,
  columns: {
    defaults: {
      sortable: false,
      hideable: true,
      menuDisabled: true,
      draggable: false,
      style: {
        fontWeight: 'bold'
      }
    },
    items: [
      { text: "Column1", dataIndex: 'value1', menuDisabled: true },
      { text: "Column2", dataIndex: 'value2', menuDisabled: true, align: 'center' },
      { text: 'Column3', dataIndex: 'value3', menuDisabled: true, align: 'center', flex: 1 }
    ]
  }
});

 Ext.onReady(function () {

       Ext.create('Ext.panel.Panel', {
        title: 'Accordion Layout',
        width: 300,
        height: 500,
        autoHeight: true,
        fill: false,
        autoScroll: true,
          defaults: {
         bodyStyle: 'padding:15px'
        },
       layout: {
        type: 'accordion',
        titleCollapse: false
       },
       items: [{
        title: 'Title 1', ui: 'custom1',
        xtype: 'panel-details'
       },{
        title: 'Title 1', ui: 'custom2',
        xtype: 'panel-details'
      },{
        title: 'Title 1', ui: 'custom3',
        xtype: 'panel-details'
      },{
        title: 'Title 1', ui: 'custom4', 
        xtype: 'panel-details'
      }],


        renderTo: Ext.getBody()
        });
 });