Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Handling Main View Creation

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default Answered: Handling Main View Creation

    In the version of my application which runs in Ext JS 5, I had things set up so that code in the launch method of the code defined in my Application.js was used to create the main view of our application. I do this because I need to preload some information and I don't want the main view to be created before the data finishes loading. Also, if there is a problem loading this data I want to make some tweaks to the main view. However, in Ext JS 6, it seems that the main view creation process is a little different. The main thing seems to be that the main view is automatically created *before* the launch method is called. So, my question is this, in Ext JS 6, what is the proper way to construct the code in App.js/Application.js such that I can control the creation of my main view? I'm currently only interested in the 'classic' toolkit, although it would be nice to be able to handle this with both toolkits

    Any help would be appreciated.

    Thanks!

    Jim

  2. I had a similar issue when i wanted to start the modern or classic based main app from launch rather from being autocreated.


    Disable autocreation in app.js.
    PHP Code:
        // We use our own launch function - so disabled here
        //,mainView: 'App.view.main.Main' 
    Now we want to attach our mainview in the launch method to the viewport.

    But - it seems that the modern toolkit autocreates a viewport behind the scenes, where the the classic toolkit does not. So inside the launch function , Ext.Viewport will be available only in modern, not in classic.
    Note: However when using the auto creation through app.js "mainView" property, Ext also autocreates a viewport behind the scenes if needed. So thats why a classic based mainview works without a viewport defined using that config, but not in launch().

    The easiest way to fix this is to add the viewport plugin to our classic main view definition:
    PHP Code:
    Ext.define('App.view.main.Main', {
        
    extend'Ext.tab.Panel',
        
    xtype'app-main',
        
    id'MainView',
        
    // plugin viewport is important if:
        // - this view is in classic AND it is the main app view (not needed in modern bc modern autocreates a viewport)
        // - we use the launch method, so we must make sure to have a viewport
        
    plugins: [
            
    'viewport'
        
    ]

        ,
    requires: [
            
    'Ext.plugin.Viewport',
            
    'Ext.window.MessageBox',
    ... 

    The last part is to add the view in launch(). Based on the profile, the view will be loaded from classic/src/view/main/Main.js or modern/src/view/main/Main.js.

    PHP Code:
        var mainView Ext.create('App.view.main.Main');
        if (
    Ext.Viewport.add) {
            
    Ext.Viewport.add(mainView);
        } 
    Best regards

    Wolfgang

  3. #2
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,339
    Answers
    20

    Default

    Quote Originally Posted by jhoweaa View Post
    The main thing seems to be that the main view is automatically created *before* the launch method is called.
    You can call the Application.setMainView setter inside the launch method to dynamically configure the main view.

  4. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default

    What I've done, at least for the time being, is to remove the 'mainView' config on the app.js, add the 'viewport' plugin to my Main.js and then do an Ext.Create of my main view. I'll play around with the 'setMainView' to see if that gets me what I want.

    Thanks!

  5. #4
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    117
    Answers
    3

    Default

    Have you come across a way to do this in a universal app?

    I've removed the mainView config from app.js, and am calling setMainView from the launch function in Application.js after determining which view to display. This works well for the classic toolkit, but for the modern toolkit nothing is displayed. If I simply put the mainView config back into app.js, then the view is shown on the modern toolkit version, however this doesn't give me a chance to calculate which view to show first.

  6. #5
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default

    So far I've only managed to get this to work with the classic toolkit. I'm in the process of trying to rearrange some things so that I can hopefully take advantage of both the modern and classic toolkit. The last time I tried I wasn't able to get anything to display for either situation. I'm hoping to at least get the classic view to work. It would be nice to have a good example from Sencha on how to best accomplish this sort of task with a universal application, however.

    Jim

  7. #6
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    117
    Answers
    3

    Default

    Yes, an example from Sencha would be much appreciated.
    I've spent some time now trying to find a way to programatically set the mainView in a way that allows common controller code for both modern and classic toolkits with no success.

    setMainView works find for classic, but I can't seem to get modern to work at all (other than the mainView config in app.js).

    Perhaps Sencha could modify the login demo to work with both modern and classic (rather than just classic like present): http://docs.sencha.com/extjs/6.0/tut...login_app.html

  8. #7
    Sencha User
    Join Date
    May 2015
    Posts
    31
    Answers
    1

    Default

    I had a similar issue when i wanted to start the modern or classic based main app from launch rather from being autocreated.


    Disable autocreation in app.js.
    PHP Code:
        // We use our own launch function - so disabled here
        //,mainView: 'App.view.main.Main' 
    Now we want to attach our mainview in the launch method to the viewport.

    But - it seems that the modern toolkit autocreates a viewport behind the scenes, where the the classic toolkit does not. So inside the launch function , Ext.Viewport will be available only in modern, not in classic.
    Note: However when using the auto creation through app.js "mainView" property, Ext also autocreates a viewport behind the scenes if needed. So thats why a classic based mainview works without a viewport defined using that config, but not in launch().

    The easiest way to fix this is to add the viewport plugin to our classic main view definition:
    PHP Code:
    Ext.define('App.view.main.Main', {
        
    extend'Ext.tab.Panel',
        
    xtype'app-main',
        
    id'MainView',
        
    // plugin viewport is important if:
        // - this view is in classic AND it is the main app view (not needed in modern bc modern autocreates a viewport)
        // - we use the launch method, so we must make sure to have a viewport
        
    plugins: [
            
    'viewport'
        
    ]

        ,
    requires: [
            
    'Ext.plugin.Viewport',
            
    'Ext.window.MessageBox',
    ... 

    The last part is to add the view in launch(). Based on the profile, the view will be loaded from classic/src/view/main/Main.js or modern/src/view/main/Main.js.

    PHP Code:
        var mainView Ext.create('App.view.main.Main');
        if (
    Ext.Viewport.add) {
            
    Ext.Viewport.add(mainView);
        } 
    Best regards

    Wolfgang

  9. #8
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default

    Thanks! This was just the bit of information that I needed to get things working. While my solution is slightly different, the key was what you did when you created the main view and then adding it to the Viewport. My application.launch() method does two different things depending on whether I'm running with the classic api or the modern api. The classic was working, so all I needed was how to get it to work with modern and your information allowed me to do that.Thanks again.Jim

  10. #9
    Sencha User
    Join Date
    Dec 2015
    Location
    Noida, UP
    Posts
    1

    Default

    I had same issue. I suppose to think that, some method missing to initialize the main view in modern ext lib file for setMainView() method, however there is code in lib file of classic profile.

    Can't initialize the main view of viewport using setMainView() method in launch function of Ext.app.Application in modern profile, however works fine for classic profile.

    Uncomment the mainView and comment the launch() method attribute works fine for modern profile in below code.

    Ext.application({
    name: 'MyApp',

    extend: 'MyApp.Application',

    requires: [
    'MyApp.view.login.Login'
    ],

    // mainView: 'MyApp.view.login.Login'

    launch: function() {
    this.setMainView('MyApp.view.login.Login');
    }
    });

  11. #10
    Sencha Premium User
    Join Date
    Jun 2017
    Posts
    17

    Default

    Did anyone find a solution for the modern application? I have the classic portion of the project working, but not the modern version. I have tried setting the mainView on the launch function, but it is not working. I have tried adding it to the viewport and it doesn't work either. Hopefully someone has got it to work.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: 20 Dec 2014, 12:16 PM
  2. Replies: 2
    Last Post: 21 Jan 2014, 8:17 PM
  3. [FIXED] Unable to fire events from map view until map view is added to the main view.
    By bweiler in forum Sencha Touch 2.x: Bugs
    Replies: 7
    Last Post: 11 Feb 2012, 1:50 PM
  4. Replies: 2
    Last Post: 10 Feb 2012, 9:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •