Ext.layout.CardLayout

Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，其xtype值为card。切换子面板的唯一途径是调用setActiveItem方法。

var panel = new Ext.Panel({  
    renderTo: "div3",  
    frame: true,  
    layout: "card",  
    title: "卡片式布局（CardLayout）",  
    height: 300,  
    activeItem: 0,  
    defaults: {  
        bodyStyle: "padding:3px; background-color: #FFFFFF" 
    },  
    items: [  
        {id: "c1", title:"嵌套面板一", html:"嵌套面板一"},  
        {id: "c2", title:"嵌套面板二", html:"嵌套面板二"},  
        {id: "c3", title:"嵌套面板三", html:"嵌套面板三"}  
    ],  
    buttons: [  
        {  
            text: "上一页",  
            handler: changePage  
        },  
        {  
            text: "下一页",  
            handler: changePage  
        }  
    ]  
});  
 
function changePage(btn){  
    var index = Number(panel.layout.activeItem.id.substring(1));  
    if(btn.text == "上一页"){  
        index -= 1;  
        if(index<1) index = 1;  
    }else{  
        index += 1;  
        if(index>3) index = 3;  
    }  
    panel.layout.setActiveItem("c"+index);  
}