Question

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

Login.js

Ext.define('TutorialApp.view.login.Login', {
extend:'Ext.window.Window',
xtype: 'login',

requires: [
    'TutorialApp.view.login.LoginController',
    'TutorialApp.view.registration.RegisterForm',
    'Ext.form.Panel'
],

controller: 'login',
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,

items: {
    xtype: 'form',
    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,
        listeners: {
            click: 'onLoginClick'
        }
    },{
        text: 'Register',
        formBind: false,
        listeners: {
            click: 'onRegisterClick'
        }
    }
]
}

});

LoginController.js

 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
}

});

RegisterForm.js

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
}]
});

知道这应该如何运作？我尝试在registerform.js中添加＆＃39;插件：＆＃39; viewport＆＃39; ，并显示注册表单，但我不认为正确加载注册表单的组件。任何意见是极大的赞赏。谢谢。

Answer 1

非常感谢任何建议，所以我认为您可以使用card layout。

CARD布局管理多个子组件，每个组件都适合Container，在任何给定时间只能看到一个子组件。此布局样式最常用于向导，选项卡实现等。

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

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

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

1 个答案: