EXT card布局

最新推荐文章于 2021-06-19 03:45:31 发布

原创最新推荐文章于 2021-06-19 03:45:31 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #HTML

ExtJs 专栏收录该内容

81 篇文章

订阅专栏

本文介绍如何使用 ExtJS 构建一个简单的注册向导界面，包括三个步骤：阅读注册协议、填写注册信息和完成注册流程。通过 JavaScript 控制面板的切换实现前后导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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