Как я могу получить доступ к переменным класса в обработчике событий 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 способом и используйте свойство config 'scope':

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 : если вам нужен доступ к вашему родительскому контейнеру (если родитель держит ваш флажок), вы можете получить доступ к родительскому контейнеру через открытое свойство OwnerCt.

3.Используйте свойство refOwner : если вы используете в своем коде систему ref, вы можете использовать это свойство, чтобы получить доступ к контейнеру и получить доступ к необходимой переменной.

Я думаю, это будет легковам пойти с первым вариантом.