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);
};
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;
}
},...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With