ExtJs布局之Card
<!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的更多相关文章
- Extjs布局——layout: 'card'
先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...
- ExtJS布局控件
Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...
- ExtJS 布局-Card 布局(Card layout)
更新记录: 2022年6月1日 开始. 2022年6月6日 发布. 1.说明 卡片布局类似牌堆,每次只有一个子组件可见,子组件几乎填满了整个容器.卡片布局常用于向导(Wizard)和选项卡(Tabs) ...
- ExtJs布局详解
序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...
- Extjs布局
今天我来总结一下extjs下面的各种布局,不仅是为了给自己做笔记,同时,也希望让刚刚接触extjs的朋友们快速的了解下,大神就不用看了.废话不多说,开始布局的讲解. (以下代码都可以直接在javasc ...
- ExtJS布局方式(layout)图文详解
Auto默认布局 不给下级组件指定大小和位置 Absolute绝对布局 可使用坐标(x.y)进行布局 Accordion手风琴布局 实现Accordion效果的布局,也可叫可折叠布局.也就是说使用该布 ...
- ExtJs布局大全
1.Fit 布局 在Fit 布局中,子元素将自动填满整个父容器.注意:在fit 布局下,对其子元素设置宽度是无效的.如果在fit 布局中放置了多个组件,则只会显示第一个子元素.在Fit 布局中,子元素 ...
- ExtJs布局之tabPanel
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- ExtJs布局之viewport
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
随机推荐
- SQL开发技巧(二) 【转】感觉他写的很好
本文转自: http://www.cnblogs.com/marvin/p/DevelopSQLSkill_2.html 本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列 ...
- C#中的Attribute
最近用到了,所以静下心来找些资料看了一下,终于把这东西搞清楚了. 一.什么是Attribute 先看下面的三段代码: 1.自定义Attribute类:VersionAttribute [Attribu ...
- ios 中使用SBJson拼接和解析json
1.ios解析json 使用开源json包,项目地址: http://stig.github.com/json-framework/ NSData * responseData = [res ...
- “我爱淘”冲刺阶段Scrum站立会议7
完成任务: 大事不好,今天的任务还没有完成,没有通过xml文件通过服务器显示到软件中. 计划任务: 实现通过服务器将xml文件中的数据显示到软件中. 遇到问题: 服务器已经配好,并且解析xml文件的代 ...
- VS2013 help viewer搜索结果显示源码以及桌面独立运行help viewer
安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensio ...
- ubuntu 下root用户无法访问声音设备的解决方案
原因:root用户没有对pulsaudio的访问权限,而且pulsaudio默认是不能在root下自动启动解决办法: 一.修改自动启动:编辑 gedit /etc/default/pulseaudio ...
- 添加swap分区
1.创建swap文件,可以单独划分一个分区出来,也可以直接生成一个swap文件 dd if=/dev/zero of=swap bs=1M count=1024 2.格式化为swap文件 mkswap ...
- 对中级Linux用户有用的20个命令
1. 命令: Find 搜索指定目录下的文件,从开始于父目录,然后搜索子目录. 注意: -name‘选项是搜索大小写敏感.可以使用-iname‘选项,这样在搜索中可以忽略大小写.(*是通配符,可以搜索 ...
- 关于EF查询的性能
现象:前台grid发送ajax请求,通过谷歌devtool发现“waiting”时间高达23s(1500条数据);可见服务器端代码处理花费时间很长: 解决:分析代码,有两处代码注释掉后速度提升明显 / ...
- line-height:150%和line-height:1.5的区别
base都是font-size,不管是继承的,还是自身的. "%":为继承父元素的距离 "无单位":计算各自的距离. 看demo1: 样式 body{ font ...