How can I access class variables in an ExtJS event handler? - extjs

Question

this.getUrl = 'test';
this.items.add(
new Ext.form.Checkbox(
{
listeners: {
check: function(checkbox, checked) {
alert(this.getUrl);
},
}
)
)
How do I access this.getUrl in the check handler?

Answer 1

I wonder why nobody has suggested the obvious, just do it the Ext way and use the 'scope' config property:
this.getUrl = 'test';
this.items.add(
new Ext.form.Checkbox(
{
listeners: {
check: function(checkbox, checked) {
alert(this.getUrl);
},
scope: this
}
)
)

Answer 2

Event handlers are usually called from a different scope (this value). If all you want is a single value in the handler, lexical scoping is the easiest way to go:
var getUrl = 'test'; // now it's just a regular variable
this.items.add(
new Ext.form.Checkbox(
{
listeners: {
check: function(checkbox, checked) {
alert(getUrl); // still available - lexical scope!
},
}
)
)
Or if you really do want the parent object available as this in your event handler, you can use Ext.Function.bind to modify the scope:
this.getUrl='test';
this.items.add(
new Ext.form.Checkbox(
{
listeners: {
check: Ext.Function.bind( function(checkbox, checked) {
alert(this.getUrl);
}, this ), // second arg tells bind what to use for 'this'
}
)
)
Update: Ext.Function.bind is an ExtJS 4 feature. If you're on ExtJS 3.x or lower, you can use Function.createDelegate to the same end:
this.getUrl='test';
this.items.add(
new Ext.form.Checkbox(
{
listeners: {
check: function(checkbox, checked) {
alert(this.getUrl);
}.createDelegate(this)
}
)
)

Answer 3

There are multiple ways to access the property getUrl. Here are the few possible options:
1. Use Ext.getCmp: If you set an id for your FormPanel (or other extjs component whatever you are using), you can access it using Ext.getCmp() method. So,
var yourComponent = Ext.getCmp('yourComponentId');
alert(yourComponent.getUrl);
2. Use OwnerCt property: If you need to access your parent container (If the parent is holding your checkbox) you can access the parent container through the public property OwnerCt.
3. Use refOwner property: If you use ref system in your code, you can make use of this property to get hold of the container and access the required variable.
I think it will be easy for you to go with the first option.