ExtJS 4.x w/ OOP

Using ExtJS 4.x

HTML

<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.0.2/resources/css/ext-all.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js"></script>
<div>
<p>
Testing!
</p>
</div>

JavaScript

Ext.onReady(function() {

    // Put this in a namespace
    var pseudoClass = (function() {
        // Private member variable (plain-old JS variable)
        var privateThing = "foo";

        // Private function
        var describeStuff = function() {
            alert(privateThing);
        };
        // Private Ext instance              
        var someButton = Ext.create('Ext.Button', {
            text: 'Click me',
            handler: describeStuff 
        });

        return {
            extend: 'Ext.panel.Panel',
            html: 'This is the content of my custom panel',
            config: {
                title: 'I am a custom Panel'
            },
            constructor: function(config) {
                privateThing = config.setPrivateStuff;
                config.title = privateThing;
                this.callParent(arguments);
                this.initConfig(config);
            },
            items: [someButton]
        };
    }());

    // HTML is declared inside the class, title inside the config, constructor overridden
    Ext.define('MyCustomPanel', pseudoClass);

    var panelInstance1 = Ext.create('MyCustomPanel', {
        title: 'I am a custom Panel - 1',
        html: 'This is the content of panel 1!',
        setPrivateStuff: 'test 1'
    });

    var panelInstance2 =Ext.create('MyCustomPanel', {
        title: 'I am a custom Panel - 2',
        html: 'This is the content of panel 2!',
        setPrivateStuff: 'test 2'
    });

    Ext.create('Ext.panel.Panel', {
        items: [panelInstance1, panelInstance2],
        renderTo: Ext.getBody(),
    });

});