On Logout revert back to Viewport

[deepakgarg89]

Hi,

In my app i had a logout button. I want when a user tap on it, user must be redirect to viewport.

In my app.js i had used
launch: function() {
Ext.create('Advait.view.Viewport');
},

For logout i had use below code in view
{
xtype: 'button',
docked: 'bottom',
ui: 'decline',
style: 'border-radius:0',
text: 'Logout',
action: 'logoutuser'
}

and a logout function in my controller
logout: function() {
console.log('User will Logout');
//What should i add here which will reload my vieport again
}

I am getting console.log message successfully. Please tell me which method will take me to viewport again.

Thanks

[Schildi]

Hi deepakgarg89,

I think the solution is like I said in your other thread...
http://www.sencha.com/forum/showthre...sencha-touch-2

You have to consider the Ext.Viewport as that component, which is responsible for showing the currently active view of all the views you have in your app, e.g. sth. like LoginForm, MainMenu, Imprint, DetailView etc. And this currently active view you can change with Ext.Viewport.setActiveItem(viewToShow);

So lets suppose your user is not logged in at launch of your app, so you show the LoginForm-view:

var loginForm = Ext.create('MyApp.view.LoginForm');
Ext.Viewport.setActiveItem(loginForm);

When login is successful, you show the MainMenu-view:

var mainMenu = Ext.create('MyApp.view.MainMenu');
Ext.Viewport.setActiveItem(mainMenu);

And when the user logs out, to answer the question you asked above, you could send him back to the LoginForm again:

logout: function() {
    console.log('User will Logout');

    //What should i add here which will reload my vieport again
    var loginForm= Ext.create('MyApp.view.LoginForm');
    Ext.Viewport.setActiveItem(loginForm);  
}

So you don't have to "reload" your viewport, you just have to set the active item on it...

Hope this helps

Best regards,
Schildi

[deepakgarg89]

As you suggested i had already used setActive viewport.

My code is
var loginstep = Ext.create('MyApp.view.Login');
Ext.Viewport.setActiveItem(loginstep);

But using this in cosole i am getting this error

[DEPRECATE][MyApp.view.Login#show] Call show() on a component that doesn't currently belong to any container. Please add it to the the Viewport first, i.e: Ext.Viewport.add(component);

Please tell me what should i do here.

[Schildi]

Ah, okay, I think you have to add your view you want to show to the viewport first, before you can navigate to it.
Try

var loginstep = Ext.create('MyApp.view.Login');
Ext.Viewport.add(loginstep);
Ext.Viewport.setActiveItem(loginstep);

Best regards,
Schildi

[deepakgarg89]

I had already tried this code but again i am getting same error.

My app hirearchy is Home->Login->List with logout button.

Using below code i am successfully redirecting to Home view.
var loginstep = Ext.create('MyApp.view.Home');
Ext.Viewport.setActiveItem(loginstep);

But when i again want to go to Login step than i am getting above discussed error

[Schildi]

In general you can say that every component has to be added to the Ext.Viewport before you show it.
So maybe there's a different component than the Login-view, that you show but that is not added at this point of time?

Or are you destroying any of your components anywhere? Something like Ext.getCmp('...').destroy()?
Because then you also would remove the component from the viewport and have to add it again before it is shown.

Best regards,
Schildi

[deepakgarg89]

I was thinking the same but i had not destroyed any component. That's why it become confusing that the application is not loading.

[vikramiyer]

Any solutions that you have found so far??

[deepakgarg89]

Still finding the answer

[Schildi]

Could you show more parts of your code, that causes this warning? That would be helpful I think

Best regards,
Schildi