`

Ext card布局

阅读更多

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

分享到:
评论
1 楼 xiaoCong 2009-05-03  
谢谢小龙的分享谢谢小龙的分享

相关推荐

    Ext介绍以及_ext页面布局

    3. **Card布局**:Card布局在一个容器中只显示一个子元素,常用于实现轮播效果或选项卡面板。 4. **Border布局**:Border布局是最常用的布局之一,它将容器分为五个区域:东(east)、南(south)、西(west)、北(north)...

    EXT 布局 Layout 资料

    - **Card 布局**:常用于 TabPanel,只显示当前选中的子元素。 - **Table 布局**:用于表格布局,支持行列布局。 每种布局都有其特定的应用场景,选择合适的布局可以帮助开发者更好地组织界面元素,提高用户界面的...

    ext布局(Layout.html)例子.pdf

    Card布局类似于翻页或步骤向导,一次仅显示一个子组件。`activeItem`属性指定当前可见的子组件索引。常用于步骤引导或选项卡面板。 7. Table布局: Table布局将子组件按表格形式排列,通过`layout: 'table'`和`...

    Ext10种布局

    - **定义**:通过 `Ext.layout.CardLayout` 类定义,布局名称为 `card`。 - **应用场景**:实现在容器中只显示一个子元素的功能,适用于实现安装向导或 Tab 选项卡等功能。 - **操作方法**:使用 `setActiveItem` ...

    ext布局layout各组件动态生成并相互交互

    发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据:不能定义对象名...

    ext布局(Layout.html)例子[参考].pdf

    6. **Card布局**:同一时间仅显示一个子组件,通常用于向导或选项卡面板。使用`layout: "card"`,并使用`activeItem`属性指定当前显示的卡片索引。 7. **Table布局**:类似HTML表格,将子组件按行和列排列。通过`...

    搜集来的ext布局材料

    - `card` 布局:用于在一组卡片中切换显示一个组件,常用于tabpanel。 - `table` 布局:未在代码中出现,用于表格样式的布局,组件按行和列分布。 4. **工具栏(tbar/bbar)**: - `tbar`(top toolbar)和 `...

    Ext教程ext2-Ext简易教程

    4. Card布局:只显示一个子组件,常用于实现多步骤向导或选项卡式界面。 例如,要使用Border布局,你可以创建一个包含多个区域的容器: ```javascript var container = new Ext.container.Viewport({ layout: '...

    ext实例 ext操作步骤

    4. **Card布局**:由`Ext.layout.CardLayout`定义,只在特定时间显示一个子组件,常用于步骤向导或选项卡式界面。 **创建窗口**在EXT中,窗口通常用于弹出式对话框或者独立的功能区。EXT提供了`Ext.Window`类来创建...

    ext的课件,ppt版,适合有面向对象基础人士

    4. Card布局:由`Ext.layout.CardLayout`定义,只在特定时刻显示一个子组件,常用于实现步骤向导或Tab面板,其中每个子组件代表一个独立的“卡片”。 掌握这些布局方式,开发者可以创建出复杂多样的界面结构,以...

    Ext JS 4 Architecture

    Ext JS 4提供了多种布局管理器,如盒式布局(box layout)、表格布局(table layout)、卡片布局(card layout)等,这些布局可以帮助开发者按照预期的视觉结构安排和管理组件。 6. **数据管理(Data)** 数据的...

    EXTJS4自学手册

    EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件(表格) EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面...

    Ext3.0最经典的学习教程.pdf

    - **卡片布局 (Card Layout)**: 适合在一个容器中切换不同的内容页面。 - **表格布局 (Table Layout)**: 用于展示数据表格时的布局。 - **流式布局 (Fit Layout)**: 自动填充容器的宽度和高度。 - **绝对定位布局 ...

    Ext教程.pptExt教程.pptExt教程.ppt

    4. **Card布局**:基于`Ext.layout.CardLayout`,在一个时间内只显示一个子元素,适合于创建步骤向导或者Tab面板,其中只有一个面板处于活跃状态。 除了这些基本布局,Ext还提供了许多其他高级控件,如窗口...

    ext js中文开发手册

    EXT JS提供了多种布局管理器,如Card、Border、Fit等,用于控制组件的排列和大小调整。布局是创建响应式和适应不同屏幕尺寸界面的关键。 **十一、Grid组件** Grid组件是EXT JS中用于展示大量表格数据的核心组件。...

    EXT开发文档

    - **EXT** 提供了多种布局方式,如卡片布局(Card Layout)、边界布局(Border Layout)等。 - 通过布局可以方便地管理和调整界面元素的位置和大小。 7. **表格组件**: - **Grid** 组件是 **EXT** 中非常重要的一...

    十分有用有帮助的EXT学习笔记

    3. **Card布局**: Card布局主要用于EXT的Container组件,它将内容分作多个“卡片”,一次只显示一个卡片。这种布局常用于实现类似轮播或选项卡的效果,用户可以通过导航按钮在不同的卡片之间切换。 4. **Form布局**...

    Ext2Mgr环境搭建和源代码

    `EXT2`(第二扩展文件系统)是Linux内核的一个主要组成部分,它在1992年由Rémy Card首次引入,设计目标是提供比当时默认的`Minix`文件系统更高效、更可靠的选择。`EXT2`具有良好的性能和稳定性,但缺乏事务处理,这...

    Ext下解决无弹出窗口的设计办法.docx

    本文将探讨如何在Ext环境下解决无弹出窗口的设计问题,主要涉及“卡片式布局(Card Layout)”和“延迟加载(Lazy Loading)”这两个核心概念。 首先,我们分析传统的弹出窗口或新开标签页的方式。通常,当用户触发...

    Ext Designer Preview3.0汉化版及教程

    - **布局管理**:讲解各种布局模式(如Fit布局、Card布局、Table布局等),以及如何调整布局以适应不同屏幕尺寸。 - **代码生成与同步**:说明如何将设计视图转换为实际的JavaScript代码,并与代码编辑器同步。 ...

Global site tag (gtag.js) - Google Analytics