`
yiminghe
  • 浏览: 1466618 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext Composite 应用注意

阅读更多

首先看一段代码 :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>composite 测试</title>
		<script type='text/javascript' src='ext-base.js'></script>
<script type='text/javascript' src='ext-core.js'></script>

</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<script type='text/javascript'>
	Ext.onReady(function(){
		var tests=[];
		Ext.select('ul li').each(function(el,this_,index_i) {
			var ob=el;
			//或者
			//ob=this_.item(index_i);
			tests.push(ob);
		});
		for(var i=0;i<tests.length;i++) {
			alert(tests[i].dom.innerHTML);
		}
	}) ;
	</script>
</body>
</html>


我们期望输出 1 2 3,可实际上输出 3 3 3,总可以看出得到的全部对象实际上是一个 Ext.Element 对象。

即Ext 默认在遍历 对象集合时用了 flyweight, 返回组合对象为Ext.CompositeElementLite

(select 参数第二个 ,默认为false,各个子节点共用一个 Ext.Element.Flyweight)

 

From Extjs:

 

Ext.Element.select = function(selector, unique, root){
    var els;
    if(typeof selector == "string"){
        els = Ext.Element.selectorFunction(selector, root);
    }else if(selector.length !== undefined){
        els = selector;
    }else{
        throw "Invalid selector";
    }

    return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
};
 

 


若要强制不要进行共享ext对象,则要构造一个全新的 Ext对象,即可得的解决方法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>composite 测试</title>
		<script type='text/javascript' src='ext-base.js'></script>
<script type='text/javascript' src='ext-core.js'></script>

</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<script type='text/javascript'>
	Ext.onReady(function(){
		var tests=[];
		Ext.select('ul li').each(function(el,this_,index_i) {
			//强制不要共享了,构造一个自己的ext 对象
			var ob=Ext.get(el.dom)
			tests.push(ob);
		});
		for(var i=0;i<tests.length;i++) {
			alert(tests[i].dom.innerHTML);
		}
	}) ;
	</script>
</body>
</html>
 

 

由此可见,在应用 ext CompositeLite 时 ,要么 在 each 中一次性解决当前问题 ,要么 构造新的对象 后期处理,特别是在 each 中 要进行事件处理的 ,要特别小心,最好 构造新的对象 添加事件listener ,见如下 代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>composite 测试</title>
		<script type='text/javascript' src='ext-base.js'></script>
<script type='text/javascript' src='ext-core.js'></script>
<style type='text/css'>
	li {
	border :2px solid green;
	margin:30px;
	cursor:pointer;
		}
	</style>
</head>
<body>
<ul>
	<li>clicke me 1</li>
	<li>clicke me 2</li>
	<li>clicke me 3</li>
</ul>

<script type='text/javascript'>
	Ext.onReady(function(){
		var tests=[];
               
//强制不共享
Ext.select('ul li',true).each(function(el,this_,index_i) {
      			el.on('click' ,function() {
				alert(el.dom.innerHTML);
			});
		});
//手动不共享
		Ext.select('ul li').each(function(el,this_,index_i) {
			//正确
			var ob=Ext.get(el.dom);
			//错误1
			//var ob=el;
			//或 错误2
			//var ob=this_.item(index_i);
			ob.on('click' ,function() {
				alert(ob.dom.innerHTML);
			});
		});
	}) ;
	</script>
</body>
</html>
 



注:select ( String selector , [Boolean unique ]   ) : CompositeElement/CompositeElementLite

Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).
Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).
Parameters:
  • selector : String
    The CSS selector
  • unique : Boolean
    (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
Returns:
  • CompositeElement/CompositeElementLite
    The composite element
上述代码 使用的不是 unique ,所以 子节点共用了一个 Ext.Element.Flyweight ,若要为每个子元素都给一个 Ext.Element,则要调用

Ext.select('selector',true);


select("")与select("",true)不同点在于 不带true时返回CompositeElementLite,内部所有元素共享一个Ext.Element.Flyweight,而带true时返回CompositeElement,内部所有元素都是单独的Ext.Element


addListener 与 CompositeElementLite 注意:

由于CompositeElementLite与CompositeElement会自动把Element.prototype自动附加到自己的prototype身的,并且加入循环控制。
但是有一点注意:
Element 的 addListene中的 scope 默认为 this :

addListener : function(eventName, fn, scope, options){
        Ext.EventManager.on(this.dom,  eventName, fn, scope || this, options);
        return this;
    },
 
则由前可知CompositeElementLite共享一个Element则如果添加循环后,this则会一直指向CompositeElementLite最后的那个element,不过CompositeElementLite已经考虑到了这个问题,单独处理了这个问题:
// fixes scope with flyweight
    addListener : function(eventName, handler, scope, opt){
        var els = this.elements,
            len = els.length,
            i, e;
        
        for(i = 0; i<len; i++) {
            e = els[i];
            if(e) {
                Ext.EventManager.on(e, eventName, handler, scope || e, opt);
            }
        }
        return this;
    },
 
不过这就带来了一个怪异的区别:

Ext.select("a").on("click",function(){console.log(this);});
Ext.select("a",true).on("click",function(){console.log(this);});
 this在CompositeElementLite中为当前的HTML DOM类型
而this在CompositeElement中则为Ext.Element

大家注意一下吧 ,建议:

Ext.select("a").on("click",function(){var el=Ext.fly(this);console.log(el);});

分享到:
评论

相关推荐

    javascript的ext综合应用,Ext js 资源大全

    Ext JS 是一个强大的JavaScript库,专门用于构建富客户端应用程序。它提供了一套完整的组件模型,包括数据绑定,事件处理,布局管理,以及丰富的用户界面组件,使得开发者无需深入JavaScript底层细节,就能创建出...

    ext2.0官方文档(chm),Ext 2.0 简明教程,Ext2经典应用

    Ext 2.0是Sencha公司开发的一个JavaScript框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括表格、树形视图、图表、菜单等,使得开发者能够创建功能强大、用户界面友好的Web应用。这个压缩包包含...

    EXT新应用,是前些时间给人家做毕业设计时做的

    EXT新应用是一个基于EXT JavaScript库开发的Web应用程序。EXT是一个强大的前端框架,它提供了一整套组件和工具,用于构建富互联网应用(RIA)。EXT的主要特点是其丰富的用户界面组件、数据绑定机制和灵活的布局管理...

    ext grid tree 应用

    在EXT JS框架中,"ext grid tree 应用"是一个常见的功能组合,它结合了Grid面板和Tree面板的优势,用于展示复杂的数据结构。Grid通常用于显示二维表格数据,而Tree则用于展示层次化的数据。在这个例子中,开发者通过...

    Ext简介及应用案例 ppt

    Ext是一个强大的JavaScript库,特别设计用于构建富互联网应用程序(RIA)。它基于Ajax技术,提供丰富的用户界面组件和高度可定制的界面元素。Ext的核心特点包括遵循W3C标准,拥有庞大的组件模型,允许开发者创建复杂...

    EXT.NET网站应用程序开发教程英文版

    EXT.NET是一种基于.NET Framework的JavaScript库,用于构建高性能、交互式的网页应用。它结合了Ext JS的用户界面组件和.NET的服务器端功能,为开发者提供了一种高效且强大的开发工具。本教程“EXT.NET Web应用程序...

    ext3.jar ext使用非常多

    然而,需要注意的是,EXT的学习曲线相对较陡,因为它的组件和API众多,需要花费时间去理解和掌握。同时,由于EXT是闭源的商业产品(EXT JS 4以后),在某些场景下可能涉及到版权问题,因此在选择使用时应考虑项目的...

    4.0Ext 应用架构

    【标题】:“4.0Ext 应用架构”的解析与实践 【描述】:本文将深入探讨Ext 4.0的应用架构,强调其在可扩展性、可维护性和灵活性方面的关键设计原则,以及如何构建可靠且高效的用户界面。 【标签】:“ext 4.0” ...

    Ext中CKEditor应用事例

    本篇文章将深入探讨如何在Ext(一个基于JavaScript的组件库)中集成并应用CKEditor。 CKEditor是一款JavaScript实现的WYSIWYG(所见即所得)编辑器,它提供了丰富的API和插件支持,使得开发者能够自定义编辑器的...

    ext 2 (javascript经典应用)

    EXT 2 是一个基于 JavaScript 的前端开发框架,尤其在创建富互联网应用程序(Rich Internet Applications, RIA)方面表现卓越。这个框架由 Sencha 公司开发,它提供了一套全面的组件模型,允许开发者构建功能丰富的...

    Ext 图标大全及应用.rar(绝对好用)

    Ext图标大全及应用资源包包含了丰富的图标集合,适用于Ext框架的前端开发,旨在提升应用程序的用户界面美观度和用户体验。Ext是一个强大的JavaScript库,专为构建富互联网应用程序(RIA)而设计,它提供了丰富的组件...

    Ext简单应用实例(表单,与后台交互,基本组件等)

    简单的Ext应用实例,包括表单,与后台交互,基本组件等的使用。对于Ext初学者来说挺实用的,适用于Ext 3.0版本

    ext下载包,ext,ext包,ext下载

    EXT是一个流行的JavaScript库,主要用于构建富互联网应用程序(RIA)。它由Sencha公司开发,提供了丰富的UI组件和数据管理功能,让开发者能够创建交互性强、视觉效果出色的应用程序。标题中的"ext下载包"指的是EXT库...

    Ext3_2综合应用的例子

    **Ext3_2文件系统详解** Ext3_2是一种广泛使用的Linux文件系统,全称为“Extended File System version 3 second generation”。它是在1990年代末由Reed Elsevier公司的Rudolf Bär开发的,是Ext3的增强版,主要...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    EXT,全称EXT JS,是一种基于JavaScript的前端框架,由Sencha公司开发,主要用于构建富互联网应用程序(RIA)。EXT提供了一套完整的组件模型、数据绑定、事件系统和强大的布局管理,使得开发者能够创建功能丰富的、...

    Windows读取Ext4分区的工具 Ext2Read

    虽然Ext2Read提供了对EXT分区的读取能力,但请注意,它并不支持写入操作,这意味着你不能在Windows下修改Linux分区的内容,以防止数据损坏。如果需要对EXT分区进行写操作,需要在Linux环境中进行,或者使用其他支持...

    ext教程、ext核心API 、ext中文教程

    EXT,全称EXT JS,是一款基于JavaScript的开源前端框架,由Sencha公司开发,主要用于构建富客户端Web应用程序。EXT提供了一套完整的组件模型、数据绑定、事件系统和强大的布局管理,使得开发者能够创建出功能丰富的...

    java-ext.zip_ext_ext java_ext 标签_ext java_java ext

    在这个名为"java-ext.zip_ext_ext java_ext 标签_ext java_java ext"的压缩包中,我们找到了关于如何在ExtJS中调用Java JSON服务的示例。 首先,让我们理解JSON(JavaScript Object Notation)。JSON是一种轻量级的...

    ext_教程 (ext 相 关)

    EXT是Web应用程序开发框架,主要用于构建富客户端(Rich Internet Applications,RIA)的用户界面。它基于JavaScript,提供了丰富的组件库,让开发者可以构建出交互性强、功能完善的网页应用。本教程将带你从入门到...

Global site tag (gtag.js) - Google Analytics