BoxComponent继承了Component,主要是实现了设置组件的宽度、高度以及位置(相对于容器或相对于document.body),他的实现较为简单,需要注意的是:
    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的构建器中,有如下的语句:
Ext架构分析(4)--Container之旅var items = this.items;//如果传递了items对象 

实际上,大多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方法:
doLayout方法则调用自己的layout对象的layout方法并遍历items中的元素,逐个调用layout方法:

相关文章:

  • 2021-12-21
  • 2021-07-17
  • 2021-04-17
  • 2021-07-13
  • 2021-10-30
  • 2022-12-23
  • 2021-12-17
猜你喜欢
  • 2022-02-20
  • 2022-03-01
  • 2021-12-06
  • 2021-07-28
  • 2021-06-25
  • 2021-12-19
  • 2022-12-23
相关资源
相似解决方案