Question

我正在研究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);
    }
});

Answer 1

假设您的layout: 'card'和id: 'your-container-id'容器有2个项目：

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

然后点击登录表单的提交按钮，做完所需之后，只需使用Ext.getCmp('your-container-id').setActiveItem(1)

据我所知，这是最简单的方法。希望这会有所帮助。

使用卡片布局从sencha2.0中的另一个表单调用一个表单

1 个答案: