继承关系
xtype: component,boxExt.BaseExt.AbstractComponentExt.Component
Ext所有的component的生命周期由Container类管理,可以通过Container的items Config选项或者add方面加入到容器中。
1、Component的基类提供了hide/show,enable/disable,size control等行为
2、可以通过Exp.getCmp(String id)来获取component的引用
3、每个component都有一个唯一的xtype,可以使用getXType和isXType方法检查xtype
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
Toolbar components
---------------------------------------
paging Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item
Form components
---------------------------------------
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie
其他:
1、autoEl : 将html的tag的内容封装为一个component
{
xtype: 'component',
autoEl: {
tag: 'img',
src: 'http://www.example.com/example.jpg'
}
}, {
xtype: 'component',
autoEl: {
tag: 'blockquote',
html: 'autoEl is cool!'
}
}, {
xtype: 'container',
autoEl: 'ul',
cls: 'ux-unordered-list',
items: {
xtype: 'component',
autoEl: 'li',
html: 'First list item'
}
}
2、itemId 在容器范围内可见
var c = new Ext.panel.Panel({ //
height: 300,
renderTo: document.body,
layout: 'auto',
items: [
{
itemId: 'p1',
title: 'Panel 1',
height: 150
},
{
itemId: 'p2',
title: 'Panel 2',
height: 150
}
]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
3、listeners 事件监听器,可以容纳多个事件handler
width: 400,
height: 200,
dockedItems: [{
xtype: 'toolbar'
}],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
}
});