BoxComponent继承了Component，主要是实现了设置组件的宽度、高度以及位置（相对于容器或相对于document.body),他的实现较为简单，需要注意的是:
1.BoxComponent可以通过resizeEl属性设置进行调整大小的对象，positionEl属性设置调整位置的对象，并且在render事件中进行设置，将属性封装为Ext.element对象；
2.setSize和setPosition方法是在afterRender事件中被触发的，换句话说，组件调整位置和大小是在渲染后进行的。
onRender :
function
(ct, position)
{
Ext.BoxComponent.superclass.onRender.call(this, ct, position);
if(this.resizeEl){
this.resizeEl = Ext.get(this.resizeEl);
}
if(this.positionEl){
this.positionEl = Ext.get(this.positionEl);
}
}
,
afterRender :
function
()
{
Ext.BoxComponent.superclass.afterRender.call(this);
this.boxReady = true;
this.setSize(this.width, this.height);
if(this.x || this.y){
this.setPosition(this.x, this.y);
}else if(this.pageX || this.pageY){
this.setPagePosition(this.pageX, this.pageY);
}
}
Ext.Containr继承了BoxComponent，在他的initComponent方法中，增加了对以下事件的支持： 'afterlayout','beforeadd','beforeremove','add','remove'。
Container主要实现了对layout和items的管理。
首先，让我们看一下Container对于items的管理：
你可能会发现大部分的Widget都支持在构建器中传入一个items数组以非常方便的形式构建该Widget的子组件，而该数组大部分情况是由json构成，让我们看个例子：
new
Ext.menu.Menu(
{
id: 'mainMenu',
items: [
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
},
{
text: 'Ext for jQuery',
checked: true,
checkHandler: onItemCheck
},
{
text: 'I donated!',
checked:false,
checkHandler: onItemCheck
}, '-', 
那么，这些json对象看不到表示任何对象类型的属性（xtype），Widget是怎样正确解析这些json对象的呢？ 魔术就发生在Container中，首先，在Container的构建器中，有如下的语句：
var
items
=
this
.items;
//
如果传递了items对象
if
(items)
{
delete this.items;
if(items instanceof Array){//items对象可以是数组，也许这样写更清楚些：this.add(items)
this.add.apply(this, items);
}else{
this.add(items);
}
}
实际上，大多Widget都有自己的缺省的add的实现以满足自身的要求，Container也提供了一个缺省的add方法的实现如下：
add :
function
(comp)
{
if(!this.items){//如果未实现items数组,创建items数组
this.initItems();
}
var a = arguments, len = a.length;//如果传入的是数组则对每个元素进行递归调用add方法
if(len > 1){
for(var i = 0; i < len; i++) {
this.add(a);
}
return;
}
//this.applyDefaults(comp)方法对元素设置了缺省属性，注意到此时为止，还没有生成相应的组件，现在的item对象依然还是一个简单的json对象。lookupComponent方法则会生成元素组件
var c = this.lookupComponent(this.applyDefaults(comp));
var pos = this.items.length;
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
this.items.add(c);
//把每个子元素的ownerCt设置成Container自己
c.ownerCt = this;
//触发add事件
this.fireEvent('add', this, c, pos);
}
return c;
}
,
让我们看一下lookupComponent方法的实现：
lookupComponent :
function
(comp)
{
if(typeof comp == 'string'){
//如果传入的是字符串，进行查找
return Ext.ComponentMgr.get(comp);
}else if(!comp.events){
//如果是对象，但不是继承自Observable的对象（在这里，即不是Widget组件对象）,则新建一个对象，这就是我们前面讨论的情况，传入的是配置数组。
return this.createComponent(comp);
}
return comp;
}
,
魔术的答案在这里，createComponent 方法的实现：
createComponent :
function
(config)
{
//this.defaultType是"panel",Container缺省实现是根据传入的json对象创建相应的panel
return Ext.ComponentMgr.create(config, this.defaultType);
}
,
而ComponentMgr的create方法的实现也很简单：
create :
function
(config, defaultType)
{
return new types[config.xtype || defaultType](config);
}
最终，秘密揭晓，Container的缺省实现将根据传入的items数组中的每个item的xtype属性进行子元素的创建。如果在item中未指定xtype,则根据配置创建panel.
Ext.Container除了通过add()方法，还提供了insert()，remove()等方法实现了对items的维护。在item中的每个元素被加入items之前，都调用beforeAdd方法，如果返回值为true,则该元素元素被设置缺省属性（通过applyDefaults方法），并吧ownerCt属性赋为container，然后加入items,并触发add事件。
Container还提供了两个很有用的方法：bubble和cascade。
bubble方法实现了一个方法在父容器中的递归调用，当然，只要方法在任何一个父容器中返回false,则调用被终止；
cascade方法则实现了方法在容器的子元素中被调用；
需要指出的是，如果未设置任何layout，则container返回ContainerLayout:
getLayout :
function
()
{
if(!this.layout){
var layout = new Ext.layout.ContainerLayout(this.layoutConfig);
this.setLayout(layout);
}
return this.layout;
}
让我们再看一下对于layout的管理，通过render方法，Container设置了layout对象并调用了doLayout方法：
render :
function
()
{
Ext.Container.superclass.render.apply(this, arguments);
if(this.layout){
if(typeof this.layout == 'string'){
this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
}
this.setLayout(this.layout);
if(this.activeItem !== undefined){
var item = this.activeItem;
delete this.activeItem;
this.layout.setActiveItem(item);
return;
}
}
if(!this.ownerCt){
this.doLayout();
}
if(this.monitorResize === true){
Ext.EventManager.onWindowResize(this.doLayout, this);
}
}
doLayout方法则调用自己的layout对象的layout方法并遍历items中的元素，逐个调用layout方法：
if
(
this
.rendered
&&
this
.layout)
{
this.layout.layout();
}
if
(
this
.items)
{
var cs = this.items.items;
for(var i = 0, len = cs.length; i < len; i++) {
var c = cs;
if(c.doLayout){
c.doLayout();
}
}
}
1.BoxComponent可以通过resizeEl属性设置进行调整大小的对象，positionEl属性设置调整位置的对象，并且在render事件中进行设置，将属性封装为Ext.element对象；
2.setSize和setPosition方法是在afterRender事件中被触发的，换句话说，组件调整位置和大小是在渲染后进行的。
onRender :
function
(ct, position)
{ Ext.BoxComponent.superclass.onRender.call(this, ct, position); if(this.resizeEl){ this.resizeEl = Ext.get(this.resizeEl); } if(this.positionEl){ this.positionEl = Ext.get(this.positionEl); } }
, afterRender :
function
()
{ Ext.BoxComponent.superclass.afterRender.call(this); this.boxReady = true; this.setSize(this.width, this.height); if(this.x || this.y){ this.setPosition(this.x, this.y); }else if(this.pageX || this.pageY){ this.setPagePosition(this.pageX, this.pageY); } }
Ext.Containr继承了BoxComponent，在他的initComponent方法中，增加了对以下事件的支持： 'afterlayout','beforeadd','beforeremove','add','remove'。
Container主要实现了对layout和items的管理。
首先，让我们看一下Container对于items的管理：
你可能会发现大部分的Widget都支持在构建器中传入一个items数组以非常方便的形式构建该Widget的子组件，而该数组大部分情况是由json构成，让我们看个例子：
new
Ext.menu.Menu(
{ id: 'mainMenu', items: [ { text: 'I like Ext', checked: true, // when checked has a boolean value, it is assumed to be a CheckItem checkHandler: onItemCheck }, { text: 'Ext for jQuery', checked: true, checkHandler: onItemCheck }, { text: 'I donated!', checked:false, checkHandler: onItemCheck }, '-',
那么，这些json对象看不到表示任何对象类型的属性（xtype），Widget是怎样正确解析这些json对象的呢？ 魔术就发生在Container中，首先，在Container的构建器中，有如下的语句：
var
items
=
this
.items;
//
如果传递了items对象
if
(items)
{ delete this.items; if(items instanceof Array){//items对象可以是数组，也许这样写更清楚些：this.add(items) this.add.apply(this, items); }else{ this.add(items); } }
实际上，大多Widget都有自己的缺省的add的实现以满足自身的要求，Container也提供了一个缺省的add方法的实现如下：
add :
function
(comp)
{ if(!this.items){//如果未实现items数组,创建items数组 this.initItems(); } var a = arguments, len = a.length;//如果传入的是数组则对每个元素进行递归调用add方法 if(len > 1){ for(var i = 0; i < len; i++) { this.add(a); } return; } //this.applyDefaults(comp)方法对元素设置了缺省属性，注意到此时为止，还没有生成相应的组件，现在的item对象依然还是一个简单的json对象。lookupComponent方法则会生成元素组件 var c = this.lookupComponent(this.applyDefaults(comp)); var pos = this.items.length; if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){ this.items.add(c); //把每个子元素的ownerCt设置成Container自己 c.ownerCt = this; //触发add事件 this.fireEvent('add', this, c, pos); } return c; }
,
让我们看一下lookupComponent方法的实现：
lookupComponent :
function
(comp)
{ if(typeof comp == 'string'){ //如果传入的是字符串，进行查找 return Ext.ComponentMgr.get(comp); }else if(!comp.events){ //如果是对象，但不是继承自Observable的对象（在这里，即不是Widget组件对象）,则新建一个对象，这就是我们前面讨论的情况，传入的是配置数组。 return this.createComponent(comp); } return comp; }
,
魔术的答案在这里，createComponent 方法的实现：
createComponent :
function
(config)
{ //this.defaultType是"panel",Container缺省实现是根据传入的json对象创建相应的panel return Ext.ComponentMgr.create(config, this.defaultType); }
,
而ComponentMgr的create方法的实现也很简单：
create :
function
(config, defaultType)
{ return new types[config.xtype || defaultType](config); }
最终，秘密揭晓，Container的缺省实现将根据传入的items数组中的每个item的xtype属性进行子元素的创建。如果在item中未指定xtype,则根据配置创建panel.
Ext.Container除了通过add()方法，还提供了insert()，remove()等方法实现了对items的维护。在item中的每个元素被加入items之前，都调用beforeAdd方法，如果返回值为true,则该元素元素被设置缺省属性（通过applyDefaults方法），并吧ownerCt属性赋为container，然后加入items,并触发add事件。
Container还提供了两个很有用的方法：bubble和cascade。
bubble方法实现了一个方法在父容器中的递归调用，当然，只要方法在任何一个父容器中返回false,则调用被终止；
cascade方法则实现了方法在容器的子元素中被调用；
需要指出的是，如果未设置任何layout，则container返回ContainerLayout:
getLayout :
function
()
{ if(!this.layout){ var layout = new Ext.layout.ContainerLayout(this.layoutConfig); this.setLayout(layout); } return this.layout; }
让我们再看一下对于layout的管理，通过render方法，Container设置了layout对象并调用了doLayout方法：
render :
function
()
{ Ext.Container.superclass.render.apply(this, arguments); if(this.layout){ if(typeof this.layout == 'string'){ this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); } this.setLayout(this.layout); if(this.activeItem !== undefined){ var item = this.activeItem; delete this.activeItem; this.layout.setActiveItem(item); return; } } if(!this.ownerCt){ this.doLayout(); } if(this.monitorResize === true){ Ext.EventManager.onWindowResize(this.doLayout, this); } }
if
(
this
.rendered
&&
this
.layout)
{ this.layout.layout(); }
if
(
this
.items)
{ var cs = this.items.items; for(var i = 0, len = cs.length; i < len; i++) { var c = cs; if(c.doLayout){ c.doLayout(); } } }
