Understanding Ext JS 4

[bbl5660]

All,

I'm trying to figure out how I can hold private state & functions in an Ext JS 4 module. Hopefully there is a solution like this (Ext JS 3 example):

/*jshint smarttabs: true */
/*global MY, Ext, jQuery */
Ext.ns("MY.NAMESPACE");

MY.NAMESPACE.Widget = (function($) {
    /**
     * NetBeans (and other IDE's) may complain that the following line has
     * no effect, this form is a useless string literal statement, so it 
     * will be ignored by browsers with implementations lower than EcmaScript 5.
     * Newer browsers, will help developers to debug bad code.
     */
    "use strict";

    // Reference to the super "class" (defined later)
    var $superclass = null;

    // Reference to this "class", i.e. "MY.NAMESPACE.Widget"
    var $this = null;

    // Internal reference to THIS object, which might be useful to private methods
    var $instance = null;

    // Private member variables
    var someCounter, someOtherObject = {
        foo: "bar",
        foo2: 11
    };

    ///////////////////////
    /* Private Functions */
    ///////////////////////
    function somePrivateFunction(newNumber) {
        someCounter = newNumber;
    }

    function getDefaultConfig() {
        var defaultConfiguration = {
            collapsible: true,
            id: 'my-namespace-widget-id',
            title: "My widget's title"
        };
        return defaultConfiguration;
    }

    //////////////////////
    /* Public Functions */
    //////////////////////
    $this = Ext.extend(Ext.Panel, {
        /**
         * This is overriding a super class' function
         */
        constructor: function(config) {
            $instance = this;
            config = $.extend(getDefaultConfig(), config || {});

            // Call the super clas' constructor 
            $superclass.constructor.call(this, config);
        },
        somePublicFunctionExposingPrivateState: function(clientsNewNumber) {
            clientsNewNumber = clientsNewNumber + 11;
            somePrivateFunction(clientsNewNumber);
        },
        /**
         * This is overriding a super class' function
         */
        collapse: function() {
            // Do something fancy
            // ...
            // Last but not least
            $superclass.collapse.call(this);
        }
    });

    $superclass = $this.superclass;
    return $this;

})(jQuery);​

So, what I'm trying for Ext JS 4 is this :

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(),
    });

});
​

Yet, when the view renders, only the second panel has a Button. What gives? Here's a JSFiddle : http://jsfiddle.net/b_long/d4Ymk/

[skirtle]

For the button problem see here:

http://skirtlesden.com/articles/conf...-the-prototype

I'd also encourage you to move away from trying to make things private like that, it really isn't in the spirit of writing good ExtJS.

[bbl5660]

@skirtle , thanks very much for sharing that - I definitely want to start doing things in a more prototypal way. That said... shouldn't there be a way to hold private state by combining a vanilla JS module pattern w/ Ext's

Ext.define(...)

function ?