2

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

应用程序.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]);
    }

});

标题面板.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'
                            }
                        ]
                    }
                ]
            }
          ]
        }
    });

仪表板面板.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',
        }
    ]
});

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

});
4

4 回答 4

3

Hey i am able to solve this problem finally. Because iwas giving wrong references in controller..here is the controller code:

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

});

于 2012-07-16T11:37:34.853 回答
1 
Ext.Viewport.setActiveItem(1);

PS：请注意视口大小写。

于 2012-07-13T14:13:49.357 回答
1

嘿@Arindam 就像这样放入您的 MyController 文件中，

Ext.define('myapp.controller.MyController', {
    extend : 'Ext.app.Controller',

    config : {
       refs : {
           LoginScreen: '#Login',
           dashboardscreen : '#Dashboard'
       },

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

    onLoginButtonTap: function(button, e, options) {
         Ext.getCmp('dashboardpanel').show('slide', true)
         Ext.getCmp('loginpanel').hide()
    }
});

而且你在dashboardpanel.js 文件中有一些错误。

I hope this helps :)

enter image description here

enter image description here

于 2012-07-14T06:44:33.047 回答
0

我建议你使用Ext.navigation.View这个。您可以在 app.js 中添加视口，然后在视口中添加导航视图，在该导航视图上您可以推送 TitlePanel，然后在 TitlePanel 中单击表单按钮，只需推送您的仪表板面板。

于 2012-07-13T10:25:51.843 回答