multiple views in a viewport

[Shabneez]

hello
if we have an application that requires several panels, grids and so on, do we put everything on the viewport in sencha architect?
thanks

[aconran]

Because you reference grids, I assume you are talking about Ext JS.

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.

[Shabneez]

Hello,

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?

Thanks

[Shabneez]

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?

Thanks

[Shabneez]

by the way, routes are available for sencha touch only?

[BostonMerlin]

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.

Hope that helps
John

[Shabneez]

Thanks a lot! Now I understand. It is fine if i create all the views then in the end i link them to the viewport? im saying "link" because i see in sencha architect it asks if we want to link, copy or move...althought i don't know(yet) the difference between these....

[aconran]

sencha architect it asks if we want to link, copy or move...althought i don't know(yet) the difference between these....

Link - Uses the current top level instance as a class and instantiates an instance of it
Copy - Creates a copy of this top level instance
Move - Moves the top level instance to where you dragged it to

[BostonMerlin]

Typically, you'll create a view then add it to the (viewport or another view) at the time it's needed. you might, for performance reasons, create a view before it needs to be shown but you'll need to be cognizant of the limited memory constraints of the device the app is running on.

to keep things simple, create your view based on the action of some other event (i.e. login button -> authenticate -> hide/destroy login view -> show main view).

Link / move / copy are architect-only commands. "Link" is another way of saying visual inheritance. I want to create a new view (A) based on another view (B). A will get everything B has and let me change things around on the A view w/out changing the B view. Read up on OOP inheritance to get the bigger picture

Much of what you're asking is detailed in the many online documents and tutorials provided by Sencha.

Architect Docs - Reusing components.
http://docs.sencha.com/architect/2/#...ing_components

Hope that helps
John

[Shabneez]

Hello,

thanks a lot a lot a lot for the promp reply. (Actually, I understand things when people explain them to me..I may read 1 whole paragraph 10 times and not grasp anything, and the same thing someone explains [like normal people do], I find this a lot better) thank you thank you thank you