`
webdev2014
  • 浏览: 670148 次
文章分类
社区版块
存档分类
最新评论

Ext JS 4预览:重构和规范渲染过程()

 
阅读更多

Over the past 4 years, the Ext JS codebase has evolved; new components have been added and coding standards have improved. During this process, it was necessary to go back every so often to refactor older components and keep processes in sync.

在过去的4年里,Ext js的代码库不断在发展,新的组建不断被添加,编码标准也在不断的改进。在这期间,一个很重要的事情就是必须不断的重构较旧的组件以保持同步。

Until Ext JS 4, there has been no standard way to render components. In the past, Panels rendered primarily by creating the elements they needed and adding them to the dom directly, picking up references along the way. Fields on the other hand, manipulated the autoEl DomHelper configuration and then wrapped specific html fragments as needed. Grids made extensive use of templates to build up their markup and inject it into the page.

在Ext js 4之前,渲染组件并没有统一标准的方式。Panels的主要渲染方式是创建它们所需的元素并直接添加到DOM节点上。而Fields的渲染,则是通过配置DomHelper的autoEI,然后通过包裹特定HTML片段实现的。Grids则主要通过模版建立元件,然后渲染到页面。

For Ext JS 4, our goal is to unify these techniques into one cohesive standard by leveraging XTemplate and DomQuery. This standard is easy to work with and allows developers the flexibility required to develop robust components. This standard will be used internally across all of our components.

在Ext JS 4,我们的目标是将这些渲染方法统一为使用XTemplate和DomQuery进行渲染。该渲染方法不单易于使用,而且让开发人员在开放自己的组件时更灵活。该渲染方法将成为所有组件的标准渲染方式。

Introducing renderTpl, renderData, and renderSelector

介绍renderTpl,renderData和renderSelector

All components in Ext JS 4 are rendered with a base div element which provides a unique id, and baseline component classes (cls, cmpCls, baseCls, and ui). If additional elements are needed to create a component, they are now handled with an XTemplate (renderTpl). Data for the XTemplate is read from a renderData object and Ext.Element references can be placed on the component instance via renderSelectors. The renderSelector is scoped from the base div element and uses standard css selectors. These Ext.Element references are part of the component lifecycle and removed automatically when the component is destroyed. The following example will help illustrate the creation of a custom component:

Ext JS 4的所有组件都会被渲染成一个带有id的div元件和基类组件(cls、cmpCls和ui)。如果创建一个组件需要额外的元件,那么它将通过XTemplate (renderTpl)来处理。XTemplate所需的数据将通过 renderData对象读取,并在组件实例中通过renderSelectors方法创建一个Ext.Element对象。renderSelector使用标准的css选择器,其作用范围是基本的div元件。这些Ext.Element对象将作为组件生命周期的一部分,直到组件被销毁时才自动销毁。下面的例子将有助于说明如何创建定制组件:

Simple custom icon component example:

简单的自定义图标组件的例子:

IconComponent = Ext.extend(Ext.Component, {
iconCls: 'myIcon',
renderTpl: '<span style= " src="{blank} " class ="{iconCls} "/>',
initComponent: function () {
Ext.applyIf(this .renderData, {
blank: Ext.BLANK_IMAGE_URL,
iconCls: this .iconCls
});
Ext.applyIf(this .renderSelectors, {
iconEl: '.' + this .iconCls
});
IconComponent.superclass.initComponent.call(this );
},
changeIconCls: function (newIconCls) {
if (this .rendered) {
this .iconEl.replaceClass(this .iconCls, newIconCls);
}
this .iconCls = newIconCls;
}
});

The renderTpl defines an XTemplate with “blank” and “iconCls” variables which are read from renderData at render time. In addition, an “iconEl” reference to the Ext.Element is applied to the instance at render time. The changeIconCls method can now use the iconEl as soon as the component has been rendered.

renderTpl 定义了一个XTemplate对象,它有两个需要在渲染时从renderData 获取数据的变量“blank”和“iconCls”的。此外,在渲染时,将在实例中创建一个“iconEl”的Ext.Element对象。当组件渲染完成时,在changeIconCls方法将可以使用“iconEl ”对象。

原文:http://www.sencha.com/blog/2010/12/13/ext-js-4-preview-refactoring-standardizing-the-rendering-process/

分享到:
评论

相关推荐

    Ext4新概念:类系统

    Ext4新概念:类系统

    ext4解压工具和操作方法.rar

    包含3个工具:make_ext4fs、simg2img、kusering.sh。 1. 解压system.img为system.img.ext4。命令:simg2img system.img system.img.ext4 2. 创建system.img.ext4挂载目录tmp; 命令:mkdir tmp; 3. 挂载system....

    [Ext JS] Ext JS 4 插件扩展开发教程 (英文版)

    [Packt Publishing] Ext JS 4 插件扩展开发教程 (英文版) [Packt Publishing] Ext JS 4 Plugin and Extension Development (E-Book) ☆ 图书概要:☆ A hands-on development of several Ext JS plugins and ...

    Ext JS权威指南

    全书一共22章:第1章简要介绍了学习ext js必备的基础知识、json、ext js 4的新特性,以及其开发工具的获取、安装与配置;第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化,以及一个经典的入门示例;...

    Ext.JS.4.First.Look(第1版)

    Ext JS 4 is a JavaScript framework that provides resources to build Rich Internet Applications with great performance. Ext JS 4 has been packed with many new features and it is difficult to master, ...

    Ext4 动态加载js例子

    Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子

    深入浅出Ext.JS (4)

    ext js是一种用javascript编写的功能强大的ajax框架,可用于开发绚丽多彩的富客户端ajax应用。本书是ext js领域内的经典著作,由浅入深、循序渐进地对ext js各方面的知识进行了全面而系统的阐述。全书由一个可以引领...

    [Ext JS] Ext JS 实战 第2版 英文版

    ll learn the best practices for building and scaling full featured web applications including how to customize and build Ext widgets Fully revised for Ext JS 4 0 ☆ 出版信息:☆ [作者信息] Jesus ...

    Learning Ext JS 4 pdf

    Learning Ext JS 4 by Crysfel Villa and Armando Gonzalez (Oct 8, 2012) $49.99 Paperback Order in the next 13 hours and get it by Tuesday, Mar 19. More Buying Choices - Paperback $46.48 new (17 ...

    Ext JS 4.0编码规范

    Ext JS 4.0编码规范,翻译自官方文档的指南(Guides)。

    ext JS 源码和学习资料

    ext JS 源码和学习资料,包含ext-3.2.0,ext3.3.1,ext4等多个版本源码,包含多个版本中文API和实用学习pdf

    Practical Ext JS 4.pdf

    Chapter 4: Controls and Layout Chapter 5: Working with Data Chapter 6: Data Controls Chapter 7: Drag and Drop Chapter 8: Theming and Styling Chapter 9: MVC with Ext JS 4 Chapter 10: Extending, Unit ...

    快意编程EXT JS Web开发技术详解.part3

    《快意编程:Ext JS Web开发技术详解》适用于初、中、高级软件设计人员,同时也可用做高校相关专业师生和社会培训班的教材,但在阅读《快意编程:Ext JS Web开发技术详解》前,需要读者掌握JavaScript的基础知识。

    ExtJS Ext ExtJavascript Javascript

    ExtJS Ext ExtJavascript Javascript

    EXT JS 4自学手册

    EXTjs4自学手册.docx,适用用新手学习EXT JS 4

    深入浅出Ext_JS:数据存储与传输

    深入浅出Ext_JS:数据存储与传输,学习ext 我在百度搜到的。

    深入浅出Ext JS第2版.pdf下载地址

    深入浅出Ext JS第2版.pdf(4/4):http://download.csdn.net/source/3554013 深入浅出Ext JS第2版.pdf(3/4):http://download.csdn.net/source/3554012 深入浅出Ext JS第2版.pdf(2/4):...

    Practical Ext JS 4

    After a quick refresher on some JavaScript basics, you will get to grips with Ext JS 4’s OO concepts (such as mixins) and familiarize yourself with its UI components and layout. You'll learn all the...

    ext图片上传前预览小demo

    EXT上传前先预览一下这个图片

    EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档

    EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...

Global site tag (gtag.js) - Google Analytics