View Full Version : How to correctly set up login if i have two viewports

7 Apr 2014, 12:12 AM
I am trying to create login process with two viewports. First one is application viewport and second is viewport with splash image and login form.

I am using controller named Session that stores user data after login but it needs to be loaded synchrously so whole app waits for load of user data, otherwise the app won't work

This part of code from Session.init (controller is global var Session) is loading user data from server. If server return status 500 it will create the login viewport and view it instead main viewport.

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

Session.user = Ext.decode(xmlhttp.responseText);

for (var i in Session.user.privileges)
Session.privileges[Session.user.privileges[i]] = true;


if (xmlhttp.readyState == 4 && xmlhttp.status != 200) {


xmlhttp.open('GET', 'Users/whoAmI', false);

Main problem:
If I am logged out, I can see login viewport instead of app viewport, buy it keeps loading stores with status code 500 (Invalid user ID) and app will crash on Session.user is null

So... what is the correct way to do login with use of two viewports.
By my guess maybe I need to tell the main viewport to stop load child components if I get status 500 from Session.init

Thank you

7 Apr 2014, 6:14 AM
I am not sure if you actually need 2 viewports. you can use one viewport with card layout.


"To display one "active" item at full size from a choice of several child items, use card layout (http://docs.sencha.com/extjs/4.0.7/#%21/api/Ext.layout.container.Card)."

then you can use the setActiveItem (http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.layout.container.Card-method-setActiveItem) method of the card layout to change the panel which should be displayed. This way, you can have one panel for login screen and the other for your app and you can do viewport.setActiveItem(1); when the login is successful (hence showing your main app). you can use border or any other layout for your app.

7 Apr 2014, 6:24 AM

I figured out problem before you wrote answer by disabling autoload of any viewport in application.
Then I am creating them in result of Users/whoAmI:
- status 200 - Ext.create('tenderApp.view.tenderViewport');
- status !=200 - Ext.create('tenderApp.view.LoginViewport');

But your sollution seems more elegant :D
...I will try it and post feedback

Thanks for help