Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Ext的组件模型印象

Ext的组件模型印象

作者头像
用户1183026
发布于 2018-01-19 02:12:19
发布于 2018-01-19 02:12:19
7320
举报
文章被收录于专栏:布尔布尔

组件模型在Ext1.x中已经引入了,但在框架中并没有得到全面的整合。2.0以后组件得到了很大的提高和改进,成为了框架的里最基础的一个类。组件对象模型为组件的创建、渲染、事件处理、状态管理和销毁提供了统一的模型。Ext内置的组件都具备以上这些特征。

  1. 创建 组件会将一个基础构造器连同配置传入到子类中。函数initComponent用于提供制定的构造器逻辑,只要在继承链上的某一个子类实现便可,所有的组件都遵从这种方式。此时的子类就可在initComponent中对其设置相关的属性,实现具体的功能。
  2. 渲染 2.0中,每个组件都支持延时渲染(lazy rendering),又称按需渲染(on-demand rendering)。渲染的调控一般是为你自动设置完好的。即使如此,你亦可以通过的beforerender和render事件控制渲染发生、结束,达到最为灵活的自定义调控。
  3. 销毁 每一个组件具有destroy的函数,当组件不再需要时,Ext就负责组件的结束调控,如自动垃圾回收和摧毁组件元素。当然,销毁亦提供相应的事件,如beforedestroy和destroy可按照实际的情况作出逻辑处理。
  4. 状态管理 组件内建设置和获取状态(State)的功能,只要让全局对象StateManager和一个状态 Provider都初始化好,那么多数的组件都具有自动状态管理的能力。
  5. 常规行为统一接口 一般常规的行为如隐藏、显示和激活、禁用均是组件的基本特性。如需要,这些都可由子类去重写或制定。
  6. 可调用 Ext的每一个组件在创建的时候就会由组件管理器登记注册,即你可随时获取任何组件,只需调用Ext.getCmp('id')。
  7. 支持插件 现在任何的组件可以通过插件的形式来扩展了。插件实质是带有init方法的一种类。该方法会有一个单独的参数(类型为Ext.Component)传入到其中。插件可通过组件的plugins配置项指定。当组件创建时,如果有插件可用,组件就会调用每个插件上的init方法,将自身的引用作为参数传入。 每个插件运行之后可调用组件的方法或响应组件的事件以实现自身的功能。

组件模型的统一主要是基于OO对象模型的,OO模型提供了类型继承机制,使得从组件基类扩展的所有子类都能够拥有统一的特征(如事件订阅的能力)。而具体每一个特征都和所有公共的实用类不可分割,比如组件的可调配性是基于管理容器实现的,而容器的应用在整个框架中随处可见,再比如事件能力又和事件模型的定义不可分割,事件模型中事件对象和订阅对象的管理也要依赖于容器对象。其实在Javascript中最简单而基础的容器莫过于对象本身(可以认为数组也是对象的一种包装)。

组件生命周期

  1. 传入配置调用
  2. 底层事件创建
  3. 组件注册
  4. 状态感知
  5. 加载插件
  6. 渲染
    1. 触发beforerender事件 The beforerender event is fired。这是个可取消的事件,指定的句柄(handler)可阻止组件进行渲染
    2. 设置好容器 The container is set
    3. 如果没有指定一个容器,那么将使用位于DOM元素中组件的父节点作为容器。
  7. 销毁
    1. 继续
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2008-08-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ExtJS关于组件Component生命周期
  初始化工作开始于组件的诞生,所有必须的配置设定、事件注册、预渲染处理等都在此时进行。
yaohong
2019/09/11
1.3K0
[翻译]Ext JS 教程-组件 原
一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。所有的组件都是Ext.Component类的子类,它允许它们参与到自动的生命周期管理中去,包括实例化、渲染、设置尺寸和位置、还有去实例化。ExtJS提供了大范围的实用组件,而且任何组件都可以很容易的被扩展,去创建一个定制的组件。
LeoXu
2018/08/15
3.6K0
[翻译]Ext JS 教程-组件
                                                                            原
对于Ext.data.Store 介紹 与总结,以及对以前代码的重构与优化
     对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表.   由于刚学不是太懂,都是比葫芦画瓢,东搬西畴的去完成功能.程序思路都是自己想象的,对于rest方式的增删改查全是采用另外一种方式去实现的,最后研究发现其实,store都 已经有了这些函数,根本不用自己去实现.下面看下以前所写的代码:这是model,store ,gridpanel var
hbbliyong
2018/03/05
1.9K0
Ext JS4 架构你的应用 第3节 (官方文档翻译)
原文地址:http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt2
明明如月学长
2021/08/27
7630
EXT基础
–Ext是一个Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。
Java架构师必看
2021/03/22
4.8K0
EXT基础
EXT按钮事件
在EXT中,当我们要为按钮点击添加处理function的时候,可以看到一般人的实现分成2类:
Java架构师必看
2021/03/22
3.1K0
EXT按钮事件
[翻译]Ext JS 教程-MVC架构 原
大规模的客户端应用程序常常难于去编写、组织机构和维护。随着你加入更多的功能,并且投入更多的开发人员,它们渐渐趋向于失去控制。ExtJS 4 带来了一种新的不仅仅能规整你的代码组织结构,而且能限制你要编写的代码数量的应用程序架构。
LeoXu
2018/08/15
3.8K0
[翻译]Ext JS 教程-MVC架构
                                                                            原
ExtJS(3)- 自定义组件(星级评分)
    然后是功能操作:鼠标移动到五个星星上面时,会有tooltip显示当前的分值。如图:鼠标悬停在第四颗星星时前四颗星星显示高亮笑脸,当点击下去时锁定笑脸并且设定份数为4。
py3study
2020/01/08
1.2K0
6. 「vue@2.6.11 源码分析」组件渲染之虚拟DOM上界面
new Vue(..)之后总共有两个大的步骤,第一步是调用vm._init完成组件的各种准备(初始化)工作,然后是开始结合数据与模板实现页面的渲染。vue引入了虚拟DOM技术,这里页面渲染分为两步,将模板和数据(转为了render函数)转为虚拟DOM树,而后再将虚拟DOM树同步到界面上。上一小节已经分析过创建虚拟DOM树的过程,现在我们来看看虚拟DOM是如何同步到界面上的。
tinyant
2023/02/24
1K0
6. 「vue@2.6.11 源码分析」组件渲染之虚拟DOM上界面
JavaScript设计模式之模板方法模式
泡茶和泡咖啡,整个过程都是类似的。我们可以抽离其中的概念:泡东西=>煮水->收集浸泡材料->泡->等。
一粒小麦
2019/11/09
6700
yui3:widget
Widget类是一个用于创建widgets的基础类。 Widget类可以实例化,但是一般都是用它作为基础类,扩展创建widgets,这些通过扩展创建的widgets上有特定的用户交互模式。
全栈程序员站长
2022/09/14
1.7K0
Extjs MVC架构 (官方文档翻译)【带源码】
原文地址:http://docs.sencha.com/extjs/4.2.5/#!/guide/application_architecture
明明如月学长
2021/08/27
1.6K0
2023前端一面vue面试题合集_2023-02-27
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。主要分为以下几个步骤:
yyds2026
2023/02/27
8390
面向函数编程:关于函数式组件、dialog的api化
createElement函数, 三个参数, 第一个参数是html标签或自定义组件,第二个参数一个obj(包含props, on...等等), 第三个参数children(通过createElement构建, 或者字符串)
默默的成长
2022/10/29
5490
面试了20+前端大厂,整理出的面试题
事件是用户操作网页时发生的交互动作,比如 click/move, 事件除了用户触发的动作外,还可以是文档加载,窗口滚动和大小调整。事件被封装成一个 event 对象,包含了该事件发生时的所有相关信息( event 的属性)以及可以对事件进行的操作( event 的方法)。
loveX001
2022/11/18
9300
2021年web前端面试集锦
重排(也称回流): 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。 触发:
青梅煮码
2023/01/16
4780
2021年web前端面试集锦
JavaScript组件设计思想
上个周,并肩作战的田老师离职了,尽管在一起愉快玩耍的时间不到一年,自己仍然还是从其身上学到、体会到了好多关于知识、理想的东西。对于大多数年轻人关于“晚上想想千条路,早上起来走原路”的现状,他那种敢于甩掉一切去做自己感兴趣、梦想的事的勇气是我所钦佩的。在此,祝愿田老师一切顺利。 在最后一次交接会议上,田老师阐述了一个观点,“当你学会了用‘分层思想’去看待事情,任何的问题都不是问题,都可以实现”。当然,这里说的是在程序设计方面。自己觉的很有道理,但是体会不是很深。 紧跟着,这个周期盼已久的“重构版热图”上线了,“低bug率、高速度”等在各方面指标瞬间秒杀“旧版热图”,让大家眼前一亮。随即,我们组织了分享讨论会,让匡哥讲述其重构过程中的设计思路。 大致思想如下:将每个功能点最小颗粒化、然后将其封装成模块;创建数据中心,使各个模块不在互相调用嵌套,所有的依赖和调用全部通过数据中心(这里使用自定义事件实现的观察者模式);所有的网状的需求点,划点成线,最终形成操作流。 这不就是“分层思想”的一种体现吗?我陷入了沉思~~~ 现在,大前端流行组件化、模块化。然而,我们的模块又该如何设计实现呢?
奋飛
2019/08/15
8800
Vue经典面试题总结(含答案)
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。
Javanx
2019/09/04
2K0
Vue经典面试题总结(含答案)
Spring原理剖析
核心容器提供 Spring 框架的基本功能。核心容器的主要组件是BeanFactory,它是工厂模式的实现
马士兵的朋友圈
2020/09/08
7960
Ext基础
Ext JS是用于开发 RIA (富客户端)的Ajax应用,是使用JavaScript编写的、与后台技术无关的前端Ajax框架,主要用于创建前端用户界面。因此,可以将 Ext JS用于.NET、Java、PHP等各种语言开发的应用中。最初,Ext JS基于YUI技术,从UI界面中 CSS样式的应用到数据解析中的异常处理,它都是一款不可多得的 JavaScript客户端技术精品。
张哥编程
2024/12/17
9650
相关推荐
ExtJS关于组件Component生命周期
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档