sencha-touch-2

Sencha Touch 2 changing views programmatically


I am very new to Sencha Touch and I'm trying to develop an app which includes a user registration view and a user login view.

The main view has a login button and a registration button.

What I am trying to accomplish is to change views in response to the buttons being tapped.

The following is the code I am using:

 Ext.define('MyApp.controller.RegisterForm', {
    extend: 'Ext.app.Controller',

    requires: ['Ext.data.JsonP'],

    config: {
        refs: {
            mainPage: 'mainpage',
            loginForm: 'loginform',
            registerForm: 'registerform'
        },
        control: {
            'button[action=UserNewAccount]': {
                tap: 'onNewAccount'
            },
        }
    },//config

    /**
     * respond when new account is requested
     */
     onNewAccount: function(event){

        /**
         * I have tried this ...
         */
        this.getLoginForm().add(this.getRegisterForm());
        this.getLoginForm().setActiveItem(this.getRegisterForm());
        
        /**
         * ... and this
         */
         this.getLoginForm().setActiveItem({
            xtype: 'registerform'
        });

        console.log('New account requested: ');
     }

});

The onNewAccount function responds just fine. The console.log call executes. The problem is the code above that. I've tried those two different approaches with no success.

What am I doing wrong, and how can I achieve my change of views?


Solution

  • It seems the registerform is not a child component of your loginform. You must call the setActiveItem from the parent container.

    this.getMainPage().setActiveItem(this.getRegisterForm());