EXTjs组件

组件

每个ExtJS应用程序都是由一或多个称为组件(components)的部件(widgets)组成的.所有的组件都是ponent的子类,ponent包含自动化生命周期管理的功能,如创建、渲染、尺寸控制、定位和销毁等，因此所有组件都自动拥有这些功能。ExtJS提供了非常多可直接使用的组件，并且从这些组件继承并扩展自己的自定义组件也是很容易的一件事情。

组件层次结构

容器(Container)是一种可以包含其他组件的特殊组件。一个典型的应用程序是由许多按树状机构嵌套在一起的组件组成的，称之为组件层次结构。容器负责管理子组件的生命周期，包括子组件的创建、渲染、尺寸控制、定位和销毁。一个典型的应用程序组件层次结构一般使用Viewport作为顶级容器，它的子元素可以包含其他嵌套的容器或者非容器组件：

容器的items属性配置用来添加子组件。以下这个例子使用Ext.create创建了两个Panel,然后将这两个Panel作为子组件添加到一个Viewport中:

容器使用布局管理器(LayoutManagers)来管理容器中子组件的尺寸和定位。

XType（组件类型）和延迟实例化

每个组件都有一个用来表示类型的名字，称为xtype。例如，组件Ext.panel.Panel的xtype为'panel'。上面那个例子展示了如何添加已经创建好的组件到容器中。如果在容器的子元素（items）配置中，为子元素指定xtype，子元素不会马上实例化，而是由容器决定子元素何时该实例化。例如：一个使用到TabPanel（选项卡）的应用程序，选项卡的每一tab页只有在用户单击的时候才会去渲染。

下面的示例代码中每个tab页都会监听各自的渲染完成（rendered，在渲染结束后触发）事件，在渲染后弹出提示。运行这个示例马上会弹出一个提示，那是因为运行后默认tab页被渲染并立即呈现在容器中了。第二tab页的提示不会弹出，只有你单击了第二页，它才会实例化并呈现。这说明了tab页会按需进行实例化和渲染。

显示和隐藏

所有组件都有内建的显示（show）和隐藏（hide）方法。组件的隐藏方法默认使用css属性“display：none“，但是你可以使用hideMode属性修改隐藏方法的配置：

浮动组件

浮动组件,指的是使用css绝对定位(position:absolute)

让组件脱离浏览器文档流,并且不参与其容器的布局。一些组件默认就是浮动的，如窗体组件（windows），并且所有组件都可以使用浮动（floating）属性设置为浮动。

上面的代码实例化了一个Panel组件,但并没有马上呈现它。通常一个组件需要配置一个renderTo（呈现到哪里）属性，或者添加到容器中作为容器的一个子元素，但是如果配置了浮动属性，则不需要这些配置。浮动组件将在第一次显示（一般是调用show方法）的时候自动添加到body中：

如果你使用浮动组件，以下这些配置需要注意下：draggable shadow alignTo() center()

创建自定义组件

组合和扩展

要创建一个实现自己所需功能的自定义组件,你必须决定你要定义的组件(一般是一个类)是要包含一个组件的实例(组合),还是扩展一个组件(继承)。

建议将自己要实现的功能最相近的现有组件作为基类来扩展(尽量复用已有的功能)。这是因为如果你继承了现有组件,则你的组件就拥有自动管理生命周期不同阶段行为的功能,如:按需呈现,自定控制尺寸，根据布局管理器（layoutmanager）管理组件定位，从容器中移除时自动销毁等。

使用继承的方式去创建新的组件类比组合的方式更符合组件层次结构的要求，并且可以从类的外部去管理类本身。

子类

Ext的类系统让你可以很容易从现有组件中扩展。下面这个例子创建一个ponent的子类，但添加任何的扩展功能。

模板方法

Extjs用模版方法模式(Template method pattern)委托到子类,方法的具体行为实现由具体的子类实现.

这意味着在组件的生命周期中,继承链里的每一个类都可以添加自己特定的逻辑。每个类都实现自己的特定逻辑，同时允许继承链中的其它类继续添加自己的逻辑。

渲染（render）方法即是一个典型的例子。render是组件（Component）超类中的一个私有方法，抽象组件（AbstractCompnent）负责启动组件生命周期中的呈现阶段。render不可以重载，但是render会调用onRender方法以允许子类在onRender中添加特定逻辑。每个onRender方法都必须在添加自己的特定逻辑之前先调用父类的onRender方法。

render方法首先被调用（由布局管理器负责）,这个方法不允许重载，并且它是在Ext基类实现的。render内部调用在当前子类中实现的this.onRender方法。onRender内部又会调用父类的onRender方法.最终,每个子类中的onRender都添加了自己的功能,并且控制返回给render方法的值。

下面的例子是一个实现了onRender方法的组件子类。

值得注意的是,很多模版方法都拥有一个相应的事件.例如render事件在组件渲染后触发.在子类中,很有必要使用模版方法来执行类生命周期中的各种逻辑,而不是使用事件.因为事件是可以被调用事件的代码暂停,或者被事件处理器停止的。

下面的列表是Component基类中已经实现的模版方法。

具体见附件

选择继承哪个类

考虑到开发效率问题,应该选择一个最佳的类来扩展,并且

要考虑基类能提供哪些已有的功能。如果你有一堆组件集需要渲染和管理（即你的自定义组件是作为容器），则应尽量从

Ext.Panel类继承.

Panel类:

如果不需要这些功能,则从Panel继承会浪费资源(应该考

虑继承其他更简单的类).

扩展：如果你要创建的组件需要用到头部（header），页脚（footer）和工具条（toolbars），最好从Ext.Panel扩展。

注意:Panel是一个容器，因此要记住使用哪种布局（Layout）来渲染和管理子组件。

继承Ext.Panel类以定义新组件通常是为应用程序高度定