ExtJs学习笔记（13）_Card布局

ExtJs学习笔记（13）_Card布局2010-11-16 cnblogs yjmyzz这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面
代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Window LayOut</title>
  <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
   <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext-all-debug.js"></script>
  <style type="text/css">
  .x-panel-body p {}{
    margin:10px;
    font-size:12px;
  }
  </style>
</head>
<body>
<script type="text/javascript">

  Ext.onReady（function（） {

    var i = 0;

    var navHandler = function（direction） {
      if （direction == -1） {
        i--;
        if （i < 0） { i = 0; }
      }

      if （direction == 1） {
        i++;
        if （i > 2） { i = 2; return false; }
      }

      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 = true;
      }
      else {
        btnNext.value = "下一步";
        btnNext.disabled = false;
      }

      card.getLayout（）.setActiveItem（i）;

    };

    var card = new Ext.Panel（{
      width: 200,
      height: 200,
      title: "注册向导",
      layout: "card",
      activeItem: 0, // make sure the active item is set on the container config！
      bodyStyle: "padding:15px",
      defaults: {
        border: false
      },
      bbar: [
        {
          id: "move-prev",
          text: "上一步",
          handler: navHandler.createDelegate（this, [-1]）
        },
        "->",
        {
          id: "move-next",
          text: "下一步",
          handler: navHandler.createDelegate（this, [1]）
        }
      ],

      items: [{
        id: "card-0",
        html: "<h1>欢迎来到注册向导！</h1><p>Step 1 of 3</p>"
      }, {
        id: "card-1",
        html: "<h1>请填写注册资料！</h1><p>Step 2 of 3</p>"
      }, {
        id: "card-2",
        html: "<h1>注册成功！</h1><p>Step 3 of 3 - Complete</p>"
}],

        renderTo: "container"
      }）;

    }）;

</script>

<div id="container" style="margin:100px"></div>

</body>
</html>
效果图: