效果图:
[img]http://dl2.iteye.com/upload/attachment/0087/3572/9a8554ae-eae1-31e2-b66c-75648863e966.png[/img]
js代码:
Ext.onReady(function(){
var tabDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
width:300,
activeTab:0,//当前激活标签
frame:true,
closable:true,
items:[{
contentEl:'tabOne',//标签页的页面元素id
title:'嘎嘎',
closable:true//是否实现关闭按钮,默认false
},{
contentEl:'tabTwo',
title:'你们好啊,小伙伴们',
closable:true,
}]
})
})
html代码:
<body>
<div>
<div id="tabOne" class="x-hide-display">我是tabOne</div>
<div id="tabTwo" class="x-hide-display">我是tabTwo</div>
</div>
</body>
<!--注意class类型,设为x-hide-display,以正常显示-->
//几个相关参数
1.tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果
在一个选项卡中加载一个完整页面
使用iframe作为tab的标签页内容
效果图:
[img]http://dl2.iteye.com/upload/attachment/0087/3598/ee219b8a-d77e-3696-9b9f-72f91a572af1.png[/img]
点击连接-->"我的博客"
[img]http://dl2.iteye.com/upload/attachment/0087/3600/3545ee5e-9c46-3fb7-9a12-4732da0c9cc5.png[/img]
js代码如下:
Ext.onReady(function(){
Ext.QuickTips.init();
var tabDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,//当用viewport布局时,height可以省去
frame:true,
items:[{
contentEl:'mainFrame',
title:'加载页面的标签页',
closable:true
}]
})
})
html代码如下:
<body>
<div>
<a href="javascript:void(0)"
onclick="parent.frames['mainFrame'].location='http://wlxt-8436.iteye.com/'"
>我的博客</a>
<iframe id="mainFrame" name="mainFrame" src="http://www.163.com/"
frameborder='0' height='100%'
width="100%" style="overflow:hidden"></iframe>
</div>
</body>
- 浏览: 17016 次
- 性别:
- 来自: 北京
相关推荐
通过以上步骤,我们不仅学习了如何在ExtJS 4.2中根据不同数值设置TabPanel中GridPanel行的背景颜色,而且还了解了如何利用CSS和JavaScript结合来实现灵活多变的界面效果。这种方法不仅适用于数值类型的数据,还可以...
ExtJs是一个基于JavaScript的框架,用于构建前端交互式的Web应用程序。...学习和掌握Ext.Panel、Ext.TabPanel和Ext.Viewport的使用方法,可以帮助我们更好地设计和实现富有交互性和视觉吸引力的Web应用程序界面。
- **Ext.TabPanel篇**:`Ext.TabPanel`是一个容器组件,用于创建带有标签页的用户界面,可以在各个标签页之间切换显示不同的内容。 - **Function扩展篇**:这部分内容涉及对JavaScript原生函数的扩展,比如增加...
1. **build**:此目录包含用于构建Ext JS项目的工具和配置文件。 2. **docs**:提供详尽的API文档,帮助开发者了解和掌握Ext JS的各种类和方法。 3. **examples**:示例代码集合,涵盖Ext JS常用组件和功能的使用...
EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始...
1. 闪烁吧!看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果? 1.4. 为什么自己按照例子写的代码,显示出来总找不到图片 1.5. ...
标题“ext tab”可能指的是在Web开发中使用...如果你想要深入了解EXT JS的TabPanel,你可能需要学习EXT JS的基本概念,熟悉其组件模型和API,以及如何通过JavaScript和服务器端语言(如Java)协同工作来构建动态应用。
### Ext3.0 最经典的学习教程 #### 一、引言 Ext3.0是一款流行的JavaScript库,主要用于构建Ajax驱动的交互式Web应用程序。这款框架以其丰富的组件集合、灵活的布局选项以及强大的功能而闻名。《Ext3.0最经典的学习...
var tabPanel = new Ext.TabPanel({ renderTo: Ext.getBody(), activeTab: 0, draggableTabs: true, items: [ { title: 'Tab 1', html: 'Content 1' }, { title: 'Tab 2', html: 'Content 2' } ] }); ``` 在...
EXT JS提供了丰富的UI组件,如GridPanel(表格),FormPanel(表单),Window(弹出窗口),TabPanel(选项卡)等,这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性,如大小、颜色、样式等,并...
### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序...对于初学者来说,逐步学习并实践每个组件的特性和用法,是成为一个合格的Ext开发者的关键步骤。
1. TreePanel:EXT的TreePanel允许开发者创建可交互的树状结构,通常用于展示层级关系的数据,如目录结构、组织架构等。它可以动态加载数据,支持节点的展开和折叠,以及各种定制化的操作事件。 2. GridPanel:EXT...
### ext学习之路:深入解析ExtJS 4.20的核心组件与应用 #### 构建与源码(build & source) 在深入探索ExtJS 4.20之前,理解其构建方式与源码结构至关重要。ExtJS的构建过程通常涉及将源代码编译成适合生产环境的...
1. **组件库增强**:EXT2.0扩展了原有的组件库,增加了如树形表格、tabpanel、日期选择器等更多实用的UI组件,使得开发者可以构建出更为复杂的Web应用界面。 2. **布局管理**:在布局方面,EXT2.0引入了更灵活的...
除了以上提到的MessageBox和Grid之外,EXT还提供了大量的其他组件,如Form、TabPanel、Tree等,满足多样化的用户界面需求。 #### 使用Ajax Ajax是现代Web应用不可或缺的一部分,它使得页面可以在不重新加载的情况...
4. **Ext.TabPanel**:TabPanel是EXTJS中的一个多标签视图组件,可以包含多个面板,每个面板代表一个独立的页面或视图,用户可以通过标签在不同的内容间切换。 5. **Function 扩展篇**:EXTJS扩展了JavaScript的...
《Ext 3.0 中文文档》是Ext 3.0框架的重要参考资料,对于学习和使用Ext 3.0的开发者来说非常关键。这份文档以中文形式呈现,方便了中文用户理解并掌握该框架的使用方法。文档可能包含了以下主要知识点: 1. **基本...
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....