PDA

View Full Version : What is the purpose of Viewport.js?



billtricarico
25 Feb 2012, 12:07 PM
Hello,

When I deploy my UI to my application server and look at the views folder, I see the UI component I created and its base folder. But there is also the Viewport.js. What is the purpose of that file? Everytime I build an application, I use the ApplicationViewport.js as the main container. Even the ApplicationViewport has a Viewport.js if that's all you add to the project.

Confusing.

Thanks.

aconran
25 Feb 2012, 2:17 PM
Ext JS has a feature called autoCreateViewport that will automatically look for the file Viewport.js, load it and then instantiate it.

Because we want this to be different views at a given time what we do is subclass whatever your target "initial view" class is.

billtricarico
28 Feb 2012, 8:14 PM
So is that to say that dropping ApplicationViewport on the canvas is not needed? I mean, if my main component is a TabPanel, can I just start with that as my initial view and let Viewport.js take care of the rest?

aconran
28 Feb 2012, 8:19 PM
The Viewport.js file just indicates that this is the initial class to render.

The Viewport class that you drag out onto the canvas indicates that you want a container that will stretch to fit 100% height and 100% width of the browsers viewport. Typically if you have a class like this it will be the initial class to render but they are not necessarily one in the same.

billtricarico
28 Feb 2012, 8:46 PM
Thanks for the quick reply. Now on to more interesting issues:

I welcome you to read this thread and post something juicy:


http://www.sencha.com/forum/showthread.php?183226-Designer-Built-Application-With-Multiple-Namespaces

aconran
28 Feb 2012, 8:54 PM
I'm already subscribed and seeing what the community has come up with. To be honest it wasn't a situation that we had envisioned coming up as frequently as it looks like it is...

We're considering it.

billtricarico
28 Feb 2012, 9:10 PM
Well so far the community consists of me and one other guy. I see lots of views but nobody is chiming in. That said, I think this problem can be solved. I have managed to hack my way through it and get it working, but it does require fully qualifying some objects, and those will get overridden by Designer. So keeping a backup of the modified file is required.

I tried what the other guy juegos has in mind but honestly I can't get it to work. I invite you to set up a simple two project scenario like I laid out in the thread. One simple TabPanel as the main app. One simple tab as the dependent project, with a TreePanel that auto loads a store.

Then in the main app's controller, add the tab from the 2nd project into the main project's TabPanel.

aconran
28 Feb 2012, 9:13 PM
Yup, it's a post 2.0 GA problem though.

stoertebeker
12 Apr 2012, 10:41 PM
Hi,
I was asking myself the same question and somehow cannot completely answer it from what I read in this thread. I try to summarize with my words:
The Viewport.js with the following content is generated when I check 'autoCreateViewport' in Ext.app.Application.
Viewport.js

Ext.define('MyApp.view.Viewport', { extend: 'MyApp.view.MyViewport',
renderTo: Ext.getBody(),
requires: [
'MyApp.view.MyViewport'
]
});
Now, what would I need this for? And what are the consequences when i do NOT check the 'autoCreateViewport' and do not have this Viewport.js? Any disadvantages?
Also I couldn't find any function within Designer to edit this Viewport.js. Why is that?
And if I could edit it somewhere, what would typically go inside?

aconran
12 Apr 2012, 11:07 PM
Now, what would I need this for?

So that the view that you marked as the initial view will be rendered to the screen.



And what are the consequences when i do NOT check the 'autoCreateViewport' and do not have this Viewport.js? Any disadvantages?

The consequences are that the designer will not automatically instantiate an instance of the view you have marked as the initial view. The disadvantages would be that you will have to write your own customization launch code.



Also I couldn't find any function within Designer to edit this Viewport.js. Why is that?
And if I could edit it somewhere, what would typically go inside?
You don't edit it. It's essentially an alias of your initialView class. You edit your initial view class.