extjs学习二TabPanel
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>?
效果如图：
