這種布局用來管理多個子組件，并且在任何時刻只能顯示一個子組件。這種布局最常用的情況是向導模式，也就是我們所說的分布提交。

    <script type="text/javascript">
			Ext.application(
				{
					name:'layout_card',
					launch:function(){
						var navigate = function(panel,direction){
							var layout = panel.getLayout();
							layout[direction]();
							Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
							//判斷是否有下一個card，如果沒有則設置disabled為true
							Ext.getCmp('move-next').setDisabled(!layout.getNext());
						};
						Ext.create(
							'Ext.panel.Panel',
							{
								title:'card布局',
								width:300,
								height:200,
								layout:'card',
								activeItem:0,
								x:30,
								y:30,
								renderTo: Ext.getBody(),
								draggable:true,	//是否允許拖動
								//用于顯示頁碼
								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: '第一個card'      
							        }, 
							        { 
							            id: 'card-1', 
							            html: '第二個card' 
							        }, 
							        { 
							            id: 'card-2', 
							            html: '第三個card'      
							        }
						     	],     
							}
						);
					}
				}
			)
		</script>
  

效果圖

Extjs4---card布局