Javascript Sencha Touch在单击时加载不同的视图

这是我第一次尝试Sencha Touch。如果我问了一些愚蠢的问题，请原谅

我试图遵循Sencha的干净MVC模式。在主页上，当用户单击“我想加载AdboutView”时，我不确定这段代码中有什么错误，但它不会触发“onGoToAboutMeCommand”

app.js

Ext.application({
    name: "HaBoMobile",
    models: ["HomeModel"],
    stores: ["HomeStore"],
    controllers:["HomeController"],
    views: ["HomeView", "AboutView"],

    launch: function () {
        var homeLandingView = {
            xtype: "LandingView"
        };
        var aboutView = {
            xtype: "AboutView"
        };
        Ext.Viewport.add([homeLandingView, aboutView]);
    }
});

Ext.define("HaBoMobile.view.HomeView", {
    extend: "Ext.navigation.View",
    fullscreen:true,
        requires: "Ext.form.FieldSet",
        alias: "widget.LandingView",
        config: {
            //scrollable: 'vertical',
            items: [
                 {
                     title: 'Harsha Bopuri',
                     padding: 10,
                     items: [
                         {
                             itemId: "aboutButton",
                             xtype: 'button',
                             text: 'About me',
                             handler: function () {
                                 this.fireEvent("goToAboutMeCommand", this);
                             }
                         }
                     ]
                 }
            ],
            //Not sure when I have handler, if I still need listeners?
            listeners: [
                {
                    delegate: "#aboutButton",
                    event: "tap",
                    fn: "onAboutButtonTap"
                }
            ]
        },
        onAboutButtonTap:function(){
            this.fireEvent("goToAboutMeCommand", this);
        },
        onBackButtonTap: function () {
            console.log("backToHomeCommand");
            this.fireEvent("backToHomeCommand", this);
        }
    });

Ext.define("HaBoMobile.controller.HomeController", {
    extend: "Ext.app.Controller",
    config: {
        refs: {
            homeView: "HomeView"
        },
        control: {
            homeView: {
                goToAboutMeCommand: "onGoToAboutMeCommand"
            }
        }
    },
    // Transitions
    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },
    // Commands.
    onGoToAboutMeCommand: function () {
        console.log("onBackToHomeCommand");
        this.showAboutMe();
    },
    onBackToHomeCommand: function () {
        console.log("onBackToHomeCommand");
        this.shoHomePage();
    },

    showAboutMe: function () {
        Ext.Viewport.animateActiveItem(this.getAboutView(), this.slideRightTransition);
    },
    shoHomePage: function () {
        Ext.Viewport.animateActiveItem(this.getHomeView(), this.slideRightTransition);
    },

    // Base Class functions.
    launch: function () {
        this.callParent(arguments);
        var homeStore = Ext.getStore("HomeStore");
        homeStore.load();
        console.log("launch");
    },
    init: function () {
        this.callParent(arguments);
        console.log("init");
    }
});

HomeView.js

Ext.application({
    name: "HaBoMobile",
    models: ["HomeModel"],
    stores: ["HomeStore"],
    controllers:["HomeController"],
    views: ["HomeView", "AboutView"],

    launch: function () {
        var homeLandingView = {
            xtype: "LandingView"
        };
        var aboutView = {
            xtype: "AboutView"
        };
        Ext.Viewport.add([homeLandingView, aboutView]);
    }
});

Ext.define("HaBoMobile.view.HomeView", {
    extend: "Ext.navigation.View",
    fullscreen:true,
        requires: "Ext.form.FieldSet",
        alias: "widget.LandingView",
        config: {
            //scrollable: 'vertical',
            items: [
                 {
                     title: 'Harsha Bopuri',
                     padding: 10,
                     items: [
                         {
                             itemId: "aboutButton",
                             xtype: 'button',
                             text: 'About me',
                             handler: function () {
                                 this.fireEvent("goToAboutMeCommand", this);
                             }
                         }
                     ]
                 }
            ],
            //Not sure when I have handler, if I still need listeners?
            listeners: [
                {
                    delegate: "#aboutButton",
                    event: "tap",
                    fn: "onAboutButtonTap"
                }
            ]
        },
        onAboutButtonTap:function(){
            this.fireEvent("goToAboutMeCommand", this);
        },
        onBackButtonTap: function () {
            console.log("backToHomeCommand");
            this.fireEvent("backToHomeCommand", this);
        }
    });

Ext.define("HaBoMobile.controller.HomeController", {
    extend: "Ext.app.Controller",
    config: {
        refs: {
            homeView: "HomeView"
        },
        control: {
            homeView: {
                goToAboutMeCommand: "onGoToAboutMeCommand"
            }
        }
    },
    // Transitions
    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },
    // Commands.
    onGoToAboutMeCommand: function () {
        console.log("onBackToHomeCommand");
        this.showAboutMe();
    },
    onBackToHomeCommand: function () {
        console.log("onBackToHomeCommand");
        this.shoHomePage();
    },

    showAboutMe: function () {
        Ext.Viewport.animateActiveItem(this.getAboutView(), this.slideRightTransition);
    },
    shoHomePage: function () {
        Ext.Viewport.animateActiveItem(this.getHomeView(), this.slideRightTransition);
    },

    // Base Class functions.
    launch: function () {
        this.callParent(arguments);
        var homeStore = Ext.getStore("HomeStore");
        homeStore.load();
        console.log("launch");
    },
    init: function () {
        this.callParent(arguments);
        console.log("init");
    }
});

HomeController.js

Ext.application({
    name: "HaBoMobile",
    models: ["HomeModel"],
    stores: ["HomeStore"],
    controllers:["HomeController"],
    views: ["HomeView", "AboutView"],

    launch: function () {
        var homeLandingView = {
            xtype: "LandingView"
        };
        var aboutView = {
            xtype: "AboutView"
        };
        Ext.Viewport.add([homeLandingView, aboutView]);
    }
});

Ext.define("HaBoMobile.view.HomeView", {
    extend: "Ext.navigation.View",
    fullscreen:true,
        requires: "Ext.form.FieldSet",
        alias: "widget.LandingView",
        config: {
            //scrollable: 'vertical',
            items: [
                 {
                     title: 'Harsha Bopuri',
                     padding: 10,
                     items: [
                         {
                             itemId: "aboutButton",
                             xtype: 'button',
                             text: 'About me',
                             handler: function () {
                                 this.fireEvent("goToAboutMeCommand", this);
                             }
                         }
                     ]
                 }
            ],
            //Not sure when I have handler, if I still need listeners?
            listeners: [
                {
                    delegate: "#aboutButton",
                    event: "tap",
                    fn: "onAboutButtonTap"
                }
            ]
        },
        onAboutButtonTap:function(){
            this.fireEvent("goToAboutMeCommand", this);
        },
        onBackButtonTap: function () {
            console.log("backToHomeCommand");
            this.fireEvent("backToHomeCommand", this);
        }
    });

Ext.define("HaBoMobile.controller.HomeController", {
    extend: "Ext.app.Controller",
    config: {
        refs: {
            homeView: "HomeView"
        },
        control: {
            homeView: {
                goToAboutMeCommand: "onGoToAboutMeCommand"
            }
        }
    },
    // Transitions
    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },
    // Commands.
    onGoToAboutMeCommand: function () {
        console.log("onBackToHomeCommand");
        this.showAboutMe();
    },
    onBackToHomeCommand: function () {
        console.log("onBackToHomeCommand");
        this.shoHomePage();
    },

    showAboutMe: function () {
        Ext.Viewport.animateActiveItem(this.getAboutView(), this.slideRightTransition);
    },
    shoHomePage: function () {
        Ext.Viewport.animateActiveItem(this.getHomeView(), this.slideRightTransition);
    },

    // Base Class functions.
    launch: function () {
        this.callParent(arguments);
        var homeStore = Ext.getStore("HomeStore");
        homeStore.load();
        console.log("launch");
    },
    init: function () {
        this.callParent(arguments);
        console.log("init");
    }
});

---

我认为问题出在

控制器的
refs
部分，refs接受键值对。key可以是任何引用，而value用于ComponentQuery

我建议在
HomeView.js
文件中添加
xtype
，如下所示

Ext.define("HaBoMobile.view.HomeView", {
    extend: "Ext.navigation.View",
    xtype: 'HomeView',
   //----- 

触发
goToAboutMeCommand
事件的按钮处理程序在按钮的作用域中运行，但在您侦听的控制器中运行
homeView
，因此事件永远不会被捕获

此按钮处理程序应该可以工作：

handler: function (btn) {
   var hv = btn.up('homeView');
   hv.fireEvent("goToAboutMeCommand", hv);
}