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>
?
