1:Ext.layout.CardLayout的介绍
CardLayout可以看作是一叠卡片,从上面看起来就像是一张卡片,可以把中间的卡片抽出来,放到最上面,可每次只能看到一张卡片,它能够
满足安装向导、Tab选项卡等应用面板显示的需求。
代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>formPanel</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var panel = new Ext.Panel({ renderTo: 'card', title: '卡片式布局', width: 500, height: 200, layout: 'card', frame: true, activeItem: 0, //默认显示第一个子面板 defaults: { bodyStyle: 'background-color: #FFFFFF; padding: 15px' }, layoutConfig: { animate: true }, items: [{ title: '子元素一', html: '我是NO 1', id: 'id0' }, { title: '子元素二', html: '我是NO 2', id: 'id1' }, { title: '子元素三', html: '我是NO 3', id: 'id2' }], buttons: [{ text: '点我切换', handler: changeTab }] }); /** * 设置按钮调用函数 */ function changeTab() { var p = panel.layout.activeItem.id.substring(2); //获取当前面板的id p++; if(p > 2) p = 0; //如果p大于2,就设置p为0 panel.getLayout().setActiveItem(p); } }); </script> </head> <body> <div id="card"></div> </body> </html>
2:程序效果
点击“点我切换”按钮后的效果图:
相关推荐
NULL 博文链接:https://huiqinbo.iteye.com/blog/2217105
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219592
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
extjs-theme-bootstrap-master.zip
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) ... 第三十讲:extjs4.0的desktop使用讲解
这是一个Ext框架,我对此框架很感兴趣。。。特别想了解一下。。。
NULL 博文链接:https://huiqinbo.iteye.com/blog/2218833
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ext-2.3.0及教程,可以根据教程对Extjs有个了解
第三讲:extjs4.0数据模型--Model 第四讲:extjs4.0的数据代理-Proxy 第五讲:extjs4.0的读写器reader,writer 第六讲:extjs4.0的数据集store 第七讲:extjs4.0的事件机制Event 第八讲:extjs4.0的Ajax 第九讲:...
看到其它地方 分太高,问大家省点分. 只有代码,视频请百度看. 第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件... 第三十讲:extjs4.0的desktop使用讲解
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) ... 第三十讲:extjs4.0的desktop使用讲解
Alien::Web::ExtJS::V3 - ExtJS 3.x 源的 Perl 发行版 版本 ExtJS v3.4.11 (GPL) 概要 use Alien::Web::ExtJS::V3 '3.4.11'; my $dir = Alien::Web::ExtJS::V3->dir; print "ExtJS sources are installed in: $dir\...
Extjs4学习指南21集无代码 extjs网上商城项目 ExtJs视频教程 google调试extjs视频 从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs,永久有效,所有视频解压密码相同,在文档中有写,如有问题请及时...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219726
ExtJS快速入门--传智播客--蔡世友
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子