先看下此布局的特性:

下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方法。)

    //导航
var navigate = function(panel, direction){//panel:导航面板;direction:layout调用的方法
// 此程序可以包含一些控制导航步骤的必要业务逻辑. 比如调用setActiveItem, 管理导航按钮的状态,
// 处理可能出现的分支逻辑, 处理特殊操作像取消或结束等等. 一个完整的向导页, 对于复杂的需求
// 实现起来可能也会相当复杂, 在实际的程序中通常应该以继承CardLayout的方式来实现. /**
* 获取导航面板的布局
*/
var layout = panel.getLayout();
/**
* 导航面板切换至下一个组件或上一个组件
*
* 此语句是调用layout的某个方法。注意:因为layout所调用的方法名是变量,所有用layout[methodName]()这种形式。
* 示例:如direction为"next",则此语句等同于:layout.next();将布局的激活(可见)组件切换到下一个.
*/
layout[direction]();
/**
* 设置导航面板的bbar中的按钮状态
*
* getCmp:通过id查找现有的Component.返回:Ext.Component。 --Ext
* setDisabled(Boolean disabled ):启用或者禁用当前组件. --Ext.Component
* getPrev():返回布局中当前激活(可见)组件的上一个组件.返回:Ext.Component。 --Ext.layout.container.Card
*/
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());//如果当前Panel的当前激活组件没有上一个组件,则设置'move-prev'按钮为禁用。
Ext.getCmp('move-next').setDisabled(!layout.getNext());//如果当前Panel的当前激活组件没有下一个组件,则设置'move-next'按钮为禁用。
}; //创建导航面板
Ext.create('Ext.panel.Panel', {
title: 'Example Wizard',
width: 300,
height: 200,
layout: 'card',
bodyStyle: 'padding:15px',
defaults: {
// 应用到所有子面板
border: false
},
// 这里仅仅用几个按钮来示例一种可能的导航场景.
bbar: [//工具栏的默认类型是按钮
{
id: 'move-prev',
text: 'Back',
xtype: 'button',
handler: function(btn) {//Ext.button.Button-cfg-handler
navigate(btn.up("panel"), "prev");//up方法:沿着 ownerCt 查找匹配简单选择器的祖先容器——即本示例创建的Panel
},
disabled: true
},
'->', // 一个长间隔, 使两个按钮分布在两边
{
id: 'move-next',
text: 'Next',
handler: function(btn) {//btn:This button.
navigate(btn.up("panel"), "next");
}
}
],
// 布局下的各子面板
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});

效果:

Extjs布局——layout: 'card'的更多相关文章

  1. ExtJs布局之Card

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. ExtJS 布局-Card 布局(Card layout)

    更新记录: 2022年6月1日 开始. 2022年6月6日 发布. 1.说明 卡片布局类似牌堆,每次只有一个子组件可见,子组件几乎填满了整个容器.卡片布局常用于向导(Wizard)和选项卡(Tabs) ...

  3. ExtJS中layout的12种布局风格

    总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...

  4. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  5. ExtJS 布局-Border 布局(Border layout)

    更新记录: 2022年6月11日 发布. 2022年6月1日 开始. 1.说明 边框布局允许根据区域(如中心.北部.南部.西部和东部)指定子部件的位置.还可以调整子组件的大小和折叠. 2.设置布局方法 ...

  6. ExtJs布局详解

    序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...

  7. Extjs布局

    今天我来总结一下extjs下面的各种布局,不仅是为了给自己做笔记,同时,也希望让刚刚接触extjs的朋友们快速的了解下,大神就不用看了.废话不多说,开始布局的讲解. (以下代码都可以直接在javasc ...

  8. ExtJs布局大全

    1.Fit 布局 在Fit 布局中,子元素将自动填满整个父容器.注意:在fit 布局下,对其子元素设置宽度是无效的.如果在fit 布局中放置了多个组件,则只会显示第一个子元素.在Fit 布局中,子元素 ...

  9. sencha touch 入门系列 (九) sencha touch 布局layout

    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...

随机推荐

  1. http keepalive

    转载自: http://www.92csz.com/17/1152.html http keepalive 在http早期 ,每个http请求都要求打开一个tpc socket连接,并且使用一次之后就 ...

  2. MyBatis(3.2.3) - One-to-many mapping

    In the sample domain model, a tutor can teach one or more courses. This means that there is a one-to ...

  3. Linux 命令 - rm: 删除文件和目录

    命令格式 rm [OPTION]... FILE... 命令参数 -f, --force 强制删除,忽略不存在的文件,不会提示. -i, --interactive 没次删除文件时,提示用户确认. - ...

  4. DOS批处理命令-SET命令

    SET是专门用来创建.设置.查看或删除环境变量. 总结了下,SET的使用语法一般有下面几种 1.SET 变量名=变量值 这边有一点要注意的,就是变量名和变量值中间的等号两端不需要也不能有空格 看看下面 ...

  5. Objective-C 【完整OC项目-购票系统-系统分析-代码实现】

    电影院买票系统/演唱会买票系统 需求分析: 首先我们进入系统,然后会选择买电影票还是买演唱会票,所以这牵扯两个系统的合成.但是我们知道都是买票系统,所以我们可以先创建一个类,属于购买电影票和演唱会的票 ...

  6. ICallbackEventHandler 接口实现回调处理功能

    在最近的项目实现中遇到了一个问题 在数据处理的过程中,需要请求获取数据,再做处理之后,可以在页面及时获取数据 开始时,首先想到的到是写Ajax请求,但在做后续数据处理后,处理获取数据等操作,感觉实现起 ...

  7. AngularJS 的那些内置九种过滤器

    ng内置了九种过滤 1. currency (货币处理) 使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币: {{num | currency : ...

  8. JS实现登录页面记住密码和enter键登录

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>按 ...

  9. 关于JFinal拦截器的理解

    这是波总的亲自总结,记录一下: 1:拦截器可以用在两个层面,一个是"控制层",另一个是"业务层",其中"业务层"是一种狭义的说法,更加合理的 ...

  10. KMeans聚类算法Hadoop实现

    Assistance.java  辅助类,功能详见注释 package KMeans; import org.apache.hadoop.conf.Configuration; import org. ...