Ext.onReady(function(){ ////////////////////////////////////////翻页方法start////////////////////////////////////////////////// var changeTab = function changeTab(){ var id = card.getLayout().activeItem.id; var prev = Ext.getCmp('move-prev'); var next = Ext.getCmp('move-next'); var exit = Ext.getCmp('exit'); //alert(id); if(id=='card-0'){ prev.setDisabled(false); next.setDisabled(false); card.getLayout().setActiveItem(1); } else if(id=='card-1'){ var name = panel2.findById('name').getValue(); if(name==null||name==''){ Ext.Msg.alert('系统提示','请填写用户名'); }else{ prev.setDisabled(true); next.setText('确定'); exit.setDisabled(true); card.getLayout().setActiveItem(2); } } else if(id=='card-2'){ Ext.Msg.alert('注册成功','你的用户名:'+panel2.findById('name').getValue()); } } var backTab = function backTab(){ var id = card.getLayout().activeItem.id; var prev = Ext.getCmp('move-prev'); var next = Ext.getCmp('move-next'); if(id=='card-0'){ prev.setDisabled(true); next.setDisabled(false); } if(id=='card-1'){ prev.setDisabled(true); next.setDisabled(false); card.getLayout().setActiveItem(0); } } ////////////////////////////////////////翻页方法end////////////////////////////////////////////////// var panel1 = new Ext.Panel({ id: 'card-0', frame:true, height:300, width:500, html:'<span style="color:red">第1步:注册协议(共3步)' }); var panel2 = new Ext.form.FormPanel({ id: 'card-1', height:300, width:500, frame:true, bodyStyle: 'padding:15px,0px,0px,100px', layout:'form', labelAlign:'right', defaultType :'textfield', items:[ { xtype:'label', labelWidth:100, html:'<center>请输入注册信息</center><br>' },{ id:'name', fieldLabel:'用户名', labelWidth:100 },{ fieldLabel:'密码', inputType:'password', labelWidth:100 },{ fieldLabel:'确认密码', inputType:'password', labelWidth:100 },{ fieldLabel:'邮箱', vtype:'email', labelWidth:100 } ] }); var panel3 = new Ext.Panel({ id: 'card-2', frame:true, height:300, width:500, html:'<span style="color:red">第3步:注册成功(共3步)' }); var card = new Ext.Window({ resizable:false, id:'wizard', title: '注册', layout:'card', height:300, width:500, activeItem: 0, defaults: { border:false }, bbar: ['->', { id: 'move-prev', text: '上一步', disabled: true, handler:backTab }, { id: 'move-next', text: '下一步', handler:changeTab }, { id: 'exit', text: '取消', handler:function(){Ext.Msg.alert('系统提示','退出')} } ], items: [panel1,panel2,panel3] }); card.show(); })