`
liss
  • 浏览: 844140 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext的Card布局示例

阅读更多
//这个代码就有点通用性了
        var navHandler = function(direction) {

            var layout = card.getLayout()
            var index = card.items.indexOf(layout.activeItem);
            var count = card.items.getCount();

            if (direction == -1) {
                index--;
                if (index < 0) { index = 0; }
            }

            if (direction == 1) {
                index++;
                if (index >= count) { index = count - 1; return false; }
            }

            var btnNext = Ext.getCmp('move-next');
            var btnBack = Ext.getCmp('move-prev');

            if (index == 0) {
                btnBack.setDisabled(true);
            }
            else {
                btnBack.setDisabled(false);
            }

            if (index == count - 1) {
                btnNext.setText("完  成");
                btnNext.setDisabled(true);
            }
            else {
                btnNext.setText("下一步");
                btnNext.setDisabled(false);
            }

            layout.setActiveItem(index);

        };

 

        var card = new Ext.Panel({
            width: 200,
            height: 200,
            title: '注册向导',
            layout: 'card',
            activeItem: 0,
            bodyStyle: 'padding:15px',
            defaults: {
                border: false
            },
            listeners: { 'afterrender': { fn: function() { Ext.getCmp('move-prev').setDisabled(true); } } },
            bbar: [
                '->',
                {
                    id: 'move-prev',
                    text: '上一步',
                    handler: navHandler.createDelegate(this, [-1])
                },
                '-',
                {
                    id: 'move-next',
                    text: '下一步',
                    handler: navHandler.createDelegate(this, [1])
                }
            ],

            items: [{
                id: 'card-0',
                html: '<h1>欢迎来到注册向导!</h1><p>第1/3步!</p>'
            }, {
                id: 'card-1',
                html: '<h1>请填写注册资料!</h1><p>第2/3步!</p>'
            }, {
                id: 'card-2',
                html: '<h1>注册成功!</h1><p>第3/3步!完成!</p>'
            }],

                renderTo: Ext.getBody()

            });

 

分享到:
评论

相关推荐

    Ext介绍以及_ext页面布局

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

    EXT 布局 Layout 资料

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

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

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

    搜集来的ext布局材料

    - 在示例中,`viewport` 的布局有两种类型:`fit` 和 `border`。`fit` 布局适用于只有一个子组件的情况,它会使得子组件完全填充容器。而 `border` 布局则将容器分为五个区域:`north`, `south`, `east`, `west` 和...

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

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

    Ext JS 4 Architecture

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

    ext2.3 各个控件的例子

    EXT2是1992年由Remy Card开发的,它解决了当时Linux中的性能问题,特别是针对小型设备和低内存环境。EXT2的主要特点包括: 1. 快速:没有复杂的元数据结构,适合快速存取。 2. 简单:文件系统的布局简单,易于理解和...

    Ext常用属性总结.doc

    Ext JS支持多种布局管理器,如Border Layout、Card Layout等,并且内置了大量组件,如Grid Panel、Tree Panel等,极大地简化了前端开发工作。 #### 二、Ext JS常用属性详解 ##### 2.1 title (标题) **作用:** ...

    EXT-js-中文手册

    - **布局管理**:ContainerModel支持不同的布局策略,如Flex布局、Card布局等。 - **示例演示**:通过示例代码演示了如何使用ContainerModel来构建具有复杂布局的用户界面。 #### 24. 布局Layouts - **布局类型**:...

    ext js中文开发手册

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

    EXT开发文档

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

    extjs布局管理学习指南

    title: "手风琴布局示例", width: 300, layout: "accordion", items: [ {title: "面板1", html: "这是面板1的内容"}, {title: "面板2", html: "这是面板2的内容"}, {title: "面板3", html: "这是面板3的内容...

    Ext Js权威指南(.zip.001

    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 标签...

    EXT中文手册.pdf

    3. **布局管理**:文档中提到了布局管理,如`applayout.html`和`applayout.js`,这些是管理页面布局的文件,Ext JS提供了多种布局类型,如fit、border、card等。 4. **Grid组件**:Ext JS的Grid组件被广泛使用来...

    Extjs之布局

    Card布局允许在一个容器中切换多个页面或视图,类似于卡片堆叠。当一个卡牌被激活时,其他卡牌会被隐藏,只显示当前卡牌的内容。这在制作多页面应用程序时非常有用,可以避免页面间的重复加载,提高应用性能。 ####...

    ext2.0

    它由Remy Card开发,首次在1993年发布,作为当时默认的EXT文件系统的升级版。EXT2的主要改进在于解决了EXT的性能问题,特别是对于大型文件的支持和磁盘空间管理。 【描述】"ext2.0,供大家学习使用." 这句话表明这个...

Global site tag (gtag.js) - Google Analytics