我创建了一个导航,其中一个容器有两个面板;一个用于一个接一个地添加面板,另一个作为包含 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();
}
});