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支持了用别名来实例化类的对象,这样更简洁。
上面两个例子的页面效果为: