先看下此布局的特性：
下面演示一个使用layout: 'card'布局的示例（从API copy过来的）——导航面板（注：导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方法。）
//导航
var navigate = function(panel, direction){//panel:导航面板；direction:layout调用的方法
// 此程序可以包含一些控制导航步骤的必要业务逻辑. 比如调用setActiveItem, 管理导航按钮的状态,
// 处理可能出现的分支逻辑, 处理特殊操作像取消或结束等等. 一个完整的向导页, 对于复杂的需求
// 实现起来可能也会相当复杂, 在实际的程序中通常应该以继承CardLayout的方式来实现. /**
* 获取导航面板的布局
*/
var layout = panel.getLayout();
/**
* 导航面板切换至下一个组件或上一个组件
*
* 此语句是调用layout的某个方法。注意：因为layout所调用的方法名是变量，所有用layout[methodName]()这种形式。
* 示例：如direction为"next",则此语句等同于：layout.next();将布局的激活(可见)组件切换到下一个.
*/
layout[direction]();
/**
* 设置导航面板的bbar中的按钮状态
*
* getCmp:通过id查找现有的Component.返回：Ext.Component。 --Ext
* setDisabled(Boolean disabled ):启用或者禁用当前组件. --Ext.Component
* getPrev():返回布局中当前激活(可见)组件的上一个组件.返回：Ext.Component。 --Ext.layout.container.Card
*/
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());//如果当前Panel的当前激活组件没有上一个组件，则设置'move-prev'按钮为禁用。
Ext.getCmp('move-next').setDisabled(!layout.getNext());//如果当前Panel的当前激活组件没有下一个组件，则设置'move-next'按钮为禁用。
}; //创建导航面板
Ext.create('Ext.panel.Panel', {
title: 'Example Wizard',
width: 300,
height: 200,
layout: 'card',
bodyStyle: 'padding:15px',
defaults: {
// 应用到所有子面板
border: false
},
// 这里仅仅用几个按钮来示例一种可能的导航场景.
bbar: [//工具栏的默认类型是按钮
{
id: 'move-prev',
text: 'Back',
xtype: 'button',
handler: function(btn) {//Ext.button.Button-cfg-handler
navigate(btn.up("panel"), "prev");//up方法：沿着 ownerCt 查找匹配简单选择器的祖先容器——即本示例创建的Panel
},
disabled: true
},
'->', // 一个长间隔, 使两个按钮分布在两边
{
id: 'move-next',
text: 'Next',
handler: function(btn) {//btn:This button.
navigate(btn.up("panel"), "next");
}
}
],
// 布局下的各子面板
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});
效果：
