tab面板是布局中用的比较多的。
引入ext必须的3个文件:
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script>
tab.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="ux/css/TabScrollerMenu.css" />
<script type="text/javascript" src="tab.js"></script>
</head>
<body>
</body>
</html>
tab.js:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ux/');
Ext.onReady(function(){
var tabscrollermenu = Ext.create('Ext.ux.TabScrollerMenu', {
ptype: 'tabscrollermenu',
maxText: 15,
pageSize: 10
});
var tabs = Ext.create('Ext.tab.Panel', {
title: '选项卡面板b',
width: 400,
height: 300,
collapsible: true,
activeTab: 0,
plugins: [tabscrollermenu],
items: [{
itemId: 'index1',
title: '选项卡 11',
closable: true,
autoLoad: {
url: 'tabFrame.jsp?url=index1.html'
}
}, {
title: '选项卡2',
closable: true,
autoLoad: {
url: 'tabFrame.jsp?url=index2.html'
}
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: '添加选项卡',
scope: this,
handler: function(){
var tab = tabs.add({
title: '选项卡' + (tabs.items.length + 1),
closable: true,
autoLoad: {
url: 'tabFrame.jsp?url=index2.html'
}
});
tabs.setActiveTab(tab);
},
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: '删除选项卡',
scope: this,
handler: function(){
var tab = tabs.getActiveTab();
tabs.remove(tab);
},
renderTo: Ext.getBody()
});
});
ux在examples下面可以找到。
index1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Insert title here</title>
<script type="text/javascript">
function show(){
var val = document.getElementById("txtIndex").value;
alert(val);
}
</script>
</head>
<body>
index1页面<input id="txtIndex" type="text" value="abab"/><input type="button" value="显示" onclick="show()"/>
</body>
</html>
index2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Insert title here</title>
<script type="text/javascript">
function show(){
var val = document.getElementById("txtIndex").value;
alert(val);
}
</script>
</head>
<body>
index2页面<input id="txtIndex" type="text" value="index2"/><input type="button" value="显示" onclick="show()"/>
</body>
</html>
tabFrame.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<iframe src="<%=request.getParameter("url") %>" width="100%" height="100%" frameborder="0"></iframe>
效果如图:
- 大小: 16.2 KB
分享到:
相关推荐
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
ExtJS tabPanel实例ExtJS tabPanel实例
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
extjs4.2.1 tabPanel刷新及关闭标签
NULL 博文链接:https://rowen.iteye.com/blog/446163
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL> 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 ...
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 2.0学习笔记(Ext.Element API总结) ...
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 2.0学习笔记(Ext.Element API总结) ...
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
10. ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 13. ExtJs2.0学习系列(13)--Ext.TreePanel之第二式 14. ExtJs2.0学习...
ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记...
NULL 博文链接:https://icyfire.iteye.com/blog/412574
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
1、Ext.TabPanel简单使用 代码:
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框
二、Extjs命名空间的定义 17 三、Extjs OOP 17 四、配置(config)选项 19 五、Ext.apply()和Ext.applyIf() 20 六、小结 21 第四章:消息框 22 一、话说消息框 22 二、最简单的消息框——提示框 23 三、输入框 23 四、...
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。