Блог

Главная - Вопросы по программированию - Как я могу получить доступ к переменным класса в обработчике событий ExtJS?

Как я могу получить доступ к переменным класса в обработчике событий ExtJS?

#extjs #extjs4

#extjs #extjs4

Вопрос:

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

Как мне получить доступ this.getUrl к обработчику проверки?

Комментарии:

1. @Abdel: Почему вы удалили тег extjs4 из этого вопроса? Если он на версии 4, он должен использовать Ext.Function.bind , но если он на версии 3 или меньше, он должен использовать Function.createDelegate для изменения области действия функции. В этом случае важна версия.

2. @wes, поправьте меня, если я ошибаюсь .. в extjs4 нет check события для флажка.

3. Очень проницательный! Я пропустил это. Более того, если бы он был на версии 4, это был бы Ext.form.field. Флажок. Я обновлю свой ответ 🙂

4. @wes, я вернул тег extjs4 .. но мне интересно, как событие сработало для него… Я попробую это сделать 2moro!

Ответ №1:

Интересно, почему никто не предложил очевидное, просто сделайте это Ext-способом и используйте свойство конфигурации ‘scope’:

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

Ответ №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)
             }
       )
)

Ответ №3:

Существует несколько способов доступа к свойству getUrl . Вот несколько возможных вариантов:

1. Используйте Ext.getCmp: если вы установили id для вашей FormPanel (или другого компонента extjs, что бы вы ни использовали), вы можете получить к нему доступ с помощью Ext.getCmp() метода. Итак,

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

2. Используйте свойство OwnerCt: если вам нужно получить доступ к вашему родительскому контейнеру (если родительский элемент содержит ваш флажок), вы можете получить доступ к родительскому контейнеру через общедоступное свойство OwnerCt .

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

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