如何在ExtJS事件处理程序中访问类变量?

时间:2011-05-11 16:09:16

标签: extjs extjs4

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

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

3 个答案:

答案 0 :(得分:11)

我想知道为什么没有人提出明显的建议,只需使用Ext方式并使用'scope'配置属性:

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

答案 1 :(得分:7)

事件处理程序通常从不同的范围(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)
             }
       )
)

答案 2 :(得分:4)

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

<强> 1。使用Ext.getCmp :如果为FormPanel(或其他任何使用的extjs组件)设置id,则可以使用Ext.getCmp()方法访问它。所以,

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

<强> 2。使用OwnerCt属性:如果您需要访问父容器(如果父级持有您的复选框),您可以通过公共属性OwnerCt访问父容器。

第3。使用refOwner属性:如果在代码中使用ref系统,则可以使用此属性来获取容器并访问所需的变量。

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