我正在开发 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);
}
});