1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    bbl5660 is on a distinguished road

      0  

    Default Question about the JavaScript Module Pattern with ExtJS 3.0.0

    Question about the JavaScript Module Pattern with ExtJS 3.0.0


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,640
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    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);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    bbl5660 is on a distinguished road

      0  

    Default


    @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?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,640
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by bbl5660 View Post
    @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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    bbl5660 is on a distinguished road

      0  

    Default


    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:

    Code:
    /*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);‚Äč

Thread Participants: 1

Tags for this Thread