How to move from one view to another view using viewport in sencha?

10,195

Solution 1

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

});

Solution 2

Ext.Viewport.setActiveItem(1);

PS: Please notice the viewport case.

Solution 3

Hey @Arindam just put into your MyController file like this,

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

And you have some bugs into dashboardpanel.js file.

I hope this helps :)

enter image description here

10,195

Author by

Arindam Mukherjee

A Mobile app developer :By passion and by work.

Updated on July 17, 2022

Comments

Arindam Mukherjee almost 2 years

In my application I have a one view with topbar and some fields. In this button when I am click the login button I want to move to another view (Dashboard) which is a tabview. So for this I am using viewport. But I am unable to move from one view to another. Here is my code:

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

});

Arindam Mukherjee almost 12 years

Can you just modify the code and give me..because i tried with navigation view, but not able to do.
Arindam Mukherjee almost 12 years

I edited my question. now i am not getting any error. I added one viewport.js class. And trying to show the screens on that. But it is giving me white screen. Where i am wrong??
Arindam Mukherjee almost 12 years

I changed the app.js..now it is coming. But in app.js, i have to write the names of the all views right?? And now how can i move to dashboard screen..using your code, is it possible.
hekomobile almost 12 years

Now I showed you where you have to make the change to the Controller. Please. Look at MyController. Only that your dashboardpanel.js file it's wrong. Please. Or, what do you want?. I don't understand you. Please.
Arindam Mukherjee almost 12 years

it is throwing the below exception while pressing the login button: TypeError: 'undefined' is not an object (evaluating 'Ext.getCmp('dashboardpanel').show') at file:///android_asset/www/app/controller/MyController.js:34
hekomobile almost 12 years

ooohh I see, try launch with http://your_ip:your_port/your_project_name/your_app_name. Please.
hekomobile almost 12 years

Please try this Ext.getCmp(idPanelMain).setActiveItem(Ext.getCmp(idPanelShow‌), {type: 'slide', direction: 'right'}). Please.
Arindam Mukherjee almost 12 years

I changed my code. But i am getting reference error. i ma fade up
Arindam Mukherjee almost 12 years

still getting the error: ReferenceError: Can't find variable: Dashboard at file:///android_asset/www/app/controller/MyController.js:40