1:Ext.layout.CardLayout的介绍
CardLayout可以看作是一叠卡片,从上面看起来就像是一张卡片,可以把中间的卡片抽出来,放到最上面,可每次只能看到一张卡片,它能够
满足安装向导、Tab选项卡等应用面板显示的需求。
代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>formPanel</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var panel = new Ext.Panel({ renderTo: 'card', title: '卡片式布局', width: 500, height: 200, layout: 'card', frame: true, activeItem: 0, //默认显示第一个子面板 defaults: { bodyStyle: 'background-color: #FFFFFF; padding: 15px' }, layoutConfig: { animate: true }, items: [{ title: '子元素一', html: '我是NO 1', id: 'id0' }, { title: '子元素二', html: '我是NO 2', id: 'id1' }, { title: '子元素三', html: '我是NO 3', id: 'id2' }], buttons: [{ text: '点我切换', handler: changeTab }] }); /** * 设置按钮调用函数 */ function changeTab() { var p = panel.layout.activeItem.id.substring(2); //获取当前面板的id p++; if(p > 2) p = 0; //如果p大于2,就设置p为0 panel.getLayout().setActiveItem(p); } }); </script> </head> <body> <div id="card"></div> </body> </html>
2:程序效果
点击“点我切换”按钮后的效果图: