卡片式格局（CardLayout） _Web前端

卡片式布局（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);
}