Ext笔记-> Component类

继承关系

Ext.Base
Ext.AbstractComponent
Ext.Component

xtype: component,box

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

new Ext.panel.Panel({
    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'); }
        }
    }

});