- 浏览: 1418417 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (409)
- Java (48)
- Spring (29)
- struts2 (17)
- hibernate (4)
- 设计模式 (24)
- jbpm (1)
- JavaScript (5)
- 统计报表 (7)
- ExtJS_3.0 (35)
- struts1 (1)
- 分析设计 (3)
- Flex3 (24)
- UML (2)
- 数据库 (18)
- PowerDesigner (2)
- 应用服务器 (3)
- WebService (5)
- ActiveMQ_5.3.2 (6)
- Java通信技术 (11)
- GWT (6)
- OSGi (15)
- android (11)
- liferay6.0.6 (13)
- jquery (13)
- Linux (3)
- java.util.concurrent (16)
- guava (9)
- 开发模式 (1)
- 大数据 (2)
- 互联网金融 (4)
- treegrid-3.0 (7)
- 分布式 (8)
- GO语言 (4)
- maven (1)
- 缓存技术 (6)
- 其他 (2)
- 前端页面 (1)
- heasy (1)
- spring cloud(F版) (21)
- springboot (12)
- springmvc (5)
- mybatis (3)
- dubbo (1)
- 物联网 (0)
最新评论
-
raymond.chen:
谢谢您的分享
使用Ngrok解决通过外网访问内网web应用 -
wangyudong:
速度有点慢,不过在也找到了一个开源的holer,配置一个key ...
使用Ngrok解决通过外网访问内网web应用 -
a1006458222:
...
Axis2的部署和应用 -
偷师来了:
不好意思 这样的博客我觉得就灭有必要分享出来了 命令大家都会看 ...
Consul框架介绍 -
lliiqiang:
怎么直接删除文件夹啊?固定的几个文件可以删除,不固定的呢?需要 ...
Flex AIR —— 文件读写
TabPanel不显示面板的标题和头部工具条。
1、主要配置项:
activeTab:初始激活的tab,索引或者id值,默认为none
autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。
当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。
deferredRender:是否延迟渲染,默认为true。
autoTabSelector:默认为'div.x-tab'。
resizeTabs:是否可以改变tab的尺寸,默认为false。
minTabWidth:tab的最小宽度,默认为30。
tabWidth:每个新增加的tab宽度,默认为120。
tabTip:tab的提示信息
tabPosition:tab位置,可选值有top、bottom,默认为top。
enableTabScroll:是否允许Tab溢出时可以滚动,默认为false。
closable:tab是否可关闭,默认为false
scrollDuration:每次的滚动时长,默认为0.35毫秒。
scrollIncrement:每次的滚动步长,默认为100像素。
wheelIncrement:每次鼠标滑轮的滚动步长,默认为20像素。
2、主要方法:
activate( String/Panel tab )
getActiveTab():获取当前活动的tab
get( String/Number key ):根据组件id或者索引获取组件
getItem(String id):根据tab id获取tab
setActiveTab( String/Number item )
remove( Component/String component, [Boolean autoDestroy] )
removeAll( [Boolean autoDestroy] )
3、范例
new Ext.TabPanel({ id: "mainTab", renderTo: "div1", width: 500, height: 300, activeTab: 0, defaults: { autoScroll: true, autoHeight:true, style: "padding:5" }, items:[ {title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"}, {title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"}, {title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"}, {title:"event", iconCls:"save", listeners:{activate:activateHandler}} ], enableTabScroll: true }); function activateHandler(tab){ //alert(tab.title); } var index = 0; function addTab(){ var tabs = Ext.getCmp("mainTab"); var t = tabs.getItem("tab"+index); if(t) tabs.remove(t); tabs.add({ id: "tab" + (++index), title: "NewTab" + index, html: "new tab" + index, closable: true }).show(); } //按钮渲染到div1元素之前 new Ext.Button({ text:"add tab", handler:addTab, iconCls:"add" }).render(document.body, "div1");
在使用TabPanel时需要注意:
1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问选项卡时,该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时,谨记将该配置项设置为false。
2、在FormPanel中使用TabPanel,如果在TabPanel中不定义deferredRender的值为false,那么,当你使用Load方法为Form加载数据,或使用setValue为没有激活过的Panel的控件赋值时,将会发生错误。原因是,在默认设置下deferredRender为true,TabPanel并不会渲染所有Panel上的控件,只有在该Panel被激活时才渲染控件,所以当你为这些控件设置数据时,将会找不到这些控件,会出现错误。因而,在FormPanel中使用TabPanel,一定要在TabPanel中设置deferredRender的值为false,强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。
应用范例代码片段:
//关闭tab项
var tabpanel = Ext.getCmp("deskTabPanel");
if(tabpanel!=null && tabpanel.getActiveTab()!=null){
tabpanel.remove(tabpanel.getActiveTab());
}
//隐藏tab项
Ext.getCmp("deskTabPanel").hideTabStripItem(0);
//激活tab项
Ext.getCmp("deskTabPanel").setActiveTab("noticeAttachmentGrid");
发表评论
-
表单组件_v2.2(四)
2011-01-30 15:51 20341、下拉框组件支持中间模糊查询 function liste ... -
表单组件_v2.2(三)
2010-10-07 22:21 2753本范例展示如何使用表单的各种组件。 下拉框组件展示了5种使用 ... -
表单组件_v2.2(二)
2010-10-07 21:57 18091、Ext.form.Hidden 2、Ex ... -
表单组件_v2.2(一)
2010-10-07 21:48 21241、Ext.form.Action ... -
属性表格:Ext.grid.PropertyGrid
2010-05-24 21:03 96371、Ext.grid.PropertyGrid 主要 ... -
可编辑表格:Ext.grid.EditorGridPanel
2010-05-24 20:59 215721、Ext.grid.EditorGridPanel ... -
表格数据分组:Ext.grid.GroupingView
2010-05-24 20:46 172061、Ext.grid.GroupingView ... -
普通表格范例
2010-05-24 16:14 2910主要演示以下功能: 包含复选框列、行号列 自定 ... -
普通表格:Ext.grid.GridPanel
2010-05-24 15:48 11597表格相关组件总图: ... -
树组件:异步树范例
2010-05-21 15:34 26631、范例主要展示以下功能点: 树节点通过请求服务 ... -
树组件:普通树范例
2010-05-21 15:26 19661、范例包含以下功能点: 节点包含复选框 ... -
树组件:主要配置项、属性、方法
2010-05-21 15:01 39191、Ext.tree.TreePanel ... -
Ext.Viewport
2010-05-18 02:00 20287Ext.Viewport代表浏览器窗口的整个显示区域,将doc ... -
垂直盒布局(VBoxLayout)
2010-05-18 01:54 5535Ext.layout.VBoxLayout扩展自Ext.lay ... -
水平盒布局(HBoxLayout)
2010-05-18 01:51 7675Ext.layout.HBoxLayout扩展自Ext.lay ... -
边框布局(BorderLayout)
2010-05-18 01:48 4713Ext.layout.BorderLayout扩展自Ext.l ... -
表格布局(TableLayout)
2010-05-18 01:46 3879Ext.layout.TableLayout扩展自Ext.la ... -
列布局(ColumnLayout)
2010-05-18 01:43 3726Ext.layout.ColumnLayout扩展自Ext.l ... -
表单布局(FormLayout)
2010-05-18 01:40 5216Ext.layout.FormLayout是为表单特殊设计的布 ... -
绝对位置布局(AbsoluteLayout)
2010-05-18 01:34 3044Ext.layout.AbsoluteLayout扩展自Ext ...
相关推荐
1、Ext.TabPanel简单使用 代码:
treepanel 和 tabpanel 合在一起使用,可直接使用
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data....
Ext.Viewport、 Ext.TabPanel布局
4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data....
9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 13. ExtJs2.0学习系列...
ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的
items: new Ext.TabPanel({ el: 'hello-tabs', autoTabs:true, activeTab:0, deferredRender:false, border:false }), buttons: [{ text:'Submit', disabled:true },{ text: 'Close', handler: ...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() ...
2.2.5 Ext.TabPanel 24 2.3 本章小结 27 第3章 表格控件 28 3.1 Grid的特性简介 28 3.2 制作一个简单的Grid 29 3.3 Grid常用功能详解 32 3.3.1 部分属性功能 32 3.3.2 自主决定每列的宽度 33 3.3.3 让Grid...
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
API 参考 API 参考里面详细描述了所有能在 Ext 类库里面找到的类和组件。最常用的类有: Ext.Element Ext.BorderLayout Ext.DomHelper Ext.TabPanel Ext.UpdateManager
左侧的功能树 代码如下: Ext.define(“AM.view.SystemTree”, { extend : ‘Ext.tree.Panel’, alias : ‘widget.systemTree’, rootVisible : false,// 不展示ROOT displayField : ‘text’, // title:’物流运输...
ext的tabpanel的激活与注意事项,激活的代码实现
第二十七章:选项卡面板——Ext.TabPanel 214 一、关于魅族和M8 214 二、TabPanel概述 214 三、TabPanel标签操作 216 四、标签弹出菜单 217 五、小结 220 第二十八章:Viewport类 221 一、概述 221 二、Viewport的...