? ? ? ? ? ??????????Extjs4.0?学习笔记五（TabPane应用)
本节总结一下TabPanel的学习点。首先创建TabPanel，介绍两种创建方式。
官网API：
?
Ext.tab.Panel??xtype:?tabpanel
Every?component?has?a?specific?xtype,?which?is?its?Ext-specific?type?name,?along?with?methods?for?checking?the?xtype?like?getXType?and?isXType.?This?is?the?list?of?all?valid?xtypes
xtype????????????????Class
-------------??????------------------
button ? ? ? ? ? ? ??Ext.button.Button
buttongroup??????Ext.container.ButtonGroup
colorpalette??????Ext.picker.Color
component????????Ext.Component
container?????????Ext.container.Container
cycle ? ? ? ? ? ? ??Ext.button.Cycle
dataview ? ? ? ? ?Ext.view.View
datepicker????????Ext.picker.Date
editor???????????? ?Ext.Editor
editorgrid?????????Ext.grid.plugin.Editing
grid??????????Ext.grid.Panel
multislider????????Ext.slider.Multi
panel ? ? ? ? ? ? ??Ext.panel.Panel
progress??????????Ext.ProgressBar
slider ? ? ? ? ? ???Ext.slider.Single
spacer ? ? ? ? ? ??Ext.toolbar.Spacer
splitbutton???????Ext.button.Split
tabpanel ? ? ? ? ?Ext.tab.Panel
treepanel?????????Ext.tree.Panel
viewport?????????Ext.container.Viewport
window??????????Ext.window.Window
xtype就是一个代表类（Class）的标识名字。
?
所以创建类的对象里有下面两种方式：
1.?? ????????Ext.create('Ext.tab.Panel',{
????????????width:400,
????????????height:400,
????????????renderTo:document.body,
????????????items:[{
????????????????title:'Foo'
????????????},{
???????????????title:'Bar',
???????????????tabConfig:{
??????????????????title:?'Custom?Title',
??????????????????tooltip:?'A?button?tooltip'
???????????????}
????????????}]
????????});
2.?用xtype
??Ext.createWidget('tabpanel',{
????????????width:400,
????????????height:400,
????????????renderTo:document.body,
????????????items:[{
????????????????title:'Foo'
????????????},{
???????????????title:'Bar',
???????????????tabConfig:{
??????????????????title:?'Custom?Title',
??????????????????tooltip:?'A?button?tooltip'
???????????????}
????????????}]
????????});
而且这里用到了Ext的?createWidget()方法：
官网API介绍createWidget：
原来为了便于去记忆，Ext支持了用别名来实例化类的对象，这样更简洁。
上面两个例子的页面效果为：
?