Results 1 to 3 of 3

Thread: Ext.app.Controller and switching views

  1. #1

    Default Answered: Ext.app.Controller and switching views

    Hello everyone.
    I've encountered a problem and after spending couple days on it, can't make any progress. Therefore I'd like to ask for a guidance from experts frequenting this forum.

    I have an app that has two views: Login and Main, used in the way you'd expect: first there's a login screen and once the user enters valid credentials, the login window should disappear and he's supposed to see the Main view.

    I defined two views: Login (full source: Login.js):
    Code:
    Ext.define('iTeleskop.view.login.Login', {     
        extend: 'Ext.window.Window',
        xtype: 'login',
        ...
    });
    and Main (full source: Main.js):
    Code:
    Ext.define('iTeleskop.view.main.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'app-main',
        ...
    });
    Each view works and looks good when invoked directly from Application.js this way:
    Code:
    Ext.define('iTeleskop.Application', {
        extend: 'Ext.app.Application',
    
        // uncomment one of those
        mainView: 'iTeleskop.view.main.Main',
        // mainView: 'iTeleskop.view.login.Login', 
        ...
    });
    The problem occurs when I implemented ViewController and try to swap between them. Here's the relevant part of the app.controller.Ctrl (full source: Ctrl.js):
    Code:
    Ext.define('iTeleskop.controller.Ctrl', {
        extend: 'Ext.app.Controller',
    
        requires: [
            'iTeleskop.view.login.Login',
            'iTeleskop.view.main.Main'
        ],
    
        onLaunch: function() {
    
            // alert("onLaunch w iTeleskop.controller.Ctrl");
    
            this.session = new Ext.data.Session({
                autoDestroy: false
            });
    
            this.login = new iTeleskop.view.login.Login({
                session: this.session,
                listeners: {
                    scope: this,
                    login: 'onLoginSuccess'
                },
            });
    
            // iTeleskop.view.login.Login doesn't have autoShow, so
            // we need to explicitly call show to display it.
            this.login.show();
        },
    
        onLoginSuccess: function (loginController, loginManager) {
            // alert('Ctrl.onLoginSuccess');
            this.login.hide();
            this.loginManager = loginManager;
            this.showUI();
        },
    
        showUI: function() {
            this.viewport = new iTeleskop.view.main.Main({
                session: this.session,
                autoShow: true,
                viewModel: {
                    type: 'main'
                }
            });
    
            this.viewport.show(); // <- problem here. This is supposed to display
                                  // the main view. But it doesn't :(
        }
    });
    This call call (this.viewport.show()) in showUI doesn't work, i.e. it doesn't make the main view to appear. And I have completely no idea why. By trial and error I found a crude workaround: if I change the iTeleskop.view.main.Main to derive Ext.window.Window, rather than from Ext.tab.Panel, the show() call starts working, but the result looks very ugly.

    I have 2 questions:

    1. how can I start showing the main view (derived from Ext.tab.Panel)?
    2. what's the best way to debug such cases on my own rather than keep bothering good people on forums? I'm tried to debug it using firebug, installed breakpoint in this.viewport.show() line and stepped into it, but there was a lot of calls to toString function that converted date to string. I have no idea what's going on in there (sorry, a c++ developer still taking my first steps in JavaScript world).

    Couple extra info: The whole source is available on github on login branch. I'm using ExtJS 6.0.0. Running this with firefox 43.0 on Ubuntu. I tried to base my code on classic/Ticket-app example from ExtJS 6.0.0, but it's too complex for me to understand (they did some tricks to pretend to run a web-server in the web browser. This kind of stuff still looks like complete magic to me.)

    Thanks a lot in advance for any pointers or suggestions you may have.
    Thomson

  2. Hi,
    by declaring iTeleskop.view.main.Main as the "mainView" config of your app, ExtJs automatically sets the Ext.plugin.Viewport plugin on your TabPanel.
    Whereas you are displaying it manually, so maybe if you add
    Code:
    plugins: [{ type: 'viewport' }]
    to your Main.js it'll be alright.

  3. #2
    Sencha Premium Member ltrouillet's Avatar
    Join Date
    Jun 2015
    Location
    Mulhouse, France
    Posts
    11
    Answers
    2

    Default

    Hi,
    by declaring iTeleskop.view.main.Main as the "mainView" config of your app, ExtJs automatically sets the Ext.plugin.Viewport plugin on your TabPanel.
    Whereas you are displaying it manually, so maybe if you add
    Code:
    plugins: [{ type: 'viewport' }]
    to your Main.js it'll be alright.


    Lopold TROUILLET - Software Engineer
    JNESIS
    40 rue Victor Schoelcher
    68200 Mulhouse - France

    Tl: +33 3 89 36 60 39
    Fax: +33 3 89 32 76 31

  4. #3

    Default

    Quote Originally Posted by ltrouillet View Post
    maybe if you add
    Code:
    plugins: [{ type: 'viewport' }]
    to your Main.js it'll be alright.
    Yes! That was it. I had to tweak the code slightly, though. The change as suggested didn't work, but I added the following and it worked:
    Code:
     plugins: 'viewport',
    Thanks a lot for your suggestion.

    For people who may encounter similar issue in the future, the commit that fixed this issue for me is here.

Similar Threads

  1. Switching views using a button
    By jonhobbs in forum Sencha Architect 2.x: Help & Discussions
    Replies: 6
    Last Post: 9 Apr 2012, 2:27 PM
  2. switching views MVC
    By twisted_zero in forum Sencha Touch 2.x: Q&A
    Replies: 6
    Last Post: 6 Apr 2012, 4:56 AM
  3. Switching between views using MVC
    By vijayesh.narayan in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 30 Mar 2012, 6:09 AM
  4. Switching between views
    By miraclemaker in forum Sencha Touch 2.x: Q&A
    Replies: 4
    Last Post: 6 Feb 2012, 7:02 AM
  5. switching views
    By nofx in forum Sencha Architect 2.x: Help & Discussions
    Replies: 7
    Last Post: 3 Feb 2012, 6:00 AM

Tags for this Thread

Posting Permissions

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