Ext组件
Component是所有组件的基类。
所有Component的子类都可以参与 Ext的标准生命周期,如组件的创建、渲染和销毁。
它们有 hide/show 和 enable/disable 等基本行为的自动化支持。
Component允许子类 lazy-render到任何 Container中,或者注册到 ComponentMgr中,这样就可以在任何时候通过Ext.getCmp来获得对组件的引用
每个组件都有特定的 xtype。
xtype Class
------------- ------------------
box Ext.BoxComponent
button Ext.Button
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
grid Ext.grid.GridPanel
paging Ext.PagingToolbar
panel Ext.Panel
progress Ext.ProgressBar
propertygrid Ext.grid.PropertyGrid
slider Ext.Slider
splitbutton Ext.SplitButton
statusbar Ext.StatusBar
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.Viewport
window Ext.Window
Toolbar components
---------------------------------------
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton
tbtext Ext.Toolbar.TextItem
Form components
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
按上面的描述来看组件主要分为3类:1、大类组件;2、工具栏组件;3、表单组件
Component.js中,有下面一段代码:config = {applyTo: config, id: config.id || config}; //
其实不是把 前面两个属性加入到后面的对象中。
整个ExtJs的代码也就37060行。
从ext-all-debug.js中可以看到这一点(
debug版本的排版还可以,ext-all.js就没法看了,是为了缩小文件大小,把所有缩进都取消的版本,适合于机器阅读。)
整个文件,涉及到addEvents的地方总共57处,
包括addEvents定义的地方。
可见addEvents使用,也是非常的慎重,只在必要的时候用到。
addEvents函数的定义如下(可以直接在ext-all-debug.js中找)
addEvents : function(o){
if(!this.events){ //
检验调用对象是否有events属性,如果没有则创建events属性,当然一开始这个属性是空的 this.events = {};
}
if(typeof o == 'string'){
// 那些属性都是设置好的吗? 如果arguments中声明的量是false,则设置为true。
arguments和o有什么关系?
for(var i = 0, a =
arguments, v; v = a[i]; i++){ //
这个arguments参数是从哪里传过来的?
if(!this.events[a[i]]){
this.events[a[i]] = true;
}
}
}else{ // 如果o不是字符类型,则把o中的属性拷贝到events属性中(这里是events属性中没有的东西才会拷贝过来,
也就是说不会有事件覆盖?)
Ext.applyIf(this.events, o);
}
}