1)、动态添加TabPanel标签
效果图
[img]http://dl2.iteye.com/upload/attachment/0087/3623/63f28aa2-fa06-3b5a-8dff-1163f1830325.png[/img]
js代码:
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,
frame:true,
items:[{
title:'autoLoad为html简单页面演示',
html:'原来就有的标签页面',
autoLoad:{url:'tab1.htm',scripts:true}
}]
});
var index = 0;
Ext.get("newTab").on("click",function(){
tabsDemo.add({
title:'new tab',
id:'newtab'+index,
html:"newtab标签页面",
closable:true
});
tabsDemo.setActiveTab("newtab"+index);//设置新添加的标签为激活标签
index++;
});
})
html代码:
<body>
<div>
<a id="newTab" href="javascript:void(0)">添加新标签页</a>
</div>
</body>
简要说明:
其实添加的话,只要add()方法就可以了,但是我们还要激活这个新的标签页,就必须setActiveTab(newtab的索引或id),
关键就是我们不好判断这个索引,所以只好设置个递增的全局变量index来给newtab取名,
这样我们也就能准确的获取新的不重复的newtab了,也就容易激活了
2)、对上面的例子进行稍微修改
效果图:
[img]http://dl2.iteye.com/upload/attachment/0087/3640/2691b582-5f5d-3cb5-8845-881136206466.png[/img]
js代码:
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
// resizeTabs:true,//宽度能自动变化,但是会影响标题的显示
activeTab:0,
height:200,
enableTabScroll:true,//挤的时候能够滚动收缩
width:200,
frame:true,
items:[{
title:'页面演示',
html:'原来就有的标签页面',
}]
});
var index = 0;
function addTabs(){
tabsDemo.add({
title:'new tab',
id:'newtab'+index,
html:"newtab标签页面"+index,
closable:true
});
tabsDemo.setActiveTab("newtab"+index);//设置新添加的标签为激活标签
index++;
};
//设置一个按钮(上面的是一个链接)
new Ext.Button({
text:'添加新标签页',
handler:addTabs
}).render(document.body,"addBtn");
})
html代码:
<body>
<div>
<div id="addBtn"></div>
</div>
</body>
- 浏览: 15929 次
- 性别:
- 来自: 北京
相关推荐
竖向标签TabPanel-------------------------------------------------
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
extjs4.2.1 tabPanel刷新及关闭标签
EXT的扩展控件,可以实现页签面板的拖动效果
treepanel 和 tabpanel 合在一起使用,可直接使用
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
ext的tabpanel的激活与注意事项,激活的代码实现
1、Ext.TabPanel简单使用 代码:
tapestry4.02中封装ext的TabPanel组件
TabPanel的使用,添加tab,加载页面,添加事件
2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之...
NULL 博文链接:https://icyfire.iteye.com/blog/412574
6.3. 脑袋上有几个标签的tabPanel 6.4. 让布局复杂一点儿 6.5. 向诸位介绍一下各具特色的布局 6.5.1. accordion就是QQ那样的伸缩菜单 6.5.2. CardLayout?其实就是Wizard啦。 6.5.3. 呼呼,TableLayout就是合并行,...
动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步是 62 模板(Templates)起步 62 第一步 您的HTML模板 62 第二步,将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下...
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
博文链接:https://jfp.iteye.com/blog/178889
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框