function myRender(p){
Ext.Msg.alert("提示",p.title+"渲染成功") ;
}
Ext.onReady(function(){
var i = 4 ;
//注意:每个Tab标签只渲染一次
var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),//绑定在body标签上
activeTab: 0,//初始显示第几个Tab页
deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容.默认true
tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.
enableTabScroll: true,//当Tab标签过多时,出现滚动条
items: [{//Tab的个数
title: 'Tab 1',
html: 'A simple tab',
listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发
Ext.Msg.alert("Tab 1","渲染Tab 1成功") ;
}}
},{
title: 'Tab 2',
html: 'Another one',
listeners: {render: myRender}
},{
title: 'Tab 3',
autoLoad: 'test.html',
closable: true,
listeners: {render: myRender}
}],
bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮
text:'添加标签',
handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到).
var id = i ;
tabs.add({//添加一个Tab标签
id: id,
title:'Tab '+i,
closable: true
}) ;
i=i+1;
tabs.setActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签).
}
},{
text:'删除标签',
handler: function(){
var t = tabs.getActiveTab();//获得当前活动标签的引用
if(t.closable){
tabs.remove(t);//删除标签
}else{
Ext.Msg.alert("提示","该标签不能关闭") ;
}
}
}]
});
//把TabPanel组件充满整个body容器.
new Ext.Viewport({
layout: 'fit',
items: tabs
});
});
分享到:
相关推荐
extjs4.2.1 tabPanel刷新及关闭标签
Extjs4.2 设置tabpanel当前活动页签的样式
ExtJS tabPanel实例ExtJS tabPanel实例
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
NULL 博文链接:https://rowen.iteye.com/blog/446163
TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL> 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 ...
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
简化Ext编程的标签库 你可以不用javascript 来使用ext
用Jquery完成了类似于extjs的tabpanel的功能,适合快速快发
1、Ext.TabPanel简单使用 代码:
对ExtJS的TabPanel加载带js的iframe页提供支持 extjs load once提供支持 extjs 面板间消息传递提供支持。。 <br>资源整理自extjs论坛,修正了里面的链接和异常,直接部署到extjs2.1的example底下就可以 ...
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
Extjs实现翻书效果,翻页会有演示效果。
extjs资料extjs资料extjs资料extjs资料extjs资料
NULL 博文链接:https://icyfire.iteye.com/blog/412574