PDA

View Full Version : Declaring functions inside initComponent



DerekBrennan
14 Jun 2012, 9:00 AM
Im working on a project using Ext JS4. In some of our classes we are declaring functions inside the initComponent function which may then be set as handlers to a control. I will include an example of this below. Ignore most of what is in the class, the key details are the fact that the Handlers are declared within initComponent and set as handlers to the buttons.
Now, this actually WORKS - the qestion here is WHY this works. I'm fairly new to JavaScript, but I thought that any vars or functions declared within a function were destroyed once that function had completed. Is this incorrect? I appreciate that there may be a better coding style for much of this, but I would really like to get my head around this before I consider changing loads of classes. The class is as follows... Some comments identify the key areas.

Ext.onReady(function () {
Ext.application({

name: 'Form2',
thisForm: {},

launch: function() {
thisForm = Ext.create('Form2', {});
}
});
});

Ext.define('Form2', {
extend: 'Ext.form.Panel',
layout:'border',

config: {
controlManager: {},
formVariables: {},
dataHelper: {}
},

constructor: function () {
var me = this;

...
...

// Initialize the form - I know, this might not be the be best coding style here.
me.initComponent();
},

initComponent: function() {

Ext.QuickTips.init();

var ButtonControl1 = this.controlManager.createButton('ButtonControl1');

var ButtonControl2 = this.controlManager.createButton('ButtonControl2');

...
...

// Handler for Button1 - **I'm NOT using the var keyword in this declaration**
function Handler1() {
alert('This Works!');
};

// Handler for Button2 - **I'm using the var keyword in this example**
var Handler2 = function () {
alert('This Works also!');
};

// THIS IS THE KEY PART OF THIS QUESTION - even though the handler functions are declared
// locally (above), clicking the buttons will still execute these. Do the functions
// still exist by chance, and will be garbage collected at some later time, or are they
// actually quaranteed to be there. I'm confused!

ButtonControl1.onClickEventHandler = function () {Handler1();};

ButtonControl2.onClickEventHandler = function () {Handler2();};

// Don't need to worry about this part.

Ext.create('Ext.container.Viewport', {
layout:'border',
style: { position:'relative' },
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:0px'
},
items: [
{
collapsible: false,
split: false,
region: 'north',
height: 50,
margins: '0 2 0 2',
bbar: '',
items: [ ]
},
{
collapsible: false,
split: false,
region:'west',
margins: '0 0 0 0',
cmargins: '0 2 0 2',
width: 0,
lbar: [ ]
},
{
collapsible: false,
region:'center',
margins: '0 2 0 2',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'form',
fileUpload: true,
layout: {
align: 'stretch',
type: 'vbox'
},
flex: 1,
items: [
{
xtype: 'container',
height: 550,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'container',
width: 570,
layout: 'vbox',
padding: '5 0 0 0',
style:'background-color:rgb(255, 255, 255);',
items: [
ButtonControl1, ButtonControl2
]
}
]
}
]
}
]
}
]
});
}
});