PDA

View Full Version : How to Close viewport



chakra1234
18 May 2013, 11:32 AM
I have a login(window) screen and menu which is viewport in my application. In my menu, I have LogOff button. On click of the button I wanted to remove the viewport and display the Login screen.
I am using the below code in the LogOff button click event

button.up('viewport').removeAll();
var l=Ext.create('TestApp.view.Login');
l.show();

The above code while executing calls the "afterlayout" event of the viewport and gives error.

Please help me to close the viewport.
Thanks

slemmon
20 May 2013, 12:07 PM
Is removing the items from the viewport what throws the error?

friend
21 May 2013, 9:14 AM
A much simpler approach is to use a separate page for Login. This page includes minimal ExtJs classes and performs a full-page submit; only if the user authenticates successfully do you forward them to the main index.html page which starts your actual application. Otherwise on authentication failure, they're redirected right back to the login page with a 'Bad login or password' error.

slemmon
21 May 2013, 2:51 PM
I've been partial to the single-page approach myself, so there may be a couple of ways to skin this one. Another approach is to have your viewport have a card layout with two cards - one is the login and one is the app. Then you're not removing / destroying components at any stage, but rather just showing / hiding the card view you need the user to interact with at that moment.

friend
22 May 2013, 6:19 AM
I prefer a single-page solution also, but I was using Java/Spring MVC/Spring Security on the backend of a recent app. You couldn't preload any data stores since the user wasn't yet authenticated and didn't have permissions yet to call the pertinent URLs. This breaks a lot of the ExtJs MVC lifecycle for initialization/preloading of stores, so I ended up with the 'two page' approach, which worked really well in my case.