概述
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与模板我们可以冷静理智的给这些刺一一贴上标签:骄傲，自负，脆弱的自尊心，
