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

我试图在登录应用程序中添加注册表，但似乎无法查看注册表。请参阅下面我的代码中的更多详细信息：

Login.js

LoginController.js

RegisterForm.js

你知道该怎么做吗？我尝试在registerform.js中包含“plugins:”视口，它显示了注册表，但我认为为注册表加载组件是不正确的。非常感谢您的建议。多谢各位

非常感谢您的建议，因此我认为您可以使用

CARD layout管理多个子组件，每个子组件都安装在容器中，在任何给定时间都只能看到单个子组件。此布局样式最常用于向导、选项卡实现等

我已经创建了一个演示。这将显示卡布局是如何工作的。我希望这能帮助你达到你的要求

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

---

你能在sencha fiddle中包含这个代码吗

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

 onLoginClick: function() {

    localStorage.setItem("TutorialLoggedIn", true);

    this.getView().destroy();

    Ext.create({
        xtype: 'app-main'
    });
},

onRegisterClick: function() {
    this.getView().destroy(); //destroy login view

    Ext.create({
        xtype: 'form-register'
    });
        //above code does not create a component for register
}

});

Ext.define('TutorialApp.view.registration.RegisterForm', {
extend: 'Ext.form.Panel',
xtype: 'form-register',

frame: true,
title: 'Register',
bodyPadding: 10,
scrollable:true,
width: 355,

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: {
            type: 'states'
        },
        valueField: 'abbr',
        displayField: 'state',
        typeAhead: true,
        queryMode: 'local',
        emptyText: 'Select a state...'
    }, {
        xtype: 'datefield',
        fieldLabel: 'Date of Birth',
        name: 'dob',
        allowBlank: false,
        maxValue: new Date()
    }]
}],

buttons: [{
    text: 'Register',
    disabled: true,
    formBind: true
}]
});

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