1.BoxComponent可以通过resizeEl属性设置进行调整大小的对象,positionEl属性设置调整位置的对象,并且在render事件中进行设置,将属性封装为Ext.element对象;
2.setSize和setPosition方法是在afterRender事件中被触发的,换句话说,组件调整位置和大小是在渲染后进行的。
Ext.Containr继承了BoxComponent,在他的initComponent方法中,增加了对以下事件的支持: 'afterlayout','beforeadd','beforeremove','add','remove'。
Container主要实现了对layout和items的管理。
首先,让我们看一下Container对于items的管理:
你可能会发现大部分的Widget都支持在构建器中传入一个items数组以非常方便的形式构建该Widget的子组件,而该数组大部分情况是由json构成,让我们看个例子:
那么,这些json对象看不到表示任何对象类型的属性(xtype),Widget是怎样正确解析这些json对象的呢? 魔术就发生在Container中,首先,在Container的构建器中,有如下的语句:
实际上,大多Widget都有自己的缺省的add的实现以满足自身的要求,Container也提供了一个缺省的add方法的实现如下:
让我们看一下lookupComponent方法的实现:
魔术的答案在这里,createComponent 方法的实现:
而ComponentMgr的create方法的实现也很简单:
最终,秘密揭晓,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:
让我们再看一下对于layout的管理,通过render方法,Container设置了layout对象并调用了doLayout方法: