ExtJS 5.1 - Vanilla Class DebugHooks

Fiddle exploring how to use the new DebugHooks feature to test the methods of a vanilla class.

by brady houseknecht

HTML

<script src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all-debug.css">

CSS

.x-panel-header.x-header.x-header-noborder.x-docked.x-unselectable.x-panel-header-default.x-horizontal.x-panel-header-horizontal.x-panel-header-default-horizontal.x-top.x-panel-header-top.x-panel-header-default-top.x-box-layout-ct.x-accordion-hd.x-accordion-hd-sibling-expanded {
    background-color: #D2E7F7 !important;
    font-weight: bold;
}
.x-panel-header.x-header.x-header-noborder.x-docked.x-unselectable.x-panel-header-default.x-horizontal.x-panel-header-horizontal.x-panel-header-default-horizontal.x-top.x-panel-header-top.x-panel-header-default-top.x-box-layout-ct.x-accordion-hd {
    background-color: #D2E7F7 !important;
    font-weight: bold;
}
body#ext-element-1 {
    /*background-color: #596470 !important; */
    background-image: url(http://dev.sencha.com/ext/5.1.0/examples/kitchensink/crisp-en/resources/images/square.gif) !important;
    background-repeat: repeat;
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slide-up;
    -webkit-animation-name: slide-up;
}
@-moz-keyframes slide-down {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}
@-webkit-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}
div.console {
    margin-left: 25px;
    text-align: left;
    font-family: Courier, "Courier New";
    font-size: x-small;
}

JavaScript

var util = {
    log: function (msg) {
        document.body.innerHTML += '<div class="console">' + msg + '</div>';
    }
};
Ext.define('Fiddle.VanillaClass', {
    addMethod: function (a, b) {
        return a + b;
    },
    id: 'VanillaClass',
    debugHooks: {
        $enabled: true,
        addMethod: function (a, b) {
            var me = this,
                addMethodTestResult = me.callParent(arguments);
            util.log('debugHook');
            util.log(me.id + '.' + 'addMethod');
            util.log('a = ' + a);
            util.log('b = ' + b);
            util.log('addMethodTestResult = ' + addMethodTestResult);
            return addMethodTestResult;
        }
    }
});

// Boiler plate
Ext.onReady(function () {
    var vanillaClass = Ext.create('Fiddle.VanillaClass'),
        addMethodResult = vanillaClass.addMethod(3, 4);
    Ext.Msg.alert('VanillaClass.addMethod(3,4)', addMethodResult);
    Ext.create('App.Box', {
        renderTo: Ext.getBody()
    });
});