Ext要素クエリ操作

5570 ワード

JavaScript html ext

オブジェクトとは、画面の一部を指します.例えば、Inputなどです.EXTにいると思います JSには三つの基本的な対象があります.httmlement , EXT.ElementとCompsiteElement .それぞれ説明します.

    httmlementとは、htmlページの各種タグ要素を、document.getElement ById()で取得し、htmlオブジェクトの方法と属性を有するものをいう.

    EXT.Elementは最も重要なEXTオブジェクトで、domオブジェクトの上に、また多くの方法と属性を包装して、EXT.get()で取得できます.

    CompsiteElement EXT.Elementの集合対象です.EXT.Elementオブジェクトをfist()、last()、item()などで獲得し、EXT.select()で複数のオブジェクトを選択した時に戻るのがこのような対象です.

    ページ内の対応する要素を得るためのいくつかの重要な方法について説明します.

     1、javascriptでhttlementを獲得する基本的な方法は:document.getElement ById()

     2、EXT.get()はEXT.Elementの対象を獲得し、参加はidまたはhttlement、つまりEXT.get()を通じてEXT.Elementの対象とすることができます.

          また、EXT.Element対象のdom属性も対応するhttmlementオブジェクトを得ることができます.

     3、EXT.select()マーク名またはclassinameまたはワイルドカードからCompsiteElementを取得する ,そしてEXT.Elementを巡ることができます.EXT.Element.select()メソッド呼び出しDomQueryライブラリ

EXT.select("div");//    div 
EXT.select(".red");//    classname red      
EXT.select("div.red");//    classname red div   
EXT.select("*");//      。 
EXT.select("#id");// id    。

4.EXT.query()はEXT.DomQuery.select()の略記です.httmlement配列に戻ります.

var a=EXT.query("div"); 
alert(a[0].innerHTML);

    5.EXT.get Body() EXT.Elementとしてマークを返します.

    6.EXT.get Doc()になります  EXT.Elementとして返します.

    selectについて和 queryの中のselectorには4種類の定義があります.

    1.要素選択子:

Ext.query("span"); 
Ext.query("span", "foo"); 
Ext.query("#foo"); 
Ext.query(".foo"); 
Ext.query("*"); 
Ext.query("div p");

2.属性選択子:

Ext.query("*[class]"); 
Ext.query("*[class=bar]"); 
Ext.query("*[class!=bar]"); 
Ext.query("*[class^=b]"); 
Ext.query("*[class$=r]"); 
Ext.query("*[class*=a]");

3.CSS値要素選択子:

Ext.query("*{color=red}"); 
Ext.query("*{color=red} *{color=pink}"); 
Ext.query("*{color!=red}"); 
Ext.query("*{color^=yel}"); 
Ext.query("*{color$=ow}"); 
Ext.query("*{color*=ow}");

4.ダミー選択子:

Ext.query("span:first-child"); 
Ext.query("a:last-child"); 
Ext.query("span:nth-child(2)"); 
Ext.query("input:checked"); 
Ext.query("div:contains(within)"); 
Ext.query("div:not(form)"); 
Ext.query("td:next(td)"); 
Ext.query("label:prev(input)");

Extにはいくつかのgetで始まる方法がありますが、これらの方法は、ドキュメント内のDOMを得るために、現在のドキュメントのコンポーネントを得るために、Ext要素を得るために、使用中の区別に注意して使用することができます.

1、get方法.get方法は、Ext元素、つまりタイプはExt.Elementのオブジェクトであり、Ext.Element類は、Ext対DOMのパッケージであり、DOMの要素を表しています.各DOMのために対応するElementオブジェクトを作成することができます.initDD方法は、指定されたDOMにドラッグ＆ドロップ特性などを持たせることができる.get方法は実はExt.Element.getの略字形式です.get方法にはパラメータが一つしかありません.このパラメータは混合パラメータです.DOMノードのidでも良いし、Elementでもいいし、DOMノードオブジェクトでもいいです.以下のコード例を参照してください.

Ext.onReady(function(){
     var e=new Ext.Element("hello");
     alert(Ext.get("hello"));
     alert(Ext.get(document.getElementById("hello")));
     alert(Ext.get(e));
  });

//Htmlページには、IDがハローのdivが含まれています.コードは以下の通りです.

<div id="hello">aaa</div>

Ext.get(「hello」)、Ext.get(document.getElementById)、Ext.get(e)などの3つの方法で、DOMノードハローに対応するExt要素が得られます.

2、getCmp方法は、Extコンポーネントを取得するために使用されます.getCmpメソッドは、Extコンポーネント、つまり、すでにページで初期化されたComponentまたはそのサブクラスのオブジェクトを得るために使用されます.getCmpメソッドは、実はExt.ComponentMgr.getメソッドの簡略形式です.
getCmp法には一つのパラメータ、つまりコンポーネントのidしかありません.下のコードを見てください.

Ext.onReady(function(){
       var h=new Ext.Panel({
       id:"h2", 
       title:"　",
       renderTo:"hello",
       width:300,
       height:200});
       Ext.getCmp("h2").setTitle("    ");
   });

私たちはExt.getCmp(h 2)を使って、idがh 2のコンポーネントを得て、setTitle方法を呼び出して、パネルのタイトルを設定します.

3、get Dom方法－DOMノードを獲得する.get Dom方法は、DOMノードのid、DOMノードのオブジェクト、またはDOMノードに対応するExt要素(Element)などのパラメータを含むドキュメント中のDOMノードを得ることができる.たとえば、下記のコード:

Ext.onReady(function(){
       var e=new Ext.Element("hello");
       Ext.getDom("hello");
       Ext.getDom(e);
       Ext.getDom(e.dom);
   });

//Html:コード

<div id="hello">tttt</div>

上記のコードでは、Ext.get Dom(「hello」)、Ext.get Dom(e)、Ext.get Dom(e.dom)の3つのステートメントが同じDOMノードオブジェクトに返されます.

4、get Bodyメソッド－ドキュメントのbodyノード要素(Element)を得る.この方法は、ドキュメント中のDcument.bodyというDOMノードに対応するExtJS要素(Element)を直接入手し、実質的には、Dcument.bodyオブジェクトをExtJS要素オブジェクトにカプセル化して返します.この方法はパラメータを持たないです.
たとえば、下のコードは、パネルhをドキュメントのbody要素に直接レンダリングする.

Ext.onReady(function(){
       var h=new Ext.Panel({title:"  ",width:300,height:200});
       h.render(Ext.getBody());
   });

5、get Doc方法－documentに対応するExt元素(Element)を取得する.get Docメソッドは、実際には、現在のドキュメントオブジェクト、つまり、ExtJSのElementオブジェクトとして、documentオブジェクトをカプセル化して返します.この方法は、パラメータがありません.

オブジェクトの字面量と立体関数によってオブジェクトの違いを作成します.