Ext Composite 应用注意

最新推荐文章于 2025-05-07 21:08:56 发布

原创最新推荐文章于 2025-05-07 21:08:56 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #XHTML #prototype #ViewUI

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文详细解析了ExtJS中CompositeElement与CompositeElementLite的区别，特别是它们在事件监听处理上的不同行为。通过实例代码展示了如何避免使用共享对象，并提供了解决方案。

首先看一段代码：

<!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).

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);});