extjs card卡片式布局
extjs card卡片式布局Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为 card。这种布局最常用的情况是向导模式，Tab选项板等应用中面板显示的需求。Card布 局可以使用layout:'card'来创建。
由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那 么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用 getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是 FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。
实例：
var panel = new Ext.Panel({
renderTo: "li3",
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);
}
defaults: 其效果图为：
