ExtJs2.0学习系列(9)--Ext.TabPanel之第一式

大家好,接着介绍extjs的基础吧,Tabpanel组件大家喜欢吧!

(暂放首页2个小时.)

照旧,看个最简单的先,后面再详细说复杂的!

效果图片:

js代码:

Ext.onReady(function(){

     var tabsDemo=newExt.TabPanel({

            renderTo:Ext.getBody(),

            width:300,

            activeTab:0,//当前激活标签
frame:true,

            items:[{

                      contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
title:"浪曦",

                      closable:true//是否现实关闭按钮,默认为false
},{

                      contentEl:"tabTwo",

                      title:"博客园兄弟们可好"

            }]

     });

});

html代码:

<bodystyle="margin:10px;">
<div>
<divid="tabOne"class="x-hide-display">i am tabOne!</div>
<divid="tabTwo"class="x-hide-display">i am tabTwo!</div>
</div>
</body>

在这里例举几个参数:

//几个相关参数
1.tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果

经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).

就是:使用iframe作为tab的标签页内容.
1.用iframe加载其他完整页面的tabpanel.

效果图:

点击链接"换成博客园",

html代码:

<bodystyle="margin:10px;">
<div>
<ahref="javascript:void(0)"onclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">换成博客园</a>
<iframeid="mainFrame"name="mainFrame"src="http://www.baidu.com"frameborder="0"height="100%"width="100%"style="overflow:hidden;"></iframe>
</div>
</body>

js代码:

Ext.onReady(function(){
vartabsDemo=newExt.TabPanel({

            renderTo:Ext.getBody(),

            activeTab:0,

            height:700,//当用viewport布局时,这个height可以省去
frame:true,

            items:[{

                      contentEl:"mainFrame",

                      tabTip:"fengjian",

                      title:"加载页面的标签页",

                      closable:true

            }]

     });

});

今天的内容简单.就暂且说做到了这里,下篇中我们说说tabpanel的滚动标签和动态添加标签的tabpanel!

敬请期待!

ExtJs2.0学习系列(9)--Ext.TabPanel之第一式相关推荐

ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(4)--Ext.FormPanel之第一式上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormP ...
ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...
ExtJs2.0学习系列(10)--Ext.TabPanel之第二式
上一篇种我们简单的了解了下tabpanel 下面我们要介绍的是,如何动态的添加标签页! 2.动态添加tabpanel的标签页效果图: 点击"添加新标签页",会添加一个标签页,而 ...
ExtJs2.0学习系列(3)--Ext.Window
ExtJs2.0学习系列(3)--Ext.Window 前言:关于extjs,为了照顾还没有入门的新手,我给一点提示,有一个网站浪曦视频在线里面请了个老师录制了extjs的介绍入门的视频,环境可能不同 ...
ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.F ...
ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(5)--Ext.FormPanel之第二式上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox ...
ExtJs2.0学习系列(1)--Ext.MessageBox
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(1)--Ext.MessageBox 大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个 ...
ExtJs2.0学习系列(11)--Ext.XTemplate
XTemplate是Extjs里面的模板组件. 下面我们看个最简单的例子. 效果图: js代码: Ext.onReady(function(){ //数据源 var data={ ...

ExtJs2.0学习系列(9)--Ext.TabPanel之第一式

ExtJs2.0学习系列(9)--Ext.TabPanel之第一式相关推荐

最新文章

热门文章