谈谈Ext JS的组件——组件基类：Ext.Component

红太狼 2022-04-03 06:47 239阅读 0赞

#### 概述 ####

Ext.Component是所有Ext组件的基类，这在Ext.Component的API中第一句话就提到了。然后第二段说明了它包含的基本功 能：隐藏/显示、启用/禁用以及尺寸控制等。除了以上这些基本功能，其实还包含了很多东西。当然，在API中不可能面面俱到，那么，我们应当如何去理解这 个组件基类呢？

#### Ext.Component===DIV ####

如果将一个Ext.Component渲染到页面，会看到该组件会简单的在页面中添加一个DIV标记，就是这么简单。也就是 说，Ext.Component就相当于一个DIV标记。那么接下来的问题，我可以用这个做些什么？如果是单纯的在页面中使用一个DIV标记，我们可以让 它来显示内容，也可以用它来与其他DIV标记构建页面布局，总的来说，就是让它做你想做的事情。

既然一个DIV标记可以做那么多事情，那么如何在Ext.Component实现你所想做的呢？

##### 显示内容 #####

要在DIV内显示内容，有两种方式，一是直接把内容添加在DIV内进行显示，一是找到DIV标记，再将内容添加到DIV标记内。如果你是 Ext.Component的设计者，你将如何实现这两种方式呢？一般情况下，第一种方式，都会将内容写到一个变量里，然后用字符串组合的方式将DIV标 记与内容结合成一个字符串再输出， 而第二种方式基本都是使用DOM操作先获取元素，再使用元素的innerHTML属性将内容写到DIV标记内。

以上是在不使用任何javascript框架时的实现的方式，而对于Ext.Component这样需要实例化后才能使用的类，如何来实现呢？如果 对类设计比较熟悉的话，第一种方式的实现肯定是在类实例化时，将内容绑定到属性上，然后在类内组合字符串进行输出，第二种方式的实现基本就是提供一个方法 进行操作了。因而，为了能处理这两种方式，Ext.Component就必须提供一个属性来存放初始化时的内容，还要提供一个方法来来处理内容的更新。在 Ext.Component内实现这两个功能的就是HTML配置项和update方法。

--------------------

> 注意：配置项（Config options）严格意义上来说就是属性，但是在Javascript中，要区分哪些属性是允许初始化的，哪些属性是不允许初始化的，尤其是对于只读属性 这样的属性，要区分实在不容易，如果在API中不加区分，就会增加出错的几率，因而在API中特意添加了配置项这一专属名称以示区别。  
>

--------------------

当然，对于封装了底层DOM操作和提供了模板的框架了来说，不会真的使用那么简单的实现方法来实现这两种操作。因而，不要把我说的就认为是 Ext.Component的实现方式。在这里，只要了解它的基本实现思路就行了。探究起来，Ext.Component实现这两种方式是相当复杂的，复 杂的地方主要在渲染流程。这个渲染流程是通过Ext.util.Renderable类实现的，它通过混入（mixins）的方式混入到了 Ext.Component中。在这个Ext.util.Renderable类中，渲染HTML代码主要是靠模板与Ext.DomHelper来实现 的，有兴趣的可自行研究一下，在这里就不深入了。

##### 样式 #####

对于DIV标记来说，不可缺少的一环当然是为它定义样式或样式类，而这个，与内容的思路是一样的，因而也必须提供相应的配置项与方法，于是就有 style和cls配置项以及addCls、removeCls和setStyle方法。至于为什么样式类拆分成了两个方法，而样式只有一个方法，具体原 因我只知道样式类在Ext JS的组件中经常需要添加或减少，使用两个方法会更方便，其实还有第三个方法replaceCls，但至于样式为什么只有setStyle方法，具体原因 暂时没想到。

##### 尺寸 #####

控制DIV标记的尺寸，以控制DIV标记的可视范围也是经常会使用到的，因而，这个功能是必须有的。

##### 滚动条 #####

当DIV标记固定了尺寸后，内容有可能会超出可视区域，这时候，你是希望显示滚动条，让用户滚动查看内容，还是不显示滚动条，直接忽略多余的内容呢？这也是要考虑的。

##### 隐藏/显示 #####

DIV的显示和隐藏，这个也是会经常使用到的，因而也需要实现。

##### 启用/禁用 #####

当使用DIV标记来实现按钮功能的时候，这个就很有用了。

##### 简化样式设置 #####

一个DIV标记可设置的属性很多，如果某些属性需要经常使用到，如何简化这些属性的输入呢？不可能总是使用style配置项吧？解决办法就是直接通过配置项的方式来直接输入，如padding、margin、border与tabIndex等。

##### id #####

说到简化样式设置，不得不说一下id。为DIV标记设置一个id，可以便于快速获取DIV元素，以便进行操作。而对于组件来说了，id配置项设置的 值除了昨晚元素的id外，还可以作为组件的id使用，因而具有双重作用。但设置太多id，并不是好事，因为这很容易造成id冲突，因而要慎用。另一直可替 代的方法是itemId，不过在Ext JS 5和6，有更好的reference可以使用。助于id所涉及的相关组件查询知识，可以另开一篇文章讲述。

#### 浮动的DIV ####

不少网站都可以看到一些浮动的元素，如浮动的边栏，弹窗窗口等等，对于一个框架来说，这当然不能少，毕竟窗口、框架的信息窗口都需要使用该功能。为 了将浮动功能与基本功能区分开来，便于维护，框架将浮动功能都集中到了Ext.util.Floating类，然后通过混入功能将浮动功能混入 Ext.Component类。

#### 动画 ####

有动画功能的框架才够炫，必不可少。在Ext.Component是通过混入Ext.util.Animate实现。

#### 事件 ####

对于事件，这个不用多说，怎么可能缺少呢。要注意的是，在框架中，包含了两种事件，一种是浏览器事件，一种是内部事件。

浏览器事件指的是用户与页面交换所产生的事件，这个是通过Ext.dom.ElementEvent实现的，在使用Ext.dom.Element 进行DOM操作时候，就可以为元素绑定或解除事件。Ext.Component组件必不可少的功能就是DOM操作，因而可通过 Ext.dom.Element来处理浏览器事件。

内部事件是指Ext JS框架内部的产生事件，如存储（Store）加载了数据，它要通知组件去更新显示，而这就需要通过内部事件进行处理。了解清楚这个非常重要，例如，存储 已经加载数据了，但是组件并没有更新显示，到底哪里出错了呢？如果了解了内部事件处理流程，这个就很容易跟踪了，例子中的处理流程就是，存储通过读取器 （Reader）调用Ajax去服务器加载数据，数据读取后，代理（Proxy）会再将数据转换为符合存储定义格式的数据，当处理完成后，存储发现有新的 数据，就会触发存储的Refresh事件，在组件中，当监听到Refresh事件的时候，说明存储已经读取了数据，可以更新显示了。根据这个流程，如果数 据已读取，而没有显示，那说明存在的问题包括：数据读取错误、数据转换错误、存储没有触发Refresh事件，组件没有执行更新显示的代码或更新的时候出 现错误。通过逐一排查和跟踪分析这几个流程就很容易找到问题所在了。

在Ext.Component中，内部事件是通过混入Ext.util.Observable类实现的。

#### Ext.Component与模板 ####

在上面提及过，Ext.Component是使用模板与Ext.DomHelper来渲染元素的，也就是说，我不一定要把 Ext.Component渲染为默认的DIV标记，那么该如何来实现呢？根据上面的思路，提供一个配置项就行了，如果是使用模板，可以使用tpl配置 项，如果使用Ext.DomHelper，则可继续使用html配置项。

既然可以使用模板，那意味着可以渲染数据，那就必须预留数据接口，因而有了配置项data和setData方法。

#### 远程加载 ####

如果内容是需要远程加载后渲染的，哪怎么办？简单，预留接口就行了，这就是loader配置项，它是通过Ext.ComponentLoader对象来实现远程加载的。

#### 我要直接操控组件生成的元素 ####

虽然使用Ext JS，一般不需要直接操控组件生成的元素，但是确实会存在这方面的需求，因为，必须预留这方面的接口。因而，在组件中提供了getEl方法，用来返回组件 所生成的元素中的最顶层的元素，有了这个元素，就可以操控元素及其子元素了，不过，要注意的是，getEl方法返回的是Ext.dom.Element对 象的实例，而不是HTMLElement对象。

#### 添加其他功能 ####

经过以上一些处理，Ext.Component的功能就已经相当强大了，但可能还有有一些可能没有考虑到的功能，而这就可以通过混入这样的方式将新功能混入到组件中。在Ext.Component中还混入了以下功能：

*  Ext.mixin.Inheritable：为组件提供可继承的配置属性和配置方法。
 *  Ext.util.Positionable：为组件对象提供定位接口。
 *  Ext.mixin.ComponentDelegation：为组件提供委托事件。
 *  Ext.mixin.Bindable：为组件提供bind配置项来连接视图模型。
 *  Ext.util.ElementContainer：为组件提供操控子元素（组件）的功能。
 *  Ext.state.Stateful：为组件提供状态功能。
 *  Ext.util.Focusable：为组件提供获取焦点的功能。
 *  Ext.mixin.Accessible：为组件提供可访问性方面的功能。
 *  Ext.util.KeyboardInteractive： 为组件提供键盘交互功能。

#### 小结 ####

通过以上的分析，不知道你是否对组件有了更多的了解？总的来说，我就是基于这样一种思路去了解和认识组件的，这种方式的主要好处就是便于记忆组件的 常用配置项和方法。尤其是在需要解决一些问题或实现一些没有提供的功能时候，可以大致知道是否能实现，如何去实现。如果大家在这方面有什么看法或意见，请 留言给我，多交流是非常有益的。

在实现了组件基类后，组件就划分为容器类组件与非容器类组件两条主线不断派生出不同的组件，在下一文，将讲述容器类组件。

--------------------

> 请大家尊重作者的辛勤劳动，未经允许，请不要转载本文，毕竟读者的支持是作者撰写文章的动力。

--------------------