In Ext JS, Viewport is a special container that stretches to fit 100% width and height of the browsers viewport. You can use our layout managers to layout your components (panels, grids, etc) how you'd like.

For example if you put out a viewport, set the layout to border and then add a few panels to it, you will see how it creates a typical "Outlook style" view.

Thanks for replying. I think my question wasnt well formulated..What I was asking is that, if I have a panel with two buttons that would come first, then we click on those buttons to have other views, for example another gridpanel, then all of these views we dump them on one single viewport,(whatever be its layout) and then we link them?

To have users going to specific pages, we make use of routes and so on..(am I right?) my problem is where do I place my views when using Sencha Architect? all of them are on the single viewport on the canvas, I need to hide some views at some point while other views still visible? I dump all my views on the viewport?

It helps to think of Sencha apps (ext-js and touch) as single page applications (SPA). Everything happens in one view (minus flicker postbacks and refreshes). Think of your viewport as the canvas. Add, remove, hide, show, animate other views (containers, buttons, grids etc.) accoss, in and out of that single "viewport" canvas view.

Create a "LoginView" container with login/pw textfields and a login button. When the user enters their info and hits the login button, you authenticate credentials and if authorized, remove the "LoginPage" container from the viewport then add for example... your MainView container... to the viewport.. animating views in and out of the viewport is the typical.