创建一个tabPanel有两种方法：
一：Ext.createWidget('tabpanel',{...})
二：Ext.create('Ext.tab.Panel',{...})
本文分别介绍这两种创建方法。
HTML代码：
<!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=utf-8" /> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../bootstrap.js"></script> <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="tabs.js"></script> <title>MHZG.NET--Tabs</title> </head> <body> <div id="tab"></div> </body> </html>
tabs.js：
Ext.require('Ext.tab.*');
Ext.onReady(function(){
//第一种方式创建
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tab',
width: 450,
activeTab: 0,
margin:'50 10 50 80',
defaults :{
bodyPadding: 10
},
items: [{
//contentEl:'script',//将指定容器中的内容加载到tabPanel的内容区
title: 'Tabs-1',
closable: true,
html:'Tabs-1内容。'
},{
title: 'Tabs-2',
closable: false,
html:'Tabs-2内容'
}]
});
//第二种方式创建
var tabs2 = Ext.create('Ext.tab.Panel',{
renderTo: document.body,
activeTab: 0,
width: 600,
height: 250,
plain: true,
margin:'0 10 0 80',
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.Component this。2、Object options "
},{
title: 'Tabs不可能',
disabled: true
}
]
})
});
第二个tabPanel中有两个html文件，分别是ajax.htm和ajax1.htm，这两个文件代码就不写了，里面就是敲了一些字，而这些字就是tabPanel内容区的那些文字，不过需要注意的一点就是，在异步获取其他文件中的内容时，这些文件返回的编码格式应该是UTF-8...