Panel change: yellow fade (single flash + bold + tab text change)

by Lukasz Kryger

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

CSS

#extents-canvas {
    background:url(http://www.thespiritsbusiness.com/content/http://www.thespiritsbusiness.com/media/2013/07/Map-Europe.jpg)
}

.bold-text {
    font-weight: bold;
}

body {
    padding: 50px 20px 0 20px;
}
.x-tree-lines .x-tree-elbow, .x-tree-lines .x-tree-elbow-end, .x-tree-lines .x-tree-elbow-line {
    background-image: url(../images/s.gif);
}
.x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-expander, .x-tree-node-icon {
    background-image:url(../images/s.gif);
    background-position:center center;
    background-repeat:no-repeat;
    border:0 none;
    height:18px;
    margin:0;
    padding:0;
    vertical-align:top;
    width:6px;
}
.x-grid-cell-inner {
    white-space: normal;
}
.x-grid-tree-node-expanded .x-tree-icon-parent, .x-tree-icon-parent {
    background-image: none;
}
.x-panel-header-text {
    color: #37486A !important;
    font-weight: bold !important;
}
.x-btn-arrow {
    background-image: url(../images/down-arrow.png);
}
.x-toolbar-default {
    background-color: #CED9E7 !important;
}
.x-btn-group-header-body-default-framed {
    background-color: white;
}
.x-panel-header-default {
    background-image: none !important;
}
.x-tab-bar {
    background-image: none !important;
    background-color: #dfe8f6 !important;
}
.x-tab-bar-top .x-tab-bar-body {
    border-width: 0px;
}
.x-tool-over .x-tool-close {
    background-image:url(../images/close-orange.png) !important;
    background-repeat:no-repeat;
    background-position:0px 0px !important;
    width: 15px !important;
    height: 15px !important;
}
.x-btn-over .x-btn-split-right {
    background-image: url(../js-lib/extjs/resources/themes/images/default/button/s-arrow-noline.gif);
}
.x-accordion-item .x-panel-header, .x-accordion-item .x-panel-header-text {
    cursor: pointer;
}
.x-tab-bar-strip-default-plain {
    background-color: white;
}
.x-tab-default-top-active {
    border-bottom-color: white !important;
}
.olControlPanZoomBar {
   ...

JavaScript

Ext.onReady(function () {
    var debounced = _.debounce(function () {
        try {
            Ext.getCmp('extents-tab-header').tab.getEl().highlight('ff0', {
                easing: 'easeIn',
                duration: 1000
            });

	    var tab = Ext.getCmp('usage-print-view-tabpanel').activeTab;
	    if (tab.xTabType === 'product'){
	    // only make bold if product tab is active
	    Ext.getCmp('extents-tab-header').tab.addCls('bold-text');
            Ext.getCmp('extents-tab-header').tab.update('Layout Preview (updated)');
	    }
	    
        } catch (e) {}
    }, 500, true);

    var updEx = function () {
        try {
            var a_canvas = document.getElementById("extents-canvas");
            var b_context = a_canvas.getContext("2d");
            b_context.clearRect(0, 0, 350, 350);
            b_context.fillStyle = "rgba(255, 165, 0, 0.5)";
            var middle = 350 / 2;
            var side = Ext.getCmp('print-scale').getValue();
            if (Ext.getCmp('grid-checkbox').getValue()) {
                side = side * 0.9;
            }
            var otherSide = side * 0.7;


            var paperSize = {
                A4: 1,
                A3: 1.2,
                A2: 1.4
            }

            var paper = Ext.getCmp('print-page-size-combo').getValue();
            var paperFactor = paperSize[paper];
            var x = side * paperFactor;
            var y = otherSide * paperFactor;
            b_context.fillRect(middle - x / 2, middle - y / 2, x, y);
        } catch (e) {}
    };
    var updateExtent = function () {
        debounced.call();
        updEx.call();
    };


    var overlayCheckboxes = [{
        id: 'grid-checkbox',
        name: 'grid',
        boxLabel: 'National Grid Lines',
        inputValue: 'true',
        listeners: {
            change: function () {
                updateExtent();
            }
        }
    }, {
        id: 'annotations-checkbox',
        name: 'annotations',
        boxLabel:...