sencha事件处理程序无法正常工作

Question

我创建了一个导航，其中一个容器有两个面板;一个用于逐个添加面板，另一个用作包含NEXT和BACK按钮的页脚。面板是单独创建的。

当使用xtype那些添加面板时，事件处理程序运行良好一次，但导航回事件处理程序没有响应（viewSettingSelectionPanel函数）。事件处理程序位于主控制器中。

我发现它会帮助在面板中使用itemId而不是Id。（因为它注册了两个具有相同id和冲突的组件）但是在这种情况下如何在控制器中引用它们。

请帮助我理解这个问题和解决方案。

提前致谢。

  

---我的应用---

var current = 0;
var myPanel = new Array("panelOne", "panelTwo", "panelThree", "panelFour", "panelFive");

Ext.define("myApp.controller.MainController", {
    extend: "Ext.app.Controller",

    config: {
        refs: {
            backButton: '#backButton',
            nextButton: '#nextButton',
            panelArea: '#panelArea',
            main: '#main',
            panelOne: '#panelOne',
            panelTwo: '#panelTwo',
            panelThree: '#panelThree',
            panelFourP: '#panelFour',
            panelFiveP: '#panelFiveP',
            footer: '#footer',
            settingSelectionPanel: '#settingSelectionPanel',
            selectSettingTextField: '#selectSettingTextField',
        },

        control: {
            backButton: {
                tap: 'navigateBack'
            },
            nextButton: {
                tap: 'navigateNext'
            },
            selectSettingTextField: {
                focus: 'viewSettingSelectionPanel'
            },
        },
    },

    navigateBack: function() {
        current = current - 1;
        this.addPanel(myPanel[current]);
    },

    navigateNext: function() {
        current = current + 1;
        this.addPanel(myPanel[current]);
    },

    addPanel: function(newPanel) {
        this.getPanelArea().removeAt(0);
        this.getPanelArea().add({
            xtype: "" + newPanel + ""
        });
    },

    viewSettingSelectionPanel: function(input) {
        this.getSelectSettingTextField().disable();
        this.getSettingSelectionPanel().showBy(input);
        this.getSelectSettingTextField().enable();
    }
});