How to redirect one page to another in sencha touch?

Question

I am new in sencha touch and this is my first app.My app is login & SignUp page.when I click on SignUp button it can't be loaded.I make two text box field and two button in one page .Where text box for username and password and button for login signup. My view code

  Ext.define('MyApp.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
config: {
    title: 'Login',
    items: [

        {
            xtype: 'label',
            html: 'Login failed. Please enter the correct credentials.',
            itemId: 'signInFailedLabel',
            hidden: true,
            hideAnimation: 'fadeOut',
            showAnimation: 'fadeIn',
            style: 'color:#990000;margin:5px 0px;'
        },
        {
            xtype: 'fieldset',
            title: 'Login Example',
            items: [
                {
                    xtype: 'textfield',
                    placeHolder: 'Username',
                    itemId: 'userNameTextField',
                    name: 'userNameTextField',
                    required: true
                },
                {
                    xtype: 'passwordfield',
                    placeHolder: 'Password',
                    itemId: 'passwordTextField',
                    name: 'passwordTextField',
                    required: true
                }
            ]
        },
        {
            xtype: 'button',
            itemId: 'logInButton',
            ui: 'action',
            padding: '10px',
            text: 'Log In'
        },
        {
            xtype: 'button',
            itemId: 'singupButton',
            ui: 'action',
            padding: '10px',
            text: 'Sign Up'
        }

     ],

    listeners: [{
        delegate: '#logInButton',
        event: 'tap',
        fn: 'onLogInButtonTap'
    },
    {
        delegate: '#signUpButton',
        event: 'tap',
        fn: 'onSignUpButtonTap'
    }

    ]


},

onSignUpButtonTap: function () {




},


onLogInButtonTap: function () {

    var me = this,
        usernameField = me.down('#userNameTextField'),
        passwordField = me.down('#passwordTextField'),
        label = me.down('#signInFailedLabel'),
        username = usernameField.getValue(),
        password = passwordField.getValue();

    label.hide();

    // Using a delayed task in order to give the hide animation above
    // time to finish before executing the next steps.
    var task = Ext.create('Ext.util.DelayedTask', function () {

        label.setHtml('');

        me.fireEvent('signInCommand', me, username, password);

        usernameField.setValue('');
        passwordField.setValue('');
    });

    task.delay(500);

},
showSignInFailedMessage: function (message) {
    var label = this.down('#signInFailedLabel');
    label.setHtml(message);
    label.show();
}
});

I know there are wrong code.Please help me...

Answer 1

write this code on click event to go from login to signup.

    objView.destroy();
    Ext.Viewport.animateActiveItem({
    xtype: viewName
    }, {type: "slide", direction: "left"});

where objView is the pointer to the login view(this) and viewName is the string having the xtype of your signup view.