Ext.js：card_wizard布局

这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。

语法

这里是使用卡向导布局的简单语法：

 layout: 'card'

注意：
由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。

例

下面的示例代码展示了一个基本的Card布局：

<!DOCTYPE html>
<html>
<head>
  <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
  <script src="./ext-6.0.0/build/ext-all.js"></script>
  <script type="text/javascript">
    Ext.application({
      name: 'HelloExt',
      launch: function () {
        var navigate = function (panel, direction) {
          var layout = panel.getLayout();
          layout[direction]();
          Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
          Ext.getCmp('move-next').setDisabled(!layout.getNext());
        };
        Ext.create('Ext.panel.Panel', {
          title: 'Card布局示例',
          width: 300,
          height: 202,
          layout: 'card',
          activeItem: 0,
          x: 30,
          y: 60,
          bodyStyle: 'padding:15px',
          defaults: { border: false },
          bbar: [{
            id: 'move-prev',
            text: '上一步',
            handler: function (btn) {
              navigate(btn.up("panel"), "prev");
            },
            disabled: true
          },
            '->',
          {
            id: 'move-next',
            text: '下一步',
            handler: function (btn) {
              navigate(btn.up("panel"), "next");
            }
          }],
          items: [{
            id: 'card-0',
            html: '<h1>第一步</h1>'
          },
          {
            id: 'card-1',
            html: '<h1>第二步</h1>'
          },
          {
            id: 'card-2',
            html: '<h1>最后一步</h1>'
          }],
          renderTo: Ext.getBody()
        });
      }
    });
  </script>
</head>
<body>
</body>
</html>

运行结果：