问如何在extJS中查看另一个组件？

EN

//Controller
Ext.define('TutorialApp.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.login',

    onLoginClick: function () {

        localStorage.setItem("TutorialLoggedIn", true);

        Ext.Msg.alert('Success', 'Good you have successfully login!');

    },

    onRegisterClick: function (button) {
        var mainCard = this.getView().up('#mainCard');

        this.getView().destroy(); //destroy login view

        //This  code create a component for register and set on card view
        mainCard.getLayout().setActiveItem(Ext.create({
            xtype: button.view
        }));
    },
    onBackButton: function (button) {
        var mainCard = this.getView().up('#mainCard');

        this.getView().destroy(); //destroy register view

        //This  code create a component for login and set on card view
        mainCard.getLayout().setActiveItem(Ext.create({
            xtype: button.view
        }));
    }
});

//Login form
Ext.define('TutorialApp.view.login.Login', {
    extend: 'Ext.form.Panel',
    xtype: 'login',
    height: 200,
    requires: [
        'TutorialApp.view.login.LoginController',
        'TutorialApp.view.registration.RegisterForm',
        'Ext.form.Panel'
    ],

    controller: 'login',
    bodyPadding: 10,
    title: 'Login Form',
    items: {
        xtype: 'form',
        bodyPadding: 10,
        reference: 'form',
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            xtype: 'displayfield',
            hideEmptyLabe: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            handler: 'onLoginClick'
        }, {
            text: 'Register',
            view: 'form-register',
            handler: 'onRegisterClick'
        }]
    }
});

//RegisterForm
Ext.define('TutorialApp.view.registration.RegisterForm', {
    extend: 'Ext.form.Panel',
    xtype: 'form-register',
    controller: 'login',
    frame: true,
    title: 'Register',
    bodyPadding: 10,
    width: '100%',
    height:370,
    fieldDefaults: {
        labelAlign: 'right',
        labelWidth: 115,
        msgTarget: 'side'
    },

    items: [{
        xtype: 'fieldset',
        title: 'User Info',
        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },

        items: [{
            allowBlank: false,
            fieldLabel: 'User ID',
            name: 'user',
            emptyText: 'user id'
        }, {
            allowBlank: false,
            fieldLabel: 'Password',
            name: 'pass',
            emptyText: 'password',
            inputType: 'password'
        }, {
            allowBlank: false,
            fieldLabel: 'Verify',
            name: 'pass',
            emptyText: 'password',
            inputType: 'password'
        }]
    }, {
        xtype: 'fieldset',
        title: 'Contact Information',

        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },

        items: [{
            fieldLabel: 'First Name',
            emptyText: 'First Name',
            name: 'first'
        }, {
            fieldLabel: 'Last Name',
            emptyText: 'Last Name',
            name: 'last'
        }, {
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype: 'email'
        }, {
            xtype: 'combobox',
            fieldLabel: 'State',
            name: 'state',
            store: Ext.create('Ext.data.Store', {
                fields: ['abbr', 'name'],
                data: [{
                    "abbr": "AL",
                    "name": "Alabama"
                }, {
                    "abbr": "AK",
                    "name": "Alaska"
                }, {
                    "abbr": "AZ",
                    "name": "Arizona"
                }]
            }),
            valueField: 'abbr',
            displayField: 'name',
            typeAhead: true,
            queryMode: 'local',
            emptyText: 'Select a state...'
        }, {
            xtype: 'datefield',
            fieldLabel: 'Date of Birth',
            name: 'dob',
            allowBlank: false,
            maxValue: new Date()
        }]
    }],

    buttons: [{
        text: 'back',
        view: 'login',
        handler: 'onBackButton'
    }, {
        text: 'Sumbit',
        disabled: true,
        formBind: true
    }]
});

Ext.create('Ext.container.Container', {
    layout: 'card',
    itemId: 'mainCard',
    widht: '100%',
    height: '100%',
    items: [{
        xtype: 'login'
    }],
    renderTo: Ext.getBody()
});