Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,
对应面板布局(layout)配置项的名称为card。
该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,
这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem,
因为一次只能显示一个子面板,所以切换子面板的唯一途径就是调用setActiveItem方法,
它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制,
导航逻辑需要开发人员自己实现。Ext.layout.CardLayout主要方法如表
所示
方法名
说明
setActiveItem( String/Number item ) : void
根据子面板id或索引切换当前显示的子面板
[复制到剪贴板]CODE:
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'card',
activeItem : 0, //设置默认显示第一个子面板
title:'Ext.layout.CardLayout布局示例',
frame:true, //渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : { //设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px' //设置面板体的背景色
},
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(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
});
</script>
代码
演示了CardLayout卡片式布局的使用方式,
这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示,
其中changePage函数的用途是计算点击上一页或下一页之后将要显示的子面板id,
然后将该id传入到setActiveItem方法中实现子面板的切换。运行效果如图
所示
0001.jpg (28.95 K)
2009-1-1 15:14:28
来源:一起Ext
原文地址:http://www.17ext.com/showtopic-1758.aspx
分享到:
相关推荐
3. **Card布局**:Card布局在一个容器中只显示一个子元素,常用于实现轮播效果或选项卡面板。 4. **Border布局**:Border布局是最常用的布局之一,它将容器分为五个区域:东(east)、南(south)、西(west)、北(north)...
- **Card 布局**:常用于 TabPanel,只显示当前选中的子元素。 - **Table 布局**:用于表格布局,支持行列布局。 每种布局都有其特定的应用场景,选择合适的布局可以帮助开发者更好地组织界面元素,提高用户界面的...
Card布局类似于翻页或步骤向导,一次仅显示一个子组件。`activeItem`属性指定当前可见的子组件索引。常用于步骤引导或选项卡面板。 7. Table布局: Table布局将子组件按表格形式排列,通过`layout: 'table'`和`...
- **定义**:通过 `Ext.layout.CardLayout` 类定义,布局名称为 `card`。 - **应用场景**:实现在容器中只显示一个子元素的功能,适用于实现安装向导或 Tab 选项卡等功能。 - **操作方法**:使用 `setActiveItem` ...
发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据:不能定义对象名...
6. **Card布局**:同一时间仅显示一个子组件,通常用于向导或选项卡面板。使用`layout: "card"`,并使用`activeItem`属性指定当前显示的卡片索引。 7. **Table布局**:类似HTML表格,将子组件按行和列排列。通过`...
- `card` 布局:用于在一组卡片中切换显示一个组件,常用于tabpanel。 - `table` 布局:未在代码中出现,用于表格样式的布局,组件按行和列分布。 4. **工具栏(tbar/bbar)**: - `tbar`(top toolbar)和 `...
4. Card布局:只显示一个子组件,常用于实现多步骤向导或选项卡式界面。 例如,要使用Border布局,你可以创建一个包含多个区域的容器: ```javascript var container = new Ext.container.Viewport({ layout: '...
4. **Card布局**:由`Ext.layout.CardLayout`定义,只在特定时间显示一个子组件,常用于步骤向导或选项卡式界面。 **创建窗口**在EXT中,窗口通常用于弹出式对话框或者独立的功能区。EXT提供了`Ext.Window`类来创建...
4. Card布局:由`Ext.layout.CardLayout`定义,只在特定时刻显示一个子组件,常用于实现步骤向导或Tab面板,其中每个子组件代表一个独立的“卡片”。 掌握这些布局方式,开发者可以创建出复杂多样的界面结构,以...
Ext JS 4提供了多种布局管理器,如盒式布局(box layout)、表格布局(table layout)、卡片布局(card layout)等,这些布局可以帮助开发者按照预期的视觉结构安排和管理组件。 6. **数据管理(Data)** 数据的...
EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件(表格) EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面...
- **卡片布局 (Card Layout)**: 适合在一个容器中切换不同的内容页面。 - **表格布局 (Table Layout)**: 用于展示数据表格时的布局。 - **流式布局 (Fit Layout)**: 自动填充容器的宽度和高度。 - **绝对定位布局 ...
4. **Card布局**:基于`Ext.layout.CardLayout`,在一个时间内只显示一个子元素,适合于创建步骤向导或者Tab面板,其中只有一个面板处于活跃状态。 除了这些基本布局,Ext还提供了许多其他高级控件,如窗口...
EXT JS提供了多种布局管理器,如Card、Border、Fit等,用于控制组件的排列和大小调整。布局是创建响应式和适应不同屏幕尺寸界面的关键。 **十一、Grid组件** Grid组件是EXT JS中用于展示大量表格数据的核心组件。...
- **EXT** 提供了多种布局方式,如卡片布局(Card Layout)、边界布局(Border Layout)等。 - 通过布局可以方便地管理和调整界面元素的位置和大小。 7. **表格组件**: - **Grid** 组件是 **EXT** 中非常重要的一...
3. **Card布局**: Card布局主要用于EXT的Container组件,它将内容分作多个“卡片”,一次只显示一个卡片。这种布局常用于实现类似轮播或选项卡的效果,用户可以通过导航按钮在不同的卡片之间切换。 4. **Form布局**...
`EXT2`(第二扩展文件系统)是Linux内核的一个主要组成部分,它在1992年由Rémy Card首次引入,设计目标是提供比当时默认的`Minix`文件系统更高效、更可靠的选择。`EXT2`具有良好的性能和稳定性,但缺乏事务处理,这...
本文将探讨如何在Ext环境下解决无弹出窗口的设计问题,主要涉及“卡片式布局(Card Layout)”和“延迟加载(Lazy Loading)”这两个核心概念。 首先,我们分析传统的弹出窗口或新开标签页的方式。通常,当用户触发...
- **布局管理**:讲解各种布局模式(如Fit布局、Card布局、Table布局等),以及如何调整布局以适应不同屏幕尺寸。 - **代码生成与同步**:说明如何将设计视图转换为实际的JavaScript代码,并与代码编辑器同步。 ...