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

      0  

    Default Unanswered: Understanding Ext JS 4

    Unanswered: Understanding Ext JS 4


    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):

    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);​
    So, what I'm trying for Ext JS 4 is this :

    Code:
    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/

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    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.

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

      0  

    Default


    @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
    Code:
    Ext.define(...)
    function ?
    Last edited by bbl5660; 9 Oct 2012 at 5:21 AM. Reason: Added link to an implementation of a vanilla JS module with private state

Thread Participants: 1

Tags for this Thread