ExtJs2.0学习系列(6)--区域布局之Card Layout

最新推荐文章于 2022-02-20 12:13:57 发布
最新推荐文章于 2022-02-20 12:13:57 发布
阅读量1k 收藏
点赞数
分类专栏： ext 文章标签： extjs layout html stylesheet function xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_h_t/article/details/4938576
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ExtJs2.0学习系列(6)--区域布局之Card布局 </title>
<link type="text/css" href="Ext/resources/css/ext-all.css" rel="stylesheet" />
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript">
  Ext.onReady(function(){
     var panels=new Ext.Panel({
    renderTo:"CardLayout",
    title:"CardLayout Demo",
    width:300,
    height:200,
    layout:"card",
    activeItem:0,
    items:[
    {title:"accordion1",html:"content1"},
    {title:"accordion2",html:"content2"},
    {title:"accordion3",html:"content3"},
    {title:"accordion4",html:"content4"}
    ]
    ,
    buttons:[
    {text:"切换",handler:changeTab}
    ]
  });
 
  var i=1;
  function changeTab()
  {
     panels.getLayout().setActiveItem(i++);
  if(i>2)
  i=0;
  }
  })
</script>
</head>

<body>
<div id="CardLayout"></div>
</body>
</html>

 

实现效果如下：

 

xuxubaby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS 2.0实用简明教程 之Border区域布局
10-29
Border布局由类Ext.layout.BorderLayout定义，布局名称为border。
ExtJS 2.0 实用简明教程之布局概述
01-19
ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到...
java中CardLayout的使用方法
SANDKING2015的博客
06-21 892
import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Card extends JFrame{ /* * JFrame的布局管理器是BorderLayout */ JPanel p;//位于中心区域的面板 ...
ExtJs Card 布局之向导
Rowen
11-13 203
上一步，下一步的类向导，这里用card布局。 [code="java"]Ext.onReady(function () { this.firstPanel = new Ext.Panel({ frame: true, title: '第一个面板', html: '这是第一个面板' }); this.secon...
Extjs4---card布局
网站开发初中级代码参考-转载
09-08 68
这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。 &lt;script type="text/javascript"&gt; Ext.application( { name:'layout_card', launch:function(){ var navigate = ...
EXTJS4自学手册——EXT容器布局（Fit,Card,Border）
wh591344741的专栏
04-20 528
一、Fit布局 说明：容器内的组件占满整个容器 例子： script type="text/javascript"> 在页面加载完成后调用JS代码--> Ext.onReady(function(){ //定义panel组件var panel1 = Ext.create('Ext.panel.Panel',{
ExtJs学习笔记(13)_Card布局
Micheal_NET的技术专栏
05-08 1382
ExtJs学习笔记(13)_Card布局 这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面代码如下:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->DOCTYPE html PUBLIC "-//W3C//DTD X
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
ExtJs2.0学习系列
12-19
ExtJs2.0学习系列ExtJs2.0学习系列
分享 10 个常见的 CSS 页面布局代码片段
前端达人
02-20 6637
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...
三十二、Java图形化界面设计——布局管理器之CardLayout（卡片布局）
热门推荐
liujun13579的专栏
07-23 9万+
卡片布局能够让多个组件共享同一个显示空间，共享空间的组件之间的关系就像一叠牌，组件叠在一起，初始时显示该空间中第一个添加的组件，通过CardLayout类提供的方法可以切换该空间中显示的组件。   1、  CardLayout类的常用构造函数及方法     2、  使用CardLayout类提供的方法可以切换显示该空间中的组件   方法一步骤： （1）      定义使用卡片布
ExtJs 6.0+快速入门之布局详解（Layout）
blueboz的博客
06-11 7324
布局作为最重要的1.ContainerLayout这种布局是ExtJs 中默认的布局 这种布局的一般情况是按照从上到下的堆叠的方式进行堆叠的代码{ title: 'ContainerLayout(默认布局)', /** * layout: 'container',//指定布局为container，这里是可以忽略的值 */ items: [{ height: 100, title
Extjs布局——layout: 'card'
weixin_34417183的博客
12-07 259
先看下此布局的特性： 下面演示一个使用layout: 'card'布局的示例（从API copy过来的）——导航面板（注：导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方法。） //导航 var navigate = function(panel, direction){//panel:导航面板；direction:layout调用的方法...
ext layout 之 card布局 使用示例
xingtianyiyun的专栏
07-27 4923
/*创建window/ function openWin(){       var win =new Ext.Window({           animCollapse :true,           width:320,           height:280,           animateTarget: 'chakan',           constrain
卡片布局（CardLayout）
weixinru4631260的博客
05-02 3148
在一些特定的条件下可能会用到卡片布局，虽然它不是一种特别重要的布局，但是在完成一些特殊的功能时比较好用。比如模拟幻灯片的例子，单击不同的按钮，出现相应的变换图片    卡片布局管理器中的组件就像是幻灯片中的图片，每次只能看一张，但单击不同按钮会看到不同的图片    卡片布局可以添加多个组件，但同一时刻只能看见其中一个组件    CardLayout类的构造方法    public Card
CardLayout 的用法和认识
qq_33000109的博客
03-24 2230
CardLayout的效果和它的名字一样。像是一叠卡片叠在一起只能看到第一张卡片。当我们想要看到那张卡片就把他取出来放在最上面。 由此CardLayout布局中我们把多个界面添加到CardLayout中并编号。 如： JPanel jp=new JPanel(new CardLayout())   //设置jp面板为卡片布局 jp_jl1=new JLabel(new Im
Ext Js 3.2 卡片式布局--CardLayout应用
张波的技术积累
11-27 3846
1：Ext.layout.CardLayout的介绍      CardLayout可以看作是一叠卡片，从上面看起来就像是一张卡片，可以把中间的卡片抽出来，放到最上面，可每次只能看到一张卡片，它能够 满足安装向导、Tab选项卡等应用面板显示的需求。   代码：   <% String path = request.getContextPath(); String basePath
JAVA CardLayout布局
abc1498880402的博客
06-23 2923
3、CardLayout布局      使用CardLayout的容器可以容纳名个组件，这些组件被层叠放入容器中，最先加入容器的是第一张(在最上面)，依次向下排序。使用该布局的特点是，同一时刻容器只能从这些组件中选出一个来显示，就像叠“扑克牌”，每次只能显示其中的一张，这个被显示的组件将占据所有的容器空间。      假设有一个容器con,  那么，使用CardLayout的一般步骤如下。  创建...
extjs-4.1.1安装
最新发布
11-02
extjs-4.1.1是一个用于构建富客户端应用程序的JavaScript框架。下面是安装extjs-4.1.1的步骤： 1. 首先，从官方网站（https://www.sencha.com/products/extjs/）下载extjs-4.1.1的压缩文件。 2. 解压下载的文件到项目文件夹中的一个合适的位置。 3. 在你的HTML文件中引入extjs-4.1.1的库文件。可以通过以下代码引入： ``` <script src="path/to/extjs-4.1.1/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="path/to/extjs-4.1.1/resources/css/ext-all.css"> ``` 确保替换"path/to/extjs-4.1.1"为实际的extjs-4.1.1文件夹路径。 4. 初始化extjs-4.1.1。在你的JavaScript代码中，添加以下代码： ``` Ext.onReady(function() { // 在此编写你的extjs代码 }); ``` 5. 现在你可以开始使用extjs-4.1.1开发你的应用程序了。在onReady函数中添加你的extjs代码，例如创建窗口、表单、按钮等。 总之，安装extjs-4.1.1只需要下载框架文件、引入库文件，并在JavaScript代码中初始化extjs。这样，你就可以开始使用extjs-4.1.1开发功能丰富的客户端应用程序了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值