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
    36,790
    Answers
    3465
    Vote Rating
    833
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi