Private functions and Variables ExtJs4?

Question

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);
};

score 8 · Accepted Answer · answered May 13 '11 at 07:43

8

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;
    }
},...

answered May 13 '11 at 07:43

Rob Boerman

2,148
14
21

Can you expand on this @Rob ? I'm not getting much support over at the [Sencha Forums](http://www.sencha.com/forum/showthread.php?245130-Understanding-Ext-JS-4) . I'm hoping to find something similar to my implementation (see question update made on 2012-05-31 ) -> http://stackoverflow.com/questions/9104387/extjs-javascript-module-design-pattern-best-practices – blong Oct 08 '12 at 20:21
Hi,I agree with the comment below that the use of the config object would be what you want when using ExtJS 4 or Sencha Touch 2. The config creates internal variables and a getter and setter automatically. I am calling them "internal variables" because they are not exactly "private". When digging around in the object you will be able to change them but you have to make an effort :) When you are creating any complex application I would STRONGLY recommend using the Sencha MVC structure instead of manual definitions for maintainability. Good luck – Rob Boerman Oct 09 '12 at 08:26
what about something like this : http://stackoverflow.com/a/6023603/320399 . I'm trying to adapt `Ext.define` to give me private functions shared between instances and private member variables unique to instances. – blong Oct 09 '12 at 14:59
ExtJS gives you the 'config' object for private variables and 'statics' for class variables (shared between instances of the class) – Rob Boerman Oct 09 '12 at 18:47
Hmm... alright, so does that mean anything I want to keep private I have to add to the `config` object in the constructor (if I absolutely wanted private functions) and shared functions (implicitly public) can be added to `statics` property on the returned object? I'm trying to improve this: http://jsfiddle.net/b_long/d4Ymk/21/ – blong Oct 09 '12 at 20:56

score 6 · Answer 2 · answered Nov 18 '11 at 14:27

Thats exactly what config is for, check this from Extjs docs:

config: Object List of configuration options with their default values, for which automatically accessor methods are generated. For example:

Ext.define('SmartPhone', {
     config: {
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },
     constructor: function(cfg) {
         this.initConfig(cfg);
     }
});

var iPhone = new SmartPhone({
     hasTouchScreen: true,
     operatingSystem: 'iOS'
});

iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true

That way you hide your actual field and still have access to it.

This will also create a `apply` and a `setter` method. You'll still need to override the apply method and return void to make sure ppl can't change the value. — Varun Achar, Aug 31 '12 at 06:42

score 5 · Answer 3 · answered Jul 26 '13 at 07:20

5

You can create private members like this. But it won't useful if you are making more than one instance for this class.

Ext.define('MyPanel', function(){

    var bar = 'bar';//private variable

    function foo(){
        //private function
    };
    return {
       extend: 'Ext.panel.Panel',
       title: 'Panel',
       layout: 'border',
       closable: true,

       constructor: function(config) {

           this.callParent(arguments);
       },

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

    };

});

thank you,

Nandu

answered Jul 26 '13 at 07:20

NKurapati

590
1
6
20

`bar` and `foo`, in your code, are actually static variable and function respectively. – Arvin Aug 14 '14 at 10:40
I suspect you are missing '()' after the function body? – Alex Jun 09 '16 at 16:33

Private functions and Variables ExtJs4?

3 Answers3