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,588
    Answers
    540
    Vote Rating
    322
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi