extjs - 如何访问 ExtJS 事件处理程序中的类变量？

Question

this.getUrl = 'test';
this.items.add(
      new Ext.form.Checkbox(
            {
              listeners: {
                check: function(checkbox, checked) {
                  alert(this.getUrl);
                },
             }
       )
)

如何this.getUrl在检查处理程序中访问？

Answer 1

我想知道为什么没有人提出明显的建议，只需使用 Ext 方式并使用“范围”配置属性：

this.getUrl = 'test';
this.items.add(
    new Ext.form.Checkbox(
            {
            listeners: {
                check: function(checkbox, checked) {
                    alert(this.getUrl);
                },
                scope: this
            }
    )
)

Answer 2

事件处理程序通常从不同的范围（this值）调用。如果您想要的只是处理程序中的单个值，则词法作用域是最简单的方法：

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

或者，如果您确实希望父对象this在事件处理程序中可用，则可以使用Ext.Function.bind来修改范围：

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

更新：Ext.Function.bind是 ExtJS 4 的一个特性。如果您使用的是 ExtJS 3.x 或更低版本，则可以使用Function.createDelegate相同的目的：

this.getUrl='test';
this.items.add(
      new Ext.form.Checkbox(
            {
              listeners: {
                check: function(checkbox, checked) {
                  alert(this.getUrl);
                }.createDelegate(this)
             }
       )
)

Answer 3

有多种方法可以访问该属性getUrl。以下是几个可能的选项：

1. 使用 Ext.getCmp：如果您id为您的 FormPanel（或您使用的其他 extjs 组件）设置一个，您可以使用Ext.getCmp()方法访问它。所以，

 var yourComponent = Ext.getCmp('yourComponentId');
 alert(yourComponent.getUrl);

2. 使用 OwnerCt 属性：如果您需要访问您的父容器（如果父项持有您的复选框），您可以通过 public 属性访问父容器OwnerCt。

3. 使用 refOwner 属性：如果您ref在代码中使用 system，您可以利用该属性来获取容器并访问所需的变量。

我认为你会很容易选择第一个选项。