0

我正在开发 sencha2.0。我有一个登录表单,我想在单击登录表单中的提交按钮时调用另一个表单。我希望使用卡片布局,其中一个表单将是卡片的一个项目,另一个表单作为另一个项目卡片。我对逻辑很清楚,但需要一些类似的例子作为参考。你能给我一些很好的例子供参考吗?请帮助我在下面的代码中找到问题:

Ext.define('senchaApp.view.activation', {
    extend : 'Ext.Container',
    xtype : 'activation',
    requires: "Ext.form.FieldSet",
    id : 'activation',


    constructor : function(config) {
        var formContainer = Ext.create('Ext.Panel',{

            id:'formPanel',
            layout:'card',
            fullscreen:'true',
            items:[{
                xtype:'fieldset',
                title:'Login',
                items:[
                       {xtype:'textfield',
                        name:'name',
                        id:'name',
                        label:'Name',
                        clearIcon:false,
                        cls:'fields'
                        },
                        {xtype:'emailfield',
                            style:'margin-top:10px;',
                            name:'email',
                            id:'email',
                            label:'Email',
                            clearIcon:false,
                            cls:'fields'
                        },
                            {xtype:'emailfield',
                            style:'margin-top:10px;',
                            name:'reTypeEmail',
                            id:'reTypeEmail',
                            label:'Retype Email',
                            clearIcon:false,
                            cls:'fields'
                        },
                            {xtype:'passwordfield',
                            style:'margin-top:10px;',
                            name:'pass',
                            id:'pass',
                            label:'Password',
                            clearIcon:false,
                            cls:'fields'
                        },
                            {xtype:'passwordfield',
                            style:'margin-top:10px;',
                            name:'reTypePass',
                            id:'reTypePass',
                            label:'Retype Password',
                            clearIcon:false,
                            cls:'fields'
                        },
                        {xtype:'numberfield',
                            style:'margin-top:10px;',
                            name:'mobilePhone',
                            id:'mobilePhone',
                            label:'Mobile Phone',
                            clearIcon:false,
                            cls:'fields'
                        },
                        {
                            xtype:'textfield',
                            name:'secretQuestion',
                            id:'secretQuestion',
                            style:'margin-top:10px;',
                            label:'Secret Question',
                            clearIcon:false,
                            cls:'fields'
                        },
                        {
                            xtype:'textfield',
                            name:'secretAnswer',
                            id:'secretAnswer',
                            label:'Secret Answer',
                            style:'margin-top:10px;',
                            clearIcon:false,
                            cls:'fields',
                        },
                        {
                            xtype:'numberfield',
                            style:'margin-top:10px;',
                            name:'authCode',
                            id:'authCode',
                            label:'Auth Code',
                            clearIcon:false,
                            cls:'fields'
                        },
                        {
                            xtype:'button',
                            style:'margin-top:10px;float:right;width:10%;',
                            cls:'next',
                            id:'next',
                            text:'Next',
                            ui:'action-round',
                            action:'next',
                        }
                    ]
                },
                {   xtype:'fieldset',
                    title:'Activation',
                    items:[
                            {
                            xtype:'textfield',
                            name:'user',
                            id:'user',
                            label:'Username',
                            clearIcon:false,
                            cls:'fields'
                            },
                            {xtype:'passwordfield',
                            style:'margin-top:10px;',
                            name:'pass',
                            id:'pass',
                            label:'Password',
                            clearIcon:false,
                            cls:'fields'
                            },
                            {xtype:'button',
                            cls:'submitBtn',
                            id:'submit',
                            ui:'action-small',
                            action:'submitLogin',
                            style:'background-image: url("app/resources/images/img_btnStrip.png");width:186px;margin: 0 auto;height:66px;margin-top:20px;background-color:none;'
                            }
                          ]
                }
            ]
        });

        var formContentHolder = Ext.create('Ext.Panel',{

            cls:'middleContainer',
            items:[formContainer]
        });





        config.items = [formContentHolder];

        this.callParent(arguments);
    },

    initialize : function() {
        this.callParent(arguments);
    }

});

下面提到的是控制器下 Main.js 的代码:

Ext.define('senchaApp.controller.Main',{
    extend:'Ext.app.Controller',



    init: function(){
        Ext.create('senchaApp.view.Viewport');

            this.control({
                '#submit':{
                    tap: this.showIndicesOverlay
            }
        });
    },
    showIndicesOverlay: function(){
        Ext.getCmp('activation').setActiveItem(1);
    }
});
4

1 回答 1

0

假设您的 Container 有layout: 'card'并且id: 'your-container-id'有 2 个项目:

items: [
  {xtype: 'login-form'},
  {xtype: 'another-form'},
]

然后当你的登录表单的提交按钮被点击时,在做任何你想做的事情之后,只需使用Ext.getCmp('your-container-id').setActiveItem(1)

据我所知,最简单的方法。希望这可以帮助。

于 2012-04-30T09:45:24.830 回答