`
huiqinbo
  • 浏览: 353650 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

无废话ExtJs 系列教程十四-----(三) [卡片式布局:CardLayout ]

 
阅读更多

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:程序效果



 

点击“点我切换”按钮后的效果图:

 



 

  • 大小: 6.5 KB
  • 大小: 6.5 KB
分享到:
评论

相关推荐

    ExtJS之布局详解

    - **卡片式布局(CardLayout)**:通过`layout: "card"`实现,只显示容器中的一个子组件,常用于多步骤向导或选项卡式界面。 - **列布局(ColumnLayout)**:使用`layout: "column"`,子组件按列排列,可通过`...

    extjs_页面布局.doc

    4. **CardLayout**:卡片布局,一次只显示一个子组件,就像一副扑克牌,每次只能看到一张卡片。`activeItem`配置项在这里特别有用,用于指定当前显示的卡片。 5. **AnchorLayout**:锚点布局,允许组件根据容器大小...

    ExtJS实用开发指南

    2. **布局管理**:ExtJS支持多种布局方式,如边界布局(`BorderLayout`)、卡片布局(`CardLayout`)等。 3. **常用组件**:包括`Ext.grid.GridPanel`(表格)、`Ext.tree.TreePanel`(树形视图)、`Ext.form.FormPanel`...

    老师整理的extjs学习笔记

    - **CardLayout**: 卡片式布局,用于显示一系列可切换的内容面板。 - **ColumnLayout**: 列布局,用于创建多列布局。 - **HBoxLayout 和 VerticalLayout**: 水平和垂直布局,用于水平或垂直排列子项。 - **...

    EXTJS 4 web应用程序开发宝典

    - **组件库扩展**:新增了许多组件,如卡片布局(CardLayout)、工具栏(Toolbar)等,使得开发者能够构建更复杂的应用界面。 - **性能优化**:通过对DOM操作的优化以及内存管理机制的改进,极大地提高了应用的加载速度...

    精通JS脚本之ExtJS框架.part2.rar

    11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout 11.1.7 ContainerLayout 11.2 与布局有关的其他知识 11.2.1 父类Ext....

    精通JS脚本之ExtJS框架.part1.rar

    11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout 11.1.7 ContainerLayout 11.2 与布局有关的其他知识 11.2.1 父类Ext....

    Ext 开发指南 学习资料

    10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.1.4. DWRProxy和ComboBox 10.2. localXHR让你在不用服务器就玩ajax 10.3. 在form中使用fckeditor 10.4. 健康快乐动起来,fx里的动画效果 ...

Global site tag (gtag.js) - Google Analytics