sencha-touch - 如何使用 sencha 中的视口(viewport)从一个 View 移动到另一个 View ？

Question

在我的应用程序中，我有一个带有顶部栏和一些字段的 View 。在这个按钮中，当我单击登录按钮时，我想移动到另一个 View (仪表板)，它是一个选项卡 View 。所以为此我正在使用视口(viewport)。但我无法从一种观点转向另一种观点。这是我的代码:

app.js

Ext.Loader.setConfig({
    enabled : true
});

Ext.application({
    views : ['TitlePanel', 'dashboardpanel'],
    models : [ 'MyModel', 'wishlistmodel' ],
    stores : [ 'name', 'wishlistsummarystore' ],
    name : 'MyApp',
    controllers : [ 'MyController' ],

    launch : function() {

        var Login = {
                xtype: 'login'
        }
        var Dashboard = {
                xtype: 'dashboard'
        }
        Ext.Viewport.add([Login, Dashboard]);
    }

});

Titlepanel.js

   Ext.define('MyApp.view.TitlePanel', {
extend: 'Ext.Panel',
alias: 'widget.login',
    config: {
        ui: 'light',
        items: [
            {
                xtype: 'panel',
                id: 'LoginScreen',
                items: [
                    {
                        xtype: 'image',
                        docked: 'left',
                        height: 130,
                        id: 'Logoimage',
                        ui: '',
                        width: 170,
                        src: 'app/images/logo.png'
                    },
                    {
                        xtype: 'titlebar',
                        cls: 'mytitlebar',
                        docked: 'top',
                        height: 100,
                        ui: 'blue',
                        items: [
                            {
                                xtype: 'label',
                                height: 36,
                                html: 'Teritree Business Portal',
                                id: 'title',
                                margin: 20,
                                style: 'font: normal Bold 20px droid sans; color:#AB3951',
                                width: 396
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        id: 'LoginPanel',
                        layout: {
                            align: 'center',
                            type: 'vbox'
                        },
                        items: [
                            {
                                xtype: 'label',
                                html: 'Login with Teritree Business Credentials',
                                id: 'Loginlabel',
                                margin: 20,
                                style: 'font: normal Bold 30px droid sans',
                                ui: 'dark'
                            },
                            {
                                xtype: 'fieldset',
                                height: 84,
                                itemId: 'LoginField',
                                margin: '40 0 0 0',
                                width: 500,
                                items: [
                                    {
                                        xtype: 'textfield',
                                        id: 'user',
                                        style: 'font: Droid Sans',
                                        label: 'Login User id',
                                        labelWidth: '40%'
                                    },
                                    {
                                        xtype: 'textfield',
                                        height: 35,
                                        id: 'password',
                                        label: 'Password',
                                        labelWidth: '40%'
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                height: 40,
                                id: 'LoginBtn',
                                margin: 20,
                                ui: 'orange',
                                width: 180,
                                text: 'Login'
                            },
                            {
                                xtype: 'label',
                                html: 'If you don\'t have an account yet: Signup at <a href="url">business.teritree.com</a> ',
                                id: 'signup',
                                margin: 20,
                                style: 'font: normal 24px droid sans'
                            }
                        ]
                    }
                ]
            }
          ]
        }
    });

dashboardpanel.js

    Ext.define('MyApp.view.dashboardpanel', {
extend: 'Ext.Panel',
alias: 'widget.dashboard',
    id:'dashboardpanel',
    fullscreen: true,
    tabBarDock: 'bottom',
    items: [
            mainWindow   
           ]
});
    var mainWindow = new Ext.Panel({
    title:'main',
    iconCls:'home',
    layout:'fit',
    scroll: 'vertical',
    dockedItems: [toolbar,bigButton]
});

var bigButton = new Ext.Button({
    dock: 'bottom',
    text: 'I should be at the bottom'
});

var toolbar = new Ext.Toolbar({
    dock: 'top',
    title: 'Main',
    items: [
        {
            text: 'Reload',
        }
    ]
});

MyContrller.js

    Ext.define('MyApp.controller.MyController', {
    extend : 'Ext.app.Controller',
    config : {
        refs : {
            LoginScreen : '#Login',
            dashboardscreen : '#dashboardpanel'
        },

        control : {
            "#LoginBtn" : {
                tap : 'onLoginButtonTap'
            }
        }
    },

    slideLeftTransition: { type: 'slide', direction: 'left' },

    onLoginButtonTap : function(button, e, options) {
           Ext.Viewport.animateActiveItem(Dashboard, this.slideLeftTransition);
    }

});

Answer 1

嘿，我终于能够解决这个问题了。因为我在 Controller 中给出了错误的引用..这里是 Controller 代码:

Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
    refs : {
        TitlePanel : 'login',
        dashboardpanel : 'dashboard'
    },

    views : [
             'TitlePanel',
             'dashboardpanel'
         ],

    control : {
        "#LoginBtn" : {
            tap : 'onLoginButtonTap'
        }
    }
},

slideLeftTransition: { type: 'slide', direction: 'left' },

onLoginButtonTap : function(button, e, options) {

    Ext.Viewport.setActiveItem(this.getDashboardpanel(), this.slideLeftTransition);
}

});