EXT-Card 卡片式格局 _Web前端

EXT--Card 卡片式布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>卡片式布局</title> 
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>  
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
var testpanel=Ext.create('Ext.panel.Panel',{ 
layout:'card', //卡片式布局 
   activeItem:0,   //设置默认显示的第一个子面板 
title:'Ext.layout.CardLayout', 
frame:true, 
renderTo:Ext.getBody(), 
bodyPadding:5, 
width:250, 
height:150, 
defaults:{ 
bodyStyle:'background-color:#FFFFFF' 
}, 
//面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改 
items:[{ 
title:'嵌套面板一', 
html:'说明一', 
id:'p1' 
},{ 
title:'嵌套面板二', 
html:'说明二', 
id:'p2' 
}, 
{ 
title:'嵌套面板三', 
html:'说明三', 
id:'p3' 
}], 
buttons:[{ 
text:'上一页', 
handler:changePage 
},{ 
text:'下一页', 
handler:changePage 
}] 
}); 
//切换子面板 
function changePage(btn){ 
var index=Number(testpanel.layout.activeItem.id.substring(1)); 
if(btn.text=='上一页'){ 
index-=1; 
if(index<1){ 
index=1; 
} 
}else{ 
index+=1; 
if(index>3){ 
index=3; 
} 
} 
testpanel.layout.setActiveItem('p'+index); 
} 
}); 
</script> 
//该布局包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方法是setActiveItem 。因为一次只能显示一个子面板，所以切换页面的唯一途径就是setActiveItem方法，它接受一个子面板id或索引作为参数。 
</head> 

<body> 

</body> 
</html>