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

概述

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等。

浮动的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.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: 为组件提供键盘交互功能。

小结

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

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

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

时间: 2024-10-14 10:08:27

谈谈Ext JS的组件——组件基类:Ext.Component的相关文章

【Unity3D基础教程】给初学者看的Unity教程(二):所有脚本组件的基类 -- MonoBehaviour的前世今生

作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了GameObject,Compoent,Time,Input,Physics,其中Time,Input,Physics都是Unity中的全局变量.GameObject是游戏中的基本物件.GameObject是由Component组合而成的,GameObject本身必须有Transform的Component,这也加深了我们

Ext.js 中 25种类型的Ext.panel.Tool

通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例. 要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们自定义. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

Ext JS学习第十五天 Ext基础之 Ext.DomQuery

此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则: –基本元素选择器 id选择器 css的类选择器 标签选择器(简单选择器) –属性选择器 –伪类选择器(也可以说是相当于JQ过滤选择器) •Ext.query基本使用形式: –Ext.query('span')     返回整个

Ext JS学习第十四天 Ext基础之 Ext.DomHelper

此文用来记录学习笔记 •我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具类.下面我们就一起学习下DomHelper •首先从API来看,这个类暴露出的public方法并不是特别多.仅仅13个方法而已.如果想生成dom节点,在这里不建议使用原生的方法去生成dom节点,原因是代码量比较大的时候性能比较低.其二是自己组装HTML字符串比较麻烦.在Ext里,DomHelper对象类

Ext JS 5的声明式事件监听

原文:Declarative Listeners in Ext JS 5 在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进--声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图并减少自定义组件的样板代码. 注意:文章假设你使用的是Ext JS 5.0.1或更高版本. 什么是声明式事件监听? 所谓的"声明式事件监听",就是指定义在类主体中的监听或在实例的配置对象中使用了listeners配置

谈谈Ext JS组件之引子

Ext JS组件,对于Ext JS开发人员来说,应当不会陌生,毕竟做开发,都必须与它打交道.对于这样一个大家都熟悉的东西,为什么要用一个专题的形式来写呢?是否有这方面的需要?还不如去写点使用技巧? 确实,组件是可能是大家相当熟悉的东西了,但是,在使用中,大家是否在使用组件过程中或多或少都碰到一些臭虫或其他问题,从而花费不少力气去解决这 些问题呢?是什么原因造成这些问题,又该遵循什么思路去解决这些问题呢?本系列的文章就是来解决这些问题的.总的来说,就是希望大家能从文章中了解组件的 设计思路,并能从

谈谈Ext JS的组件——容器与布局

概述 在页面中,比較棘手的地方就是布局.而要实现布局.就得有能维护布局的容器. 能够说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最优秀的一个,而这得益于它强大的容器类和丰富的布局类.在本文将介绍Ext JS的容器组合和布局类. 容器:Ext.container.Container 容器的主要功能是管理其内部的组件.因而在继承Ext.Component的所有功能的基础上.加入了相应的用来处理内部组件的方法add.insert.remove和removeAll. 在配置

谈谈Ext JS的组件——布局的使用方法

概述 在Ext JS中,包含两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就需要组件类布局来处理组件内自己特有的布局关系.如果我们不定义自己的组件,基本不需要使用到组件布局,知道就行了.本文主要介绍的是容器类布局,因为这个在开发中是必定会使用到的. 注意:在Ext JS中,字段有两层意思.在模型中所说的字段,与数据库中的字段的意义是一样.字段的第二层意思是指表单中的输入组件,这个大家要注意区分. 自动布局:Ex

Ext JS 6学习文档-第5章-表格组件(grid)

使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 grid 排序 渲染器 过滤 分页 单元格编辑 行编辑 分组 分组 grid(pivot grid) 公司目录 -一个示例项目 转载请注明出处:http://www.jeeboot.com/archives/1225.html grid 组件是 Ext JS 中最强大的一个组件.它有很多的选项和配置,能以任何你希望的形式来构建 grid. Ext JS