1

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

应用程序.js

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

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

    launch: function() {

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

});

主控制器.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);
                    }
                }
            }
        });

    }
});

主面板.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'});

...这不起作用，但对于应该替换它的内容完全空白。

4

2 回答 2

0

您不能像上面那样只对 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'
            }
        ]
    }

});
于 2012-11-28T03:02:41.170 回答
0

如果你改变

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

至

Ext.Viewport.add(Ext.create('MyApp.view.MainPanel'));

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

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

至

Ext.Viewport.setActiveItem(Ext.create('dashboard'),{
// other stuff
});

并将仪表板添加到 app.js 中的视图数组中，我相信它应该可以工作

于 2012-09-13T20:19:09.247 回答