Question about the JavaScript Module Pattern with ExtJS 3.0.0

[bbl5660]

Hi everyone, sorry to cross-post this, but I'm thinking the community here on the Sencha forms might have a better understanding than someone else. We use ExtJS 3.0 to build our apps. and I'm wondering if there is something I might be missing. Would you mind taking a look at my StackOverflow question?

http://stackoverflow.com/questions/9...best-practices

[mitchellsimoens]

The more function calls you do, the less performance you are going to do. To properly extend a component you can do this:

Ext.ns('Some.name');

Some.name.Space = Ext.extend(Ext.form.FormPanel, {
    initComponent: function() {
        this.items = [
            {
                xtype : 'numberfield',
                fieldLabel : 'Numberfield'
            }
        ];

        Some.name.Space.superclass.initComponent.call(this);
    }
});

Ext.reg('myxtype', Some.name.Space);

[bbl5660]

@mitchellsimoens Thanks for the example, we definitely need to add the xtype declarations. How would I go about adding private methods following your "Some.name.Space" example?

[mitchellsimoens]

@mitchellsimoens Thanks for the example, we definitely need to add the xtype declarations. How would I go about adding private methods following your "Some.name.Space" example?

In javascript, nothing is private. The only thing you can do is have a closure within a method of a class but event that isn't actually private.

[bbl5660]

Thanks @mitchellsimoens - Sorry for not replying to this thread. I actually ended up having pretty great conversations on StackOverflow about this - I'd definitely recommend anybody still using Ext 3.x to take a look -> http://stackoverflow.com/questions/9...best-practices.

Here's my favorite implementation:

/*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);​