<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  		<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
      <script type="text/javascript" src="ExtJs/ext-all.js"></script>
      <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
      <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
    	<script type="text/javascript">
    		Ext.onReady(function(){
          var panel = Ext.create('Ext.panel.Panel', {
            title: 'Ext.layout.container.CardLayout',
            frame: true,
            width: 250,
            renderTo: Ext.getBody(),
            bodyPadding: 5,
            defaults: {
              bodyStyle: 'background-color: #FFFFFF'
            },
            //layout: 'auto',
            //layout: 'fit',
            //layout: 'accordion',
            layout: 'card',
            activeItem: 0,

            items: [{
              title: 'Panel One',
              html: 'Panel One',
              id: 'p1'
            },{
              title: 'Panel Two',
              html: 'Panel Two',
              id: 'p2'
            },{
              title: 'Panel Three',
              html: 'Panel Three',
              id: 'p3'
            }],
            buttons: [{
              text: 'previous',
              handler: changePage
            },{
              text: 'next',
              handler: changePage
            }]
          });
          function changePage(btn){
            var index = Number(panel.layout.activeItem.id.substring(1));
            if(btn.text == 'previous'){
              index -= 1;
              if(index < 1){
                index = 1;
              }
            }else{
              index += 1;
              if(index > 3){
                index = 3;
              }
            }
            panel.layout.setActiveItem('p'+index);
          }
        });
    </script>
</head>
<body>

</body>
</html>

　　

ExtJs布局之Card的更多相关文章

  1. Extjs布局——layout: 'card'

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

  2. ExtJS布局控件

    Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...

  3. ExtJS 布局-Card 布局（Card layout）

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

  4. ExtJs布局详解

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

  5. Extjs布局

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

  6. ExtJS布局方式（layout）图文详解

    Auto默认布局 不给下级组件指定大小和位置 Absolute绝对布局 可使用坐标(x.y)进行布局 Accordion手风琴布局 实现Accordion效果的布局,也可叫可折叠布局.也就是说使用该布 ...

  7. ExtJs布局大全

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

  8. ExtJs布局之tabPanel

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

  9. ExtJs布局之viewport

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

随机推荐

  1. c语言参数类型

    今天看ntcip源码时看到,函数参数有点不一样.在函数实现时,没有括号中没有指明参数类型.注意这里说的是函数实现,不是说函数声明.这里在函数列表括号后面做了类型的说明,以前看到过,没想起来,今天做个记 ...

  2. pxe+preseed安装配置

    Ubuntu Server 部署手册 pxe+tftp+vsftp+apache2 ========================================================== ...

  3. Zabbix实现微信告警

    zabbix实现微信告警可以分为以下两个步骤: 在百度告警告警平台实现微信告警 将Zabbix接入百度告警平台 微信告警 实现微信告警只需要如下四步: 个人主页关注微信 升级策略配置微信告警 服务管理 ...

  4. sourceInsight使用技巧，持续更新中~~~

    作为测试人员,读各种平台的工程代码时,根本不想安装各种vs或者eclipse等,于是,就找了一款代码阅读工具. sourceInsight,下载地址为官网:http://www.sourceinsig ...

  5. 显示器VGA视频数据线的问题

    一朋友原来有一套PC电脑,后来买了一台新的显示器,新的显示器分辨率为1920X1080,主机接到新的显示器上,分辨率始终无法上到1920X1080,原主机的显示卡驱动已经是最新,还是不行,又重新安装操 ...

  6. IEEE 802.11 标准列表

    IEEE 802.11 标准列表 IEEE 802.11,1997年,原始标准(2Mbit/s,播在2.4GHz). IEEE 802.11a,1999年,物理层补充(54Mbit/s,播在5GHz) ...

  7. JQuery选择器使用

    问题描述:         JQuery选择器使用   问题说明:       1.在页面中创建一个导航条,单击标题时,可以伸缩导航条的内容,标题中的提示图片也随之改变       2.单击" ...

  8. 求字符串的最长回文字串 O(n)

    昨天参加了某公司的校园招聘的笔试题,做得惨不忍睹,其中就有这么一道算法设计题:求一个字符串的最长回文字串.我在ACM校队选拔赛上遇到过这道题,当时用的后缀数组AC的,但是模板忘了没写出代码来. 回头我 ...

  9. 【BZOJ】【1004】【HNOI2008】Cards

    Burnside/Polya+背包DP 这道题目是等价类计数裸题吧……>_> 题解:http://m.blog.csdn.net/blog/njlcazl_11109/8316340 啊其 ...

  10. NYOJ-289 苹果 TLE 分类： NYOJ 2013-12-29 17:52 282人阅读 评论(0) 收藏

    #include<stdio.h> struct apple{ int m; int v; }app[1010]; int money(int i,int v); int main(){ ...