Private functions and Variables ExtJs4?

shane87 picture shane87 · May 13, 2011 · Viewed 10.3k times · Source

In my current project I am using ExtJs3.3.
I have created many classes which had private variables and functions. For eg:

MyPanel = function(config){
  config = config || {};

  var bar = 'bar';//private variable

  function getBar(){//public function
     return bar;
  }

  function foo(){
     //private function
  }

Ext.apply(config, {
  title: 'Panel',
  layout: 'border',
  id: 'myPanel',
  closable: 'true',
  items: []
});

  MyPanel.superclass.constructor.call(this, config);
};
Ext.extend(MyPanel , Ext.Panel, {
  bar: getBar
});
Ext.reg('MyPanel', MyPanel);

I understand that the new way of doing things in ExtJs4 is to use the Ext.define method. So as my above piece of code would look something like this:

Ext.define('MyPanel', {
  extend: 'Ext.panel.Panel',

  title: 'Panel',
  layout: 'border',
  closable: true,

  constructor: function(config) {

     this.callParent(arguments);
  },

});

So what I want to know is how can I define private variables and functions in ExtJs4 similar to the way I done it in ExtJs3?
In other words I understand that the Ext.define method will take care of defining, extending and registering my new class, but where should I declare javascript var's which are not properties of the class itself but are needed by the class.

MyPanel = function(config){
  //In my Ext3.3 examples I was able to declare any javascript functions and vars here.
  //In what way should I accomplish this in ExtJs4.

  var store = new Ext.data.Store();

  function foo(){
  }
  MyPanel.superclass.constructor.call(this, config);
};

Answer

Rob Boerman picture Rob Boerman · May 13, 2011

I am not a big fan of enforcing private variables like this but of course it can be done. Just setup a accessor function (closure) to the variable in your constructor/initComponent function:

constructor: function(config) {
    var bar = 4;
    this.callParent(arguments);

    this.getBar = function() {
        return bar;
    }
},...