Ext js tabpanel的使用
實現的功能就是當點擊左邊的“增加Tab”菜單后會不斷的增加新的tab頁，再次記錄，以便后用！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<title>Insert title here</title>
</head>
<body>
??? <script>
??? ??? var index = 0;PHP中Array的hash函數實現
??? ??? var tabPanel = new Ext.TabPanel({
??? ??? ??? region:"center",//將此tabpanel放到viewport的中間區域去
??? ??? ??? closable:true,//tab頁上加上關閉圖標
??? ??? ??? enableTabScroll:true,//當頁面顯示的tab頁過多超過顯示區域后，會自動出現箭頭隱藏之前的tab頁
??? ??? ??? items:[{title:"面板1",contentEl:"tab1",closable:true},{title:"面板2",contentEl:"tab2"}]
??? ??? });
??? ??? Ext.onReady(
??? ??? function(){
??? ??? ??? new Ext.Viewport({
??? ??? ??? ??? enableTabScroll:true,
??? ??? ??? ??? layout:"border",??? //border布局??? ??? ???
??? ??? ??? ??? items:[
??? ??? ??? ??? {title:"面板",region:"north",height:50,html:"后臺管理"},
??? ??? ??? ??? {title:"菜單",region:"west",width:200,collapsible:true,
??? ??? ??? ??? html:"<a href='javascript:addTab()'>增加Tab</a>"},
??? ??? ??? ??? tabPanel
??? ??? ??? ??? ]
??? ??? ??? });???
??? ??? }
??? ??? );
??? ??? function addTab(){??? ??? ???
??? ??? ??? tabPanel.add({
??? ??? ??? ??? title:"tab"+index,
??? ??? ??? ??? id:"tab"+index,
??? ??? ??? ??? html:"這里是tab"+index
??? ??? ??? });
??? ??? ??? tabPanel.setActiveTab("tab"+index);//激活新增加的tab頁
??? ??? ??? index++;
??? ??? }???
??? ???
??? </script>
??? <div id="tab1">這里是默認的tab1</div>
??? <div id="tab2">這里是默認的tab2</div>
???
</body>
轉載于:https://www.cnblogs.com/ctou45/archive/2011/05/11/2042945.html
總結
以上是生活随笔為你收集整理的Ext js tabpanel的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Magento怎么升级？
- 下一篇： 【dp】CF17C. Balance