1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default What is the purpose of Viewport.js?

    What is the purpose of Viewport.js?


    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.

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    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/showthre...ple-Namespaces

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Yup, it's a post 2.0 GA problem though.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  9. #9
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    79
    Vote Rating
    0
    stoertebeker is on a distinguished road

      0  

    Default Viewport not equal Viewport?

    Viewport not equal Viewport?


    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
    Code:
    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?

  10. #10
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by stoertebeker View Post
    Now, what would I need this for?
    So that the view that you marked as the initial view will be rendered to the screen.

    Quote Originally Posted by stoertebeker View Post
    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.

    Quote Originally Posted by stoertebeker View Post
    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 2