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

问题

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?

回答1:

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.

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/5967348/how-can-i-access-class-variables-in-an-extjs-event-handler

标签

extjs

extjs4