View Full Version : How to Close viewport

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

var l=Ext.create('TestApp.view.Login');

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

Please help me to close the viewport.

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

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.

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.

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.