- 浏览: 825735 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,
对应面板布局(layout)配置项的名称为card。
该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,
这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem,
因为一次只能显示一个子面板,所以切换子面板的唯一途径就是调用setActiveItem方法,
它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制,
导航逻辑需要开发人员自己实现。Ext.layout.CardLayout主要方法如表
所示
方法名
说明
setActiveItem( String/Number item ) : void
根据子面板id或索引切换当前显示的子面板
[复制到剪贴板]CODE:
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'card',
activeItem : 0, //设置默认显示第一个子面板
title:'Ext.layout.CardLayout布局示例',
frame:true, //渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : { //设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px' //设置面板体的背景色
},
items: [
{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},
{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
}
,
{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}
],
buttons:[
{
text : '上一页',
handler : changePage
},
{
text : '下一页',
handler : changePage
}
]
})
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
});
</script>
代码
演示了CardLayout卡片式布局的使用方式,
这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示,
其中changePage函数的用途是计算点击上一页或下一页之后将要显示的子面板id,
然后将该id传入到setActiveItem方法中实现子面板的切换。
发表评论
-
extjs在IE报对象不支持此属性或方法
2010-10-06 13:28 2598ExtJS在Firefox里面显示正常,但是用IE打开的时候报 ... -
Ext.grid.EditorGridPanel
2010-10-06 11:38 1577<HTML> <HEAD> ... -
国内首个基于Ext开发开源企业级框架,免费下载!!
2010-07-02 19:47 1782http://www.17ext.com/showforum- ... -
Ext.form.*使用技巧
2010-05-03 12:20 1100设置表单控件为只读: setFieldRead ... -
Ext JS高级插件开发教程
2010-05-03 12:19 1724当创建一个跨浏览器 ... -
项目中常使用的Ext插件
2010-05-03 12:12 1944http://bbs.ajaxjs.com/viewthrea ... -
Ext.ux.DataDrop.js
2010-05-03 12:10 1042http://code.google.com/p/ext-ux ... -
ExtJs 中 xtype 与组件类的对应表
2010-04-26 12:25 2398原文地址:http://blog.sina ... -
iframe in a tab panal
2010-04-11 13:25 1233http://www.extjs.com/forum/show ... -
ext中autoLoad页面中js的问题记录
2010-04-11 12:33 14981.增加script属性,如: var n = this.ad ... -
EXT card布局
2010-01-25 17:17 1553Ext.onReady(function(){ /// ... -
EXT window中加入照片
2010-01-25 17:15 1181Ext.onReady(function(){ ... -
Ext的Card布局示例
2010-01-25 17:14 1222//这个代码就有点通用性了 var navH ... -
实现Ext.TabPanel中tab内容的更新
2010-01-25 13:19 3059Ext.TabPanel中,如果一个tab项使用了autoLo ... -
Ext.TabPanel中autoLoad实现页面内容加载
2010-01-25 13:18 3977Ext.TabPanel中autoLoad属性可以实现异步加载 ... -
extjs中TabPanel中tab引用页面刷新导致这个页面刷新的问题
2010-01-25 13:16 5547Ext.getCmp('maintab').getActive ... -
SSH+Extjs分页小例子
2010-01-25 13:13 2259刚学,只做了简单的分 ... -
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的
2010-01-24 23:07 3733Ext.QuickTips QuickTips代码示例:只需 ... -
程序设置Extjs树中CheckBox的选中和取消选中设置
2010-01-22 14:11 4363在Extjs中treepanel中树节点为checkbox类的 ... -
Ext tree的checkbox取值问题
2010-01-20 17:22 2085我把TreePanel的id设为"tree_me&q ...
相关推荐
发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据:不能定义对象名...
ExtJS2.0一共包含十种布局,常用的布局有border 、 column 、 fit 、 form 、 card 、 tabel等布局
EXT form示例 absolut布局 card 布局 form布局 等等等等。学习EXT的好帮手
EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件(表格) EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面...
9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 标签面板的构成及其运行流程:ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签...
ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...
16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)...
5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数...
面板与布局,包括Tab面板组件、Carousel组件、NavigationView组件,以及盒布局、Fit布局和Card布局等各种常见布局;表单和表单域组件,包括各种特殊输入组件、单选框与复选框、选取框组件、日期选择组件、滚动条组件...
9、ExtJS布局模式-Card、Anchor、Absolute( r! k$ G/ Q, u! c' U 11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 {, o8 W1 s! I6 ^3 k 13、ExtJS之Ext常用函数(二)' ...
……….33 5.7 Card布局……….……………………………………………………………………………………………...……24 5.8 Table布局及其它布局……….……………………………………………………………………...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, ...