先看下此布局的特性:

下面演示一个使用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. tools安装

    1.ruby安装  下载安装包 勾选中间一个 2.sass 安装  转换TB镜像 $ gem sources --remove https://rubygems.org/$ gem sources - ...

  2. nodejs1

    介绍: 为什么使用Node 1.解决了高并发连接时的内存占用和资源共享问题 传统后台语言是多线程的,比如:每个用户占2m的内存,8G内存可以承载4000人,node是单线程,触发一个事件,可以容纳几万 ...

  3. Redis - 发布/订阅模式

    Redis 提供了一组命令可以让开发者实现 “发布/订阅” 模式.“发布/订阅” 可以实现进程间的消息传递,其原理是这样的: “发布/订阅” 模式中包含两种角色,分别是发布者和订阅者.订阅者可以订阅一 ...

  4. Sql Server关于text类型的替换

    UPDATE Store SET Body=replace(convert(varchar(8000),Body),'http://120.89.46.68:8007','')

  5. asp.net发布webservice出现‘Could not write to output file ‘解决办法

    Could not write to output file 'c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET File ...

  6. iOS的沙箱目录和文件操作

    一.沙箱 iOS的每一个应用程序都有自己的目录来存放数据,这个目录称为沙箱目录.沙箱目录是一种数据安全策略,它设计的原理是只能允许自己的应用访问目录,而不允许其他的应用访问,这样可以保证数据的安全,应 ...

  7. Java Web容器的启动与处理请求的过程

    容器启动时的加载顺序 一.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<context-param>结点.二.容创建一个ServletContext(ser ...

  8. 如何Angularjs1.3在页面中输出带Html标记的文本

    基于安全考虑,Angularjs不允许用ng-bind或者{{}}的方法输出html文本. 在实际的应用中,比如信息管理系统,用在线编辑器编辑出来的文章都带有html标记,这种情况下可以用ng-bin ...

  9. 使用spring手动控制事务

    http://kiral.iteye.com/blog/92742 使用spring手动控制事务 Spring事务配置的五种方式 (1) http://www.cnblogs.com/hellojav ...

  10. java应用uploadify 3.2丢失session

    java应用uploadify 3.2丢失session http://c-bai.iteye.com/blog/1829269 uploadify上传用的是一个flash插件. flash中有个bu ...