ExtJS4预览:渲染过程重构和标准化
小编:管理员 464阅读 2022.09.07
在过去的四年,ExtJs代码库已经进化了,新组件被加进来,编码标准也改进了。在这个过程中,为了重构旧组件有必要经常追溯回去以保证他们也被改进。
在ExtJS4之前渲染组件没有标准的方式。在过去,Panels的展现过程是,首先创建他们需要的元素,并把他们直接添加到dom上,然后获取他们的引用。另一方面,利用按需autoEl DomHelper配置并包装对应的Html标签片段。在页面上表格经常被用作模板来构建他们的标记。
ExtJS4,我们的目标是统一这些方法为一个标准的方法,那就是XTemplate和DomQuery。这个标准允许开发者很容易针对弹性需求构建出强健的组件。这个标准将在所有我们的组件中使用。
引入(介绍)renderTpl、renderData、renderSelector
ExtJS中的所有组件的展现都是基于一个基础的具有唯一ID的具有component类(cls\cmpCls\baseCls\ui)的div元素进行的。如果创建一个组件需要额外的元素,他们现在将被一个XTemplate(tenderTpl)处理。XTemplate的数据将从renderData对象读取,并且生成的元素可以通过组件实例的renderSelectors属性访问。renderSelectors的作用域是基于base div元素并且可以使用标准的css选择器。这些元素引用是组件生命周期的一部分,并且将在组件销毁时被自动移除。下面这个示例将帮助举例说明一个自定义组件的创建:
简单的自定义图标组件示例:
IconComponent = Ext.extend(Ext.Component, { iconCls: 'myIcon', renderTpl: '', onRender: function() { Ext.applyIf(this.renderData, { blank: Ext.BLANK_IMAGE_URL, iconCls: this.iconCls }); Ext.applyIf(this.renderSelectors, { iconEl: '.' + this.iconCls }); IconComponent.superclass.onRender.call(this); }, changeIconCls: function(newIconCls) { if (this.rendered) { this.iconEl.replaceClass(this.iconCls, newIconCls); } this.iconCls = newIconCls; } });复制
renderTpl定义一个XTemplate,内嵌"blank"和"iconCls"变量,这两个变量将从renderData获取。另外,在展现的时候一个iconEl引用将被应用到实例对象。一展现出来changeIconCls方法就可以使用iconEl属性了。
评论:在一定程度上表转化了代码的组织和使用,但是还是不够优雅,比如iconEl并没有在属性上定义,下面用的时候有些"勉强",并且不会有提示。
相关推荐
- ExtJs七(ExtJs Mvc创建ViewPort) 前言在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。调用application方法,其参数是一个配置对象,主要配置项有以下三个:name:用来…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…