ExtJS 6.0 - Color Picker

by Chintan Soni

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">
<!-- ExtJS 6.0 - Template -->
<!-- Images: http://imgur.com/a/BPZwm -->

JavaScript

Ext.application({
    name : 'Fiddle',

    launch : function() {
    var me = this;
       me.sendMessage = function(msg){
        alert(msg + ' message-recieved');
       },
        Ext.create('Ext.panel.Panel', {
            renderTo    : document.body,
            width       : 400,
            height      : 400,
            bodyPadding : 10,
            title       : 'Card Layout Example',
            layout      : 'card',
            items       : [{
							xtype : 'panel',
							title : 'First',
							html  : 'This is the first panel',
							listeners: {
								show: function(){
									me.sendMessage(this.initialConfig.html);
								},
								render: function(){
									me.sendMessage(this.initialConfig.html);
								},
							}
						}, {
							xtype : 'panel',
							title : 'Second',
							html  : 'This is the second panel'
						}],
            dockedItems : [
                {
                    xtype : 'toolbar',
                    dock  : 'bottom',
                    items : [
                        {
                            text    : '<- Go to first',
                            name: 'someButton',
                            handler : function(button) {
                                var panel = button.up('panel');
                                panel.layout.setActiveItem(0);
                            }
                        },
                        '->',
                        {
                            text    : 'Go to second ->',
                            handler : function(button) {
                                var panel = button.up('panel');
                                panel.layout.setActiveItem(1);
                                /*Here, I need to check if "click" event has been fired from Panel-2| 																  					so I can display the following message in First Panel
                                "This is the first panel message-recieved" */
                            }
                     ...