ExtJsソースの分析と学習-ExtJs要素Element(六)
6500 ワード
一括操作要素Ext.CompositeElementLite
このクラスは、Ext.Elementに基づいて構築された要素のセットを提供し、要素のセットを保存します.この種の動作はExt.select、すなわちExt.Elementに依存する.select関数を使用して要素をクエリーします.まずコンストラクタの方法を見てみましょう
このコンストラクタは2つの変数を定義します.elementsは追加する要素を格納するために使用されます.el Ext.Element.Flyweightオブジェクト、プロシージャは追加された要素を処理し、thisを利用します.add初期化要素.このメソッドコードは次のとおりです.
この関数は伝達するパラメータによって処理が異なり、elsがstringの場合Ext.Elementが呼び出される.selectorFunctionは配列を返し、配列の要素はHTML Element、Ext.Elementである.selectorFunction関数はExt.DomQuery.selectの別名は、Ext.DomQueryクラスの分析を参照してください.els.isCompositeはtrueであり、els自体がExt.CompositeElementLiteのインスタンスオブジェクトである場合、そのオブジェクトのelementsを直接elsに付与する.elsが反復できない場合、すなわち配列でもオブジェクトでもない.div要素が渡されると、それを配列に包装します.このメソッドではtransformElementが呼び出されます
この方法はelをHTML Elementに変換する.プロトタイプメソッドprototypeを見てみましょう
このメソッドは集合を返します.Elementsの長さ.次はinvoke
この関数は、次の関数にサービスされます.
次の呼び出しにより、Ext.Element’s prototypeをExt.CompositeElementLite’s prototypeにコピーします.
Ext.CompositeElement継承はExt.CompositeElementLiteを実現した.両者の違いはExt.getとExt.flyの関係のようだ.Ext.CompositeElementのExt.Elementを見てみよう.selectメソッド
Ext.selectは次のコードでチェーン呼び出しできます.
簡単な例を見てみましょう
このクラスは、Ext.Elementに基づいて構築された要素のセットを提供し、要素のセットを保存します.この種の動作はExt.select、すなわちExt.Elementに依存する.select関数を使用して要素をクエリーします.まずコンストラクタの方法を見てみましょう
Ext.CompositeElementLite = function(els, root){
this.elements = [];
this.add(els, root);
this.el = new Ext.Element.Flyweight();
};このコンストラクタは2つの変数を定義します.elementsは追加する要素を格納するために使用されます.el Ext.Element.Flyweightオブジェクト、プロシージャは追加された要素を処理し、thisを利用します.add初期化要素.このメソッドコードは次のとおりです.
add : function(els, root){
var me = this,
elements = me.elements;
if(!els){
return this;
}
if(typeof els == "string"){
els = Ext.Element.selectorFunction(els, root);
}else if(els.isComposite){
els = els.elements;
}else if(!Ext.isIterable(els)){
els = [els];
}
for(var i = 0, len = els.length; i < len; ++i){
elements.push(me.transformElement(els[i]));
}
return me;
},この関数は伝達するパラメータによって処理が異なり、elsがstringの場合Ext.Elementが呼び出される.selectorFunctionは配列を返し、配列の要素はHTML Element、Ext.Elementである.selectorFunction関数はExt.DomQuery.selectの別名は、Ext.DomQueryクラスの分析を参照してください.els.isCompositeはtrueであり、els自体がExt.CompositeElementLiteのインスタンスオブジェクトである場合、そのオブジェクトのelementsを直接elsに付与する.elsが反復できない場合、すなわち配列でもオブジェクトでもない.div要素が渡されると、それを配列に包装します.このメソッドではtransformElementが呼び出されます
transformElement : function(el){
return Ext.getDom(el);
},この方法はelをHTML Elementに変換する.プロトタイプメソッドprototypeを見てみましょう
getCount : function(){
return this.elements.length;
},このメソッドは集合を返します.Elementsの長さ.次はinvoke
/**
* Ext.Element.prototype ，
* @param {} fn
* @param {} args
* @return {}
*/
invoke : function(fn, args){
var me = this,
els = me.elements,//
len = els.length,
e,
i;
for(i = 0; i < len; i++) {
e = els[i];
if(e){// Ext.Element
Ext.Element.prototype[fn].apply(me.getElement(e), args);
}
}
return me;
},この関数は、次の関数にサービスされます.
Ext.CompositeElementLite.importElementMethods = function() {
var fnName,
ElProto = Ext.Element.prototype,
CelProto = Ext.CompositeElementLite.prototype;
for (fnName in ElProto) {
if (typeof ElProto[fnName] == 'function'){
(function(fnName) {
CelProto[fnName] = CelProto[fnName] || function() {
return this.invoke(fnName, arguments);
};
}).call(CelProto, fnName);
}
}
};次の呼び出しにより、Ext.Element’s prototypeをExt.CompositeElementLite’s prototypeにコピーします.
Ext.CompositeElementLite.importElementMethods();Ext.CompositeElement継承はExt.CompositeElementLiteを実現した.両者の違いはExt.getとExt.flyの関係のようだ.Ext.CompositeElementのExt.Elementを見てみよう.selectメソッド
Ext.Element.select = function(selector, unique, root){
var els;
if(typeof selector == "string"){//css
//Ext.Element.selectorFunction Ext.DomQuery.select
els = Ext.Element.selectorFunction(selector, root);
}else if(selector.length !== undefined){//
els = selector;
}else{
throw "Invalid selector";
}
// ，true Ext.Element ， Ext.flyweight
return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);
};
Ext.selectは次のコードでチェーン呼び出しできます.
Ext.select('p')
.addClass('.cls')
.on('click',function(){alert(this)});簡単な例を見てみましょう
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Ext.CompositeElementLite </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="../ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript"
src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript"
src="../ext-3.3.1/ext-all-debug-w-comments.js"></script>
<script type="text/javascript"
src="../ext-3.3.1/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../ext-3.3.1/src/debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';
Ext.QuickTips.init();
var els = Ext.select("#some-el div.some-class");
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class');
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
});
function show(){
var els = Ext.select("#some-el div.some-class");
els.show();
}
</script>
</head>
<body>
<div id="some-el">
<div class="some-class"> Ext.CompositeElementLite </div>
</div>
<input type="button" onclick="show();" value=" ">
</body>
</html>