Extjs4.0学习笔记五（TabPanel应用）

                    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支持了用别名来实例化类的对象，这样更简洁。

上面两个例子的页面效果为：