上下翻页Panel

Ext.onReady(function() {
 
  var i = 0;
  var navHandler = function(direction) {
//alert(Ext.get("move-next").dom.document.getElementsByTagName("formPanel")[1]);
   if(direction == -1) {
    i--;
    if (i < 0){
     i = 0;
    }
   }
   if(direction == 1) {
    i++;
    if (i > 3){
     i = 3;
    }
   }
   var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
   var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
   if (i == 0) {
    btnBack.disabled = true;
   }else {
    btnBack.disabled = false;
   }
  
   if (i == 2) {
    btnNext.value = "完成";
    btnNext.disabled = false;
   }else {
    btnNext.value = "下一步";
    btnNext.disabled = false;
   }
   card.getLayout().setActiveItem(i);
   
   if(i == 3){
    btnNext.value = "完成";
    btnNext.disabled = true;
    register();
   }
  };
 
  
  var eName = new Ext.form.TextField({
   id       : 'eName',
   name       : 'eName',
   fieldLabel     : '姓名',
   allowBlank     : false,
   anchor            : '100%',
   value      : ''
  })
  
  var basePanel = new Ext.FormPanel({
   title             : '基本信息',
   frame             : true,
   region            : 'north',
   labelAlign        : 'right',
   labelWidth        : 40,
   items             : [{
    layout           : 'column',
    items            : [
     {
      columnWidth    : .33,
      layout         : 'form',
      items          : [eName]
     }
    ]
   }]
  })
  
  var familyInfoPanel = new Ext.FormPanel({
   title             : '家庭信息',
   frame             : true,
   region            : 'north',
   labelAlign        : 'right',
   labelWidth        : 80,
   html        : '家庭信息,大家好才是真的好！'
  })
  
  var comprehensiveInfoPanel = new Ext.FormPanel({
   title             : '综合信息',
   frame             : true,
   region            : 'north',
   labelAlign        : 'right',
   labelWidth        : 80,
   html        : '综合信息,美好生活开始于每一天!'
  })
  
  var card = new Ext.Panel({
   width      : 500,
   height      : 500,
   title      : '注册向导',
   layout      : 'card',
   activeItem     : 0,       
   bodyStyle     : 'padding:2px',
   defaults     : {
    border     : false
   }, 
   bbar      : [
    {
     id     : 'move-prev',
     text    : '上一步',
     handler    : navHandler.createDelegate(this,[-1])                   
             },
    '->',
    {
     id     : 'move-next',
     text    : '下一步',
     handler    : navHandler.createDelegate(this, [1])
    }
   ],
   items      : [basePanel,familyInfoPanel,comprehensiveInfoPanel],
   renderTo     : Ext.getBody()
  });

  //完成
  function register(){
   if(getFormInputValid(basePanel)){
    alert(eName.getValue());
   }
  }
 
 
 
 
 
 
 
 
 
});