大家好,接着介绍extjs的基础吧,Tabpanel组件大家喜欢吧!
(暂放首页2个小时.)
照旧,看个最简单的先,后面再详细说复杂的!
效果图片:
js代码:
<!---->Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
width:300,
activeTab:0,//当前激活标签
frame:true,
items:[{
contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
title:"***",
closable:true//是否现实关闭按钮,默认为false
},{
contentEl:"tabTwo",
title:"博客园兄弟们可好"
}]
});
});
html代码:
<!----><body style="margin:10px;">
<div>
<div id="tabOne" class="x-hide-display">i am tabOne!</div>
<div id="tabTwo" class="x-hide-display">i am tabTwo!</div>
</div>
</body>
<!--注意class类型,设为x-hide-display,以正常显示-->
在这里例举几个参数:
<!---->//几个相关参数
1.tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果
经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).
就是:使用iframe作为tab的标签页内容.
1.用iframe加载其他完整页面的tabpanel.
效果图:
点击链接"换成博客园",
html代码:
<!----><body style="margin:10px;">
<div>
<a href="javascript:void(0)" onclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">换成博客园</a>
<iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com" frameborder="0" height="100%" width="100%" style="overflow:hidden;"></iframe>
</div>
</body>
js代码:
<!---->Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,//当用viewport布局时,这个height可以省去
frame:true,
items:[{
contentEl:"mainFrame",
tabTip:"fengjian",
title:"加载页面的标签页",
closable:true
}]
});
});
今天的内容简单.就暂且说做到了这里,下篇中我们说说tabpanel的滚动标签和动态添加标签的tabpanel!
敬请期待!
分享到：
相关推荐
在本文中，我们将深入探讨ExtJS中的`Ext.TabPanel`组件，它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图，每个面板都有自己的标题，并且可以通过标签页进行切换。让我们...
Ext.js 是一个强大的JavaScript库，...通过这种方式，你可以逐步学习并掌握Ext.js的使用，创建复杂的交互式Web应用。记住，实践是学习的最佳途径，尝试修改示例，添加更多的功能，你将逐渐成为一名熟练的Ext.js开发者。
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架，具有最新的Javascript标准支持 新的漂亮组件和主题，以创建漂亮的企业应用程序 现代工具链，用于构建优化，高性能，通用的应用程序 用于可视...
Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js
在EXTJS框架中，`Ext.ux.form.LovCombo`是一种自定义组件，它扩展了基本的`Ext.form.field.ComboBox`，提供了更丰富的功能，尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”（即“Look Up Value”...
20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....
ExtJS是一种基于JavaScript的开源富客户端框架，特别适用于构建企业级的Web应用程序。...文档《ExtJs2.0学习系列.doc》应包含了关于这些主题的详细教程和示例，是学习ExtJS 2.0不可或缺的参考资料。
关于ext学习的资料，有些例子 ExtJs2.0学习系列.CHM
从ext官方论坛上下的。 文件名： ext-4.2.1.883.jsb2 对应版本ext-4.2.1.883
从spket IDE 官网下载。 文件名： ext-4.2.1.883.jsb2 对应版本ext-4.2.*版本。spket自动提示ExtJs4，需要ext4.2.1.jsp2文件。
ExtJS 2.0是一款基于JavaScript的开源UI框架，它为构建富客户端Web应用程序提供了丰富的组件库和强大的数据绑定机制。这款精编教程是作者针对ExtJS 2.0版本精心编写的，虽然不是官方印刷版，但在内容的详尽度和实用...
标题中的"ext-7.0.0-gpl.zip"是一个软件扩展或库的压缩包，遵循GPL（GNU General Public License）开源协议。这通常意味着它是一个免费的、可修改的软件，用户可以查看源代码并根据需要进行定制，但必须保留原始许可...
在本文中，我们将深入探讨ExtJS 2.0中的FormPanel组件，并通过具体的示例来了解如何使用不同的组件，如checkbox、radio以及htmleditor。首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的...
在ExtJs框架中，JsonStore是一种非常重要的数据存储器，它专门用来处理和展示JSON格式的数据。本资料主要讲解如何使用JsonStore来加载并显示数据，以创建一个简单的个人信息表格。 首先，为了使用ExtJs框架，我们...
标题中的"ext-4.2.1.883.7z"指的是ExtJS框架的一个特定版本，4.2.1.883，它被压缩成了7z格式的文件。7z是一种高效的文件压缩格式，由7-Zip软件创建，以提供更高的压缩比和更快的解压缩速度。7z文件通常需要使用支持7...
ExtJS 2.0 和 Spket 1.6.11 是两个在Web开发领域中常用的工具，尤其在创建富互联网应用程序（Rich Internet Applications，RIAs）时。这两个工具的结合使用可以极大地提升开发效率和代码质量。 **ExtJS 2.0** ExtJS...
1. **基础篇**: 介绍ExtJS的基本架构和使用环境，讲解如何创建第一个ExtJS应用。 2. **组件篇**: 详述各组件的使用方法，如窗口、面板、按钮等，以及如何自定义组件。 3. **数据篇**: 深入探讨数据模型、数据存储和...
ExtJs2.0学习系列大全 共15个word文档，大部分介绍都在里面了
显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号， 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...