Почему я не могу получить доступ к методу в конфигурационном объекте JavaScript Sencha Touch из обработчика?

Question

Это, вероятно, недостаток понимания области JavaScript, но почему я не могу получить доступ к this.onLoginTap () из элемента элементов Panel при нажатии кнопки.Я получаю сообщение о том, что this.onLoginTap не существует.Мое решение на данный момент будет перенести объявление элементов в метод initComponent, но я все еще задаюсь вопросом, почему я не могу получить доступ к этому методу.1005 *

app.myView = Ext.extend(Ext.Panel, {       
    fullscreen: true,
    scroll: 'vertical',
    layout: {
        type: 'vbox'
    },        

    items: [{
            layout: {
                type: 'hbox'
            },
            items: [ {
                xtype: 'button',
                text: 'Log In',
                ui: 'confirm',
                handler: function() {
                   this.onLoginTap(); // this.onLoginTap is undefined here at runtime.
                }
            }]
        }],

        // Controller Dispatchers
        onLoginTap: function() {
            console.log('onLoginTap');
        },

        initComponent: function() {
            app.myView.superclass.initComponent.apply(this, arguments);
        }                
    });

    Ext.reg('myView', app.myView); 

Answer 1

Указатель «this» действительно не указывает на кнопку в момент выполнения.

Но самое главное, вот несколько решений:

РЕШЕНИЕ 1:

Проверьте документацию для обработчика: http://docs.sencha.com/touch/1-1/#!/api/Ext.Button-cfg-handler

Вы увидите, что вы можете получить фактический экземпляр кнопки из функции обработчика:

handler: function(button, event) {
    var parent = button.ownerCt; // get your main panel, the owner of the button
    parent.onLoginTap();
}

Я не проверял код, но основная идея должна быть ясной.

РЕШЕНИЕ 2:

• Удалить обработчик из конфигурации

• Назначить обработчик в initComponent:

   // Get the button and add a listener to it:
   this.items.get(0).addListener('tap', this.onLoginTap);
  

РЕШЕНИЕ 3:

То же, что и в решении 2, за исключением того, что вы назначаете обработчики / прослушиватели из контроллера.Контроллер управляет панелью / представлением, поэтому имеет смысл связать воедино всю логику.

Answer 2

Вы пробовали это:

items: [ {
            xtype: 'button',
            text: 'Log In',
            ui: 'confirm',

            handler: function() {
               this.up('panel').onLoginTap(); // this.onLoginTap is undefined here at runtime.
            }
        }]

Редактировать: Только что столкнулся с той же ситуацией - моя установка MVC и моя кнопка находится в formpanel.Я смог получить доступ к главному окну, используя this.up ('formpanel'), поэтому вышеприведенное может работать для вас (я также не установил область действия кнопки, так как это не работает с ней)