官方教程--查看文章
 
ExtJS4预览:渲染过程重构和标准化
发布时间:2010-12-15
  • 上一篇文章:
  • 下一篇文章: 没有了

  • 评论:在一定程度上表转化了代码的组织和使用,但是还是不够优雅,比如iconEl并没有在属性上定义,下面用的时候有些"勉强",并且不会有提示。

    在过去的四年,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: 
    '<img alt="" src="{blank}" class="{iconCls}"/>',
       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属性了。

     



     [官方教程]Ext JS 3.0 RC2 发布-性能稳定,代码健全和功能增强 (myext整理,06-28)
    我们很高兴地宣布,最新推出的候选版本 Ext 3.0 已经公开下载.我们对这一个稳定版本的发布非常自豪。我们要感谢我们的支持小组和社区成员,是你们这些精英测试我们发布的候选版本.是你们协助我们排除了很多影响到Ext Core和Ext 3.0的错误.非常感谢你们花了大量时间来提交反馈报告和建立测试用例……

     [官方教程]首届Ext JS研讨会 美国 佛罗里达 2009 Fall (myext整理,11-28)
    官方组织举行的见面会之类的,,,宣布3.0的发布,地点选在佛罗里达。来到这个会场,听说是一间豪华的星级酒店(具体星数未知!估计也不弱滴,,,)。呵呵 首先看到的是指示牌,那么大酒店迷路的是可能的事,弄两个贴心的牌子,让第一次来的与会者感到清晰 嘿嘿    &n……

     [官方教程]Menu Widget (EXT 菜单组件) (佚名,03-06)
    开始! 第一步要做的是,下载本教程的示例zip文件Zip文件包括三个文件:ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包这四个文件到Ext的安装目录中(例如,Ext是在“C:\code\Ext\……

     [官方教程]玩EXT简单方法--firebug下调试ext (佚名,03-06)
    蹒跚学步 第一步 - 入门 想必您已经听说过 Ext、浏览了在线演示,并且尝试阅读API文档。不过,面对复杂的API文档,您却不如何下手?! 第二步 - 起步 通览过API文档,并且找到了所要立刻尝试的功能,面对混杂的网页源代码,如何开始一个简单的测试页面?那么…… 不论您……

    推荐文章 [官方教程]EXT 介绍入门 (佚名,03-06)
    无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解HTML Dom。 下载Ext 如果你未曾下载过,那应从这里下载最新版……

     


    ©2008 MyExt.cn
    本站文章来自互联网,仅供学习和研究使用,如有版权问题,请发送Email:myext@126.com.