ExtJS4学习笔记(十四)---TabPanel

最新推荐文章于 2025-08-08 17:07:36 发布

iteye_12837

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量167

点赞数

文章标签： xhtml javascript ViewUI

本文深入解析了在Ext JS中通过Ext.createWidget('tabpanel')和Ext.create('Ext.tab.Panel')两种方式创建tabPanel的具体实现，并提供了实例代码以辅助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个tabPanel有两种方法：

一：Ext.createWidget('tabpanel',{...})

二：Ext.create('Ext.tab.Panel',{...})

本文分别介绍这两种创建方法。

HTML代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head> 

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>

<scripttype="text/javascript"src="../../bootstrap.js"></script>

<scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="tabs.js"></script>

<title>MHZG.NET--Tabs</title> 
</head> 

<body> 

<divid="tab"></div>

</body> 
</html>

tabs.js：

Ext.require('Ext.tab.*');

Ext.onReady(function(){ 

//第一种方式创建 

vartabs=Ext.createWidget('tabpanel',{

renderTo:'tab',

width:450, 
activeTab:0, 

margin:'50105080', 
defaults:{ 
bodyPadding:10 
}, 
items:[{ 

//contentEl:'script',//将指定容器中的内容加载到tabPanel的内容区

title:'Tabs-1', 

closable:true,

html:'Tabs-1内容。'
},{ 

title:'Tabs-2', 

closable:false,

html:'Tabs-2内容'
}] 
}); 
 
//第二种方式创建 

vartabs2=Ext.create('Ext.tab.Panel',{

renderTo:document.body, 
activeTab:0, 
width:600, 
height:250, 

plain:true, 

margin:'010080',

defaults:{ 

autoScroll:true,

bodyPadding:10 
}, 
items:[{ 

title:'Tabs-1',

html:"这里显示内容"
},{ 

title:'异步加载内容',

loader:{ 

url:'ajax.htm',

contentType:'html',

loadMask:true
}, 
listeners:{ 

activate:function(tab){

tab.loader.load(); 
} 
} 
},{ 

title:'异步加载内容1',

loader:{ 

url:'ajax1.htm',

contentType:'html',

autoLoad:true,

params:'foo=123&bar=abc'
} 
},{ 

title:'点击触发事件',

listeners:{ 

activate:function(tab){

alert(tab.title); 
} 
}, 

html:"点击Tab之后，触发事件，监听事件：activate。activate可传递两个参数。1、Ext.Componentthis。2、Objectoptions"
},{ 

title:'Tabs不可能',

disabled:true
} 
] 
}) 
});