Question

这是我对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]);
    }
});

HomeView.js

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);
        }
    });

HomeController.js

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");
    }
});

Answer 1

我认为问题出在refs的{{1}}部分，refs take键值pair.key可以是任何引用，而值则用于ComponentQuery。

我建议您在controller文件中添加xtype，如下所示。

HomeView.js

Answer 2

触发goToAboutMeCommand事件的按钮处理程序在按钮范围内运行，但在控制器中，您可以监听homeView，因此事件永远不会被捕获。

此按钮处理程序应该有效：

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

Sencha Touch点击时加载不同的视图

2 个答案: