<!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>
开发者博客：www.developsearch.com
相关推荐
- **Layouts**：布局决定了容器内组件的排列方式，如边界布局（Border Layout）、卡片布局（Card Layout）等。 **1.3 Laying Out UI Components** 在设计UI时，正确设置布局是至关重要的。Ext-Designer支持多种...
- `card` 布局：用于在一组卡片中切换显示一个组件，常用于tabpanel。 - `table` 布局：未在代码中出现，用于表格样式的布局，组件按行和列分布。 4. **工具栏（tbar/bbar）**： - `tbar`（top toolbar）和 `...
本文将探讨如何在Ext环境下解决无弹出窗口的设计问题，主要涉及“卡片式布局（Card Layout）”和“延迟加载（Lazy Loading）”这两个核心概念。 首先，我们分析传统的弹出窗口或新开标签页的方式。通常，当用户触发...
- **卡片布局 (Card Layout)**: 适合在一个容器中切换不同的内容页面。 - **表格布局 (Table Layout)**: 用于展示数据表格时的布局。 - **流式布局 (Fit Layout)**: 自动填充容器的宽度和高度。 - **绝对定位布局 ...
Ext JS 4提供了多种布局管理器，如盒式布局（box layout）、表格布局（table layout）、卡片布局（card layout）等，这些布局可以帮助开发者按照预期的视觉结构安排和管理组件。 6. **数据管理（Data）** 数据的...
- **响应式设计**: EXT支持响应式布局，可以根据设备特性自动调整界面，确保在桌面和移动设备上都有良好的用户体验。 EXT的学习是一个逐步深入的过程，从基本组件的使用到高级特性的掌握，都需要实践和理解。EXT...
- **卡片式布局（CardLayout）**：通过`layout: "card"`实现，只显示容器中的一个子组件，常用于多步骤向导或选项卡式界面。 - **列布局（ColumnLayout）**：使用`layout: "column"`，子组件按列排列，可通过`...
3. **响应式设计**：EXT后台模板通常具有响应式布局，这意味着它可以适应不同的屏幕尺寸和设备类型，如桌面、平板电脑和手机。这得益于EXTJS内置的 responsive 和 layout 系统，能够自动调整界面以适应不同分辨率的...
9.4.14 卡片布局：ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 标签面板的构成及其运行流程：ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签...
- **Card Layout** (卡片布局): 类似于手风琴布局，但只显示一个活动面板。 #### 五、总结 通过以上介绍可以看出，ExtJS提供了丰富的布局管理功能，可以帮助开发者创建出复杂而灵活的用户界面。理解并熟练掌握这些...
- **卡片布局(card)**：展示一系列卡片式内容，一次只显示一张卡片。 - **列布局(column)**：按列组织子项。 - **填充布局(fit)**：使组件完全填充其容器。 - **表单布局(form)**：为表单元素提供灵活的布局选项。 -...
- **改进的组件库**：Ext.JS 4.0 对组件库进行了大量的改进和扩展，新增了许多高级组件，如卡片式布局(Card Layout)、视图分组(Viewport Grouping)等，使得开发者能够构建更加复杂的用户界面。 - **样式定制**：通过...
- **应用场景**：适用于需要在一个位置显示多个不同内容的情况，类似于卡片式切换。 ##### 2.5 Anchor布局 - **特点**：容器内的子项可以按照百分比来填充容器的空间。 - **应用场景**：适用于需要子项按比例填充...
5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用...
- **Card布局**: 显示多个卡片，每次只显示一张。 - **Table布局**: 用于显示表格数据。 #### 六、表格控件(Grid) - **基本表格(GridPanel)**: - 提供了一个表格视图，可以展示数据集。 - 支持排序、过滤等功能...
1. **布局类**：包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...