1. #1
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    174
    Answers
    3
    Vote Rating
    2
    Bleak is on a distinguished road

      0  

    Default Answered: Passing control to a new Controller

    Answered: Passing control to a new Controller


    Hi All,

    I have a simple User Login Controller, defined as;

    PHP Code:
    Ext.define('MyApp.controller.Login'
    {    

    extend 'Ext.app.Controller',

    views : [
         
    'Login'                                             //Will prepend 'MyApp.view' to these strings
    ],
     
    refs : [
            {            
              
    ref      'viewport',                                      
             
    selector 'dashboard-viewport'        
           
    },
            {
                
    ref      'loginForm',
              
    selector 'login-form'
            
    }
        ],
        
    init: function() {
            
    this.control({
                
    'login-form button[ui=confirm]'    : {
                     
    //When a user taps the login button                
                     
    tap 'handleLogin'
                 

           });
        },

        
    /**     
         * This method handles the submission of the form, to authenticate the user.
         */
        
    handleLogin : function() { 
           
    this.getLoginForm().submit({
                
    url         'someurl.do',
                
    success     this.loginSuccess,
                
    failure     this.loginFailure,
                
    autoAbort   true,
                
    params      : {
                    
    entity  'user'
                   
    xaction 'authenticate' 
               
    }, 
               
    waitMsg     'Authenticating, please wait...',
                
    scope       this
            
    });
        },

        
    /**
         * Initiate the Dashboard Controller, kill the login controller.
         * @param form
         * @param result
         */
        
    loginSuccess: function(formresult) {
            
    this.getViewport().addExt.create('MyApp.controller.Dashboard',{} ) );
        },

        
    loginFailure: function(formresult) {
           
    console.log('Failure'); 
       }

    }); 
    This works great, the User Form displays, the handle Login function works and handles the response. Where I run into some trouble, is passing control now to the new Controller which is the Dashboard. I basically want to leverage the existing viewport, but remove the current view and add the new Controller and its associated view.

    I want to do this, in the loginSuccess handler. I'm trying to use this.getViewpor().add(Ext.create('MyApp.controller.Dashboard',{}); but it keeps throwing various errors. The code for the new controller is as follows;

    PHP Code:
    Ext.define('MyApp.controller.Dashboard', {    
    extend 'Ext.app.Controller',
         
    views : [
            
    'Dashboard'
       
    ],
        
    refs : [
            {
                
    ref      'viewport',
                
    selector 'dashboard-viewport'
            
    }
        ],

        
    init: function() {
            
    console.log('I am here... what now?');    
        }
    }); 
    And the view right now,

    PHP Code:
    Ext.define('MyApp.view.Dashboard', {
        
    extend  'Ext.form.Panel',
        
    xtype   'dashboard-panel',

        
    config: {
            
    title   'Welcome!!',
            
    layout  : {
                
    pack    'center',
                
    align   'middle'
            
    }, 

           
    items   : [ 
               {
                    
    xtype   'fieldset',
                    
    title   'Dashboard',
                    
    instructions    'Your personal dashboard',
                    
    items: [ 
                       {
                            
    xtype           'emailfield',
                            
    name            'test'
                        

                   ]
                }
            ] 
       },

        
    constructor: function(config) {
            
    Ext.apply(config, {});
            
    this.callParent([config]);
        }
    }); 
    Basically, when the loginSuccess handler is execute, I get Uncaught TypeError: Cannot call method 'getView' of undefined.

    If I remove the view:[] config from the dasboard controller I get Uncaught TypeError: Object [object Object] has no method 'getItemId'.

    Is this the right approach to initiating a new controller and introducing new views into the application? I've pieced this together from a few examples around the sencha site. But looking to understand the best way to initiate a new controller, view, model, etc.

    Thanks.

  2. When you have Dashboard in the controllers array, that controller is already created and init'd so you are creating a new Dashboard controller instance which now means you will have two of the same controller instantiated. getViewport() will also return the view instance and you are adding a controller to a view which is not valid. What you need to do is not ever create a 2nd Dashboard controller, let app.js create the Dashboard controller. If you need cross-controller communication you can do this.getController('Dashboard').someMethod(); or fire an event on the application instance and have the controllers listen for that event on the application.

  3. #2
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    174
    Answers
    3
    Vote Rating
    2
    Bleak is on a distinguished road

      0  

    Default


    I figure I'll update this thread as I resolve some of my challenges. I would greatly appreciate any feedback or suggestions especially if anything that is being done is not best practice.

    I resolved the Controller issue. Basically, I update the app.js to include the Dashboard controller as well.

    PHP Code:
    Ext.Loader.setConfig({enabled:true});

    Ext.application({
       
    name                         'MyApp'
       
    autoCreateViewport  true,
        
    controllers                 :  ['Login','Dashboard']
    }); 
    In the loginSuccess method of the MyApp.controller.Login, I updated the method to the following;

    PHP Code:
    /**
         * Initiate the Dashboard Controller, kill the login controller.
         * @param form
         * @param result
         */
        
    loginSuccess: function(formresult) {
            
    this.getViewport().remove(this.getViewport().getActiveItem(), true); //Remove the login form
            
    this.getViewport().add(Ext.create('PowerDashboard.view.Dashboard',{})); //Add the dashboard view
         

    I do not know how, but once the Dashboard is rendered to the viewport, the associated controller is also initiated and working.

    My next step, is to implement a Model and a Store and then update the Dashboard View to have a list of data from said model.

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,144
    Answers
    3505
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    When you have Dashboard in the controllers array, that controller is already created and init'd so you are creating a new Dashboard controller instance which now means you will have two of the same controller instantiated. getViewport() will also return the view instance and you are adding a controller to a view which is not valid. What you need to do is not ever create a 2nd Dashboard controller, let app.js create the Dashboard controller. If you need cross-controller communication you can do this.getController('Dashboard').someMethod(); or fire an event on the application instance and have the controllers listen for that event on the application.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #4
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    174
    Answers
    3
    Vote Rating
    2
    Bleak is on a distinguished road

      0  

    Default


    Thanks, think I'll take this back to the drawing board.

Thread Participants: 1

Tags for this Thread