Sencha touch 2 changing views programatically

0
votes

I am very new to Sencha Touch and I 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.

Can anyone tell me what I'm doing wrong and how to achieve my change of views?

1
sencha-touch-2

1 Answers

0
votes

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());