ExtJS创建选项卡详解编程语言

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 

 html xmlns="http://www.w3.org/1999/xhtml" 

 head 

 meta http-equiv="Content-Type" content="text/html; charset=gbk"/ 

 link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/ 

 script language="javascript" src="extjs/ext-all.js" /script 

 script language="javascript" src="Jquery/jquery-1.8.1.min.js" /script 

 script type="text/javascript" src="js/tabs.js" /script 

 title 选项卡 /title 

 style 

 .main{ margin:50px auto;} 

 #add{ padding-left:10px;} 

 /style 

 /head 

 body 

 div 

 div id="add" /div 

 div id="tab" /div 

 /div 

 /body 

 /html 

tabs.js

Ext.require(Ext.tab.*); 

Ext.onReady(function(){ 

 var currentItem; 

 var tabs = Ext.createWidget(tabpanel, { 

 renderTo: tab, 

 resizeTabs: true, 

 enableTabScroll: true, 

 margin:10, 

 width: 600, 

 height: 250, 

 defaults: { 

 autoScroll:true, 

 bodyPadding: 10 

 items: [{ 

 title: 选项卡, 

 html: 选项卡内容, 

 closable: true 

 }); 

 var index = 0; 

 function addTab (closable) { 

 ++index; 

 tabs.add({ 

 title: 新选项卡-  + index, 

 html: 新选项卡内容  + index +  br/ br/ , 

 closable: !!closable 

 }).show(); 

 Ext.createWidget(button, { 

 renderTo: add, 

 text: 创建可关闭选项卡, 

 handler: function () { 

 addTab(true); 

 }); 

 Ext.createWidget(button, { 

 renderTo: add, text: 创建不可关闭选项卡, 

 handler: function () { 

 addTab(false); 

 style: margin-left: 8px; 

 }); 

});

 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" 

 HTML 

 HEAD 

 TITLE /TITLE 

 meta http-equiv="Content-Type" content="text/html; charset=gbk" 

 link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" / 

 !-- script type="text/javascript" src="extjs/ext-base.js" /script -- 

 script type="text/javascript" src="extjs/ext-all.js" /script 

 script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8" /script 

 script type="text/javascript" 

 Ext.onReady(function(){ 

 Ext.BLANK_IMAGE_URL = extjs/resources/images/default/s.gif; 

 var strTabs = [{"id":"BaseInfo","text":"基本信息","url":"http://www.baidu.com"},{"id":"fromInfo","text":"供货信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","url":"http://www.163.com"}]; 

 var oTabs = eval(( + strTabs + )); 

 if (oTabs != null oTabs.length 0) { 

 document.getElementById("frmContent").src = oTabs[0].url; 

 var tabs = new Ext.TabPanel({ 

 renderTo: tabsContent, 

 activeTab: 0, 

 collapsed: true, 

 items: [{ 

 id: oTabs[0].id, 

 title: oTabs[0].text, 

 contentEl: tabItem 

 }); 

 for (var j = 1; j oTabs.length; j++) { 

 var oItem = {}; 

 oItem.id = oTabs[j].id; 

 oItem.title = oTabs[j].text; 

 oItem.contentEl = tabItem; 

 tabs.add(oItem); 

 tabs.addListener("tabchange", function(tabs, nowtab){ 

 for (var s = 0; s oTabs.length; s++) { 

 if (oTabs[s].id == nowtab.id) { 

 document.getElementById("frmContent").src = oTabs[s].url; 

 break; 

 }); 

 else { 

 document.getElementById("tabsContent").style.display = "none"; 

 }); 

 /script 

 /HEAD 

 BODY 

 div id="tabsContent" 

 div id="tabItem" 

 /div 

 /div 

 div id="tabItemsRender" 

 iframe id="frmContent" name="frmContent" src="http://blog.163.com/baihongtao_618/blog/" frameborder="0" height="100%" width="100%" 

 /iframe 

 /div 

 /BODY 

 /HTML 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/13250.html