Private members when extending a class using ExtJS

Question

I have done some research on the ExtJS forum regarding private methods and fields inside a extended class, and I couldn't find any real answer to this.

And when I say an extended class I mean something like this:

Ext.ux.MyExtendedClass = Ext.extend(Ext.util.Observable, {
    publicVar1: 'Variable visible from outside this class',
    constructor: function(config) { this.addEvents("fired"); this.listeners = config.listeners; }, // to show that I need to use the base class
    publicMethod1: function() { return 'Method which can be called form everywhere'; },
    publicMethod2: function() { return this.publicMethod1() + ' and ' + this.publicVar1; } // to show how to access the members from inside another member
});

The problem here is that everything is public. So, how do I add a new variable o method within the scope of MyExtendedClass that cannot be accessed from outside but can be access by the public methods?

Answer 1

I use something like the following.

  var toolbarClass = Ext.extend( Ext.Container,
  {
    /**
     * constructor (public)
     */
    constructor: function( config )
    {
      config = config || {};

      // PRIVATE MEMBER DATA ========================================
      var accountId = Ext.id( null, 'ls-accountDiv-');

      // PUBLIC METHODS ========================================
      this.somePublicMethod = function(){
         console.log( accountId );
      };

...

Answer 2

The following example shows also the Upper Stage way to define privileged private & public members. But it also shows how to define private static members (also called class members), and public non-privileged members. Using these last 2 instead of the privileged ones, we will reduce initialization time as they are not parsed every time you create a new object of your class:

Ext.ux.MyExtendedClass = Ext.extend(Ext.util.Observable, 
  (function() {
    // private static fields (can access only to scope: minimum privileges).
    var privStaticVar = 0;
    // private static functions (can access only to scope and arguments, but we can send them the scope by param)
    var privateFunc1 = function(me) { return me.name + ' -> ClassVar:' + privStaticVar; };
    var privateFunc2 = function(me) { return me.publicMethod1() + ' InstanceVar:' + me.getPrivateVar(); };
    return {
        constructor: function(config) {
            // privileged private/public members (can access to anything privated and public)
            var privateVar = config.v || 0;
            var privInstFunc = function() { privateVar += 1; }
            this.name = config.name;
            this.incVariables = function(){ privInstFunc(); privStaticVar += 1; };
            this.getPrivateVar = function(){ return privateVar; };
        },
        // public members (can access to public and private static, but not to the members defined in the constructor)
        publicMethod1: function() { this.incVariables(); return privateFunc1(this) },
        publicMethod2: function() { return privateFunc2(this); }
    };
  }())
);

You can see my test case (and easily modify it, and even save a new revision if you find a buggy behavior or something) in jsbin/MyExtendedClass

Answer 3

Excelent, i was wondering how to have my clousured vars work with extend that don't like the object created after the executed function, obviously it isn't a constructor so is discarted, this solution show how flexible js is.