Sencha touch 从控制器更改Sencha Touch中显示的卡

登录后，我希望登录页面替换为仪表板页面，但由于某些原因，我无法更改卡，因为我无法获得接受setActiveItem方法的引用

app.js

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

Ext.application({
    views: [
        'MainPanel'
    ],
    name: 'MyApp',
    controllers: [
        'MainController'
    ],

    launch: function() {

        Ext.create('MyApp.view.MainPanel', {fullscreen: true});
    }

});

MainController.js

Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.Controller',
    alias: 'controller.mainController',

    config: {
    },

    init: function(application) {
        this.control({
            'button[action=submitSigninemEmail]': {
                tap: 'signinemEmailFnc'
            }
        });
    },

    signinemEmailFnc: function() {

        var email_fld = Ext.getCmp('signinemEmail').getValue();
        var password_fld = Ext.getCmp('signinemPassword').getValue();

        var md5password = MD5(password_fld);

        Ext.data.JsonP.request({
            url: 'http://www.solumac.co.uk/clients/uwana/v2/ajax/sencha.php',
            params: {
                method: 'signinem',
                callback: 'signinem',
                email: email_fld,
                password: md5password
            },
            callback: function(result, params) {
                if (result === true) {
                    if (params.status === true){
                        console.log('signed in');
                        MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
                    } else {
                        console.log(params.message);
                    }
                }
            }
        });

    }
});

MainPanel.js

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mainPanel',

    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'container',
                id: 'signinem',
                layout: {
                    type: 'fit'
                },
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        id: 'signinemTitleBar',
                       title: 'Sign In',
                        items: [
                            {
                                xtype: 'button',
                                id: 'signinemButtonBack',
                                ui: 'back',
                                text: 'Back'
                            },
                            {
                                xtype: 'button',
                                align: 'right',
                                id: 'signinemButtonSignUp',
                                text: 'Sign Up'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        id: 'signinemPadding',
                        padding: 10,
                        width: '100%',
                        items: [
                            {
                                xtype: 'fieldset',
                                id: 'signinemFacebookSet',
                                title: 'Sign In with Facebook',
                                items: [
                                    {
                                        xtype: 'button',
                                        id: 'signinemFacebook',
                                        margin: 10,
                                        width: '',
                                        text: 'Facebook'
                                    }
                                ]
                            },
                            {
                                xtype: 'fieldset',
                                id: 'signinemEmailSet',
                                title: 'Sign In with Email',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        id: 'signinemEmail',
                                        margin: 10,
                                        label: 'email'
                                    },
                                    {
                                        xtype: 'passwordfield',
                                        id: 'signinemPassword',
                                        margin: 10,
                                        label: 'Password'
                                    },
                                    {
                                        xtype: 'checkboxfield',
                                        action: 'changeField',
                                        id: 'signinemShow',
                                        itemId: 'mycheckbox',
                                        margin: 10,
                                        label: 'show password',
                                        labelWidth: '80%'
                                    },
                                    {
                                        xtype: 'button',
                                       action: 'submitSigninemEmail',
                                        id: 'signinemSubmit',
                                        margin: 10,
                                        text: 'Submit'
                                    }
                                ]
                            }
                        ]
                    }
                ]
           },
            {
                xtype: 'container',
                id: 'dashboard',
                layout: {
                    type: 'fit'
                },
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        id: 'dashboardBar',
                        title: 'Dashboard'
                    }
                ]
            },
        listeners: [
            {
                fn: 'onSigninemShowCheck',
                event: 'check',
                delegate: '#signinemShow'
            },
            {
                fn: 'onSigninemShowUncheck',
                event: 'uncheck',
                delegate: '#signinemShow'
            }
        ]
    },

    onSigninemShowCheck: function(checkboxfield, e, options) {
        alert('show password');
    },

    onSigninemShowUncheck: function(checkboxfield, e, options) {
        alert('hide password');
    }

});

我相信问题在于线路

MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});

…它不起作用，但是对于应该用什么来代替它，它完全是一片空白。

如果您更改

Ext.create('MyApp.view.MainPanel', {fullscreen: true});

到

在app.js中，然后在控制器中更改

MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});

到

---

并将dashboard添加到app.js中的视图数组中。我认为它应该可以工作

您不能像上面那样只执行id字符串的setActiveItem：

MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});

首先必须使用Ext.getCmp（）获取对组件的引用

此外，MyApp.views.MainPanel是一个类名，而不是实例。您需要获取特定的实例对象，然后使用它来设置活动项

以下是一些适用于您的代码：

var mypanel = Ext.ComponentQuery('mainPanel')[0];
var active = Ext.getCmp('dashboard');
mypanel.setActiveItem(active, {type: 'slide', direction: 'left'});

我还包括一个1文件应用程序，它可以满足您的需要：

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',

    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        handler: function(button, event) {
                            var comp = Ext.ComponentQuery.query('mypanel')[0];
                            var active = Ext.getCmp('c1');
                            comp.setActiveItem(active);
                        },
                        text: 'one'
                    },
                    {
                        xtype: 'button',
                        handler: function(button, event) {
                            var comp = Ext.ComponentQuery.query('mypanel')[0];
                            var active = Ext.getCmp('c2');
                            comp.setActiveItem(active);
                        },
                        text: 'two'
                    }
                ]
            },
            {
                xtype: 'container',
                html: 'Hello, first container',
                id: 'c1'
            },
            {
                xtype: 'container',
                html: 'hello, second container',
                id: 'c2'
            }
        ]
    }

});

var mypanel = Ext.ComponentQuery('mainPanel')[0];
var active = Ext.getCmp('dashboard');
mypanel.setActiveItem(active, {type: 'slide', direction: 'left'});

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',

    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        handler: function(button, event) {
                            var comp = Ext.ComponentQuery.query('mypanel')[0];
                            var active = Ext.getCmp('c1');
                            comp.setActiveItem(active);
                        },
                        text: 'one'
                    },
                    {
                        xtype: 'button',
                        handler: function(button, event) {
                            var comp = Ext.ComponentQuery.query('mypanel')[0];
                            var active = Ext.getCmp('c2');
                            comp.setActiveItem(active);
                        },
                        text: 'two'
                    }
                ]
            },
            {
                xtype: 'container',
                html: 'Hello, first container',
                id: 'c1'
            },
            {
                xtype: 'container',
                html: 'hello, second container',
                id: 'c2'
            }
        ]
    }

});