Ext.get()とExt.query()の組み合わせは、最も柔軟な要素の取り方を実現するために使用されます.

28271 ワード

もっと読む
記事のソース:http://hi.baidu.com/bluelotus7/blog/item/ba3b2e318c7114a05edf0e5c.html
ExtJSのライブラリ関数を利用してDOMを各種操作するには、Elementタイプのオブジェクトが必要ですが、Ext.get()はElementですが、パラメータはidしかありません.jQueryのselector方式が好きで崇拝されているなら、Ext.get()とExt.query()の組み合わせを学ぶ必要があります.
前に書いたget()とquery()は全部パラメータを省略しました.まず文書の関数プロトタイプを見てみます.Ext.get(Mixed el):Element パラメータ: el:MixedThe id of the node、a DOM Node or an existing Element.Returns:Element The Element oject
Ext.query(String path):Aray パラメータ: path:StringThe selector/xpath queryroot:Node The start of the query.Returns: Aray
query関数が戻ってくるのは実はDOM Nodeの配列です.Ext.getのパラメータelはDOM Nodeです.はは、分かりましたか?つまり最も柔軟な取法を実現するには、queryでDOM Nodeを取ってgetに渡すべきです.つまり、
var x=Ext.query(QueryStr)
//なぜ内連結関数形式にしないですか?ここのxは一つの元素しかないので、上のxは一つのArayです.自分で変えて処理しましょう.
var y=Ext.get(x);
これからQueryStrのフォーマットを紹介します.(実はjQueryのselectorのフォーマットと似ています.)Elementを獲得したら何ができるかについては、ExtJS文書でExt.Elementについての説明を見に行きます.
まずhtmlコードをあげます.プレゼンテーションの説明がしやすいです.

（1）     ：

//                              span  。
Ext.query("span"); 
//                        foo  id。
Ext.query("span", "foo");

//             ，   div    p   
Ext.query("div p");
//             ，   div    span   
Ext.query("div span");

（2）  ID ：

//            foo div       ！
Ext.query("#foo"); //    Ext.get("foo");

(3)  class Name  ：

Ext.query(".foo");

//        5      。
Ext.query("*[class]"); //   ： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]

(4)     ：（         id、name、class、css  ）

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

//    name  “BlueLotus7”     
Ext.query("*[name=BlueLotus7]");

    html  ：


 
  
 
    "bar" class="foo" style="color:red;">
       div ==>   id ： bar,   class: foo
   class="bar" style="color:pink;">I'm a span within the div with a foo class
   An ExtJs link with a blank target！
  
  
   my id: foo, my class: bar
   I'm a P tag within the foo div
   class="bar" style="color:brown;">I'm a span within the div with a bar class
   An internal link

//          
Ext.query("*{color=red}"); // [div#bar.foo]
//                      
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
//              
Ext.query("*{color!=red}"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span.bar, a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
//           “yel”     
Ext.query("*{color^=yel}"); // [a www.extjs.com]
//           “ow”     
Ext.query("*{color$=ow}"); // [a www.extjs.com]
//           “ow”     
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]

(5)

  html：

      "bar"class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">     div ==>   id bar，  class foo class="bar" style="color:pink;">   span  ，   div   foo class   「http://www.extjs.com「target=」_blank「style=」「>blank＝targetのExtJSリンクを  する。 
 "foo"class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">    id ：foo，   class bar “foo” div    p  。
 class="bar" style="color:brown;">     span  ，   div   ，span    bar class  。 「 」style=「[/color][color=green]」にはリンクが  されています。 
 "border:2px dotted pink; margin:5px; padding:5px;">     #1    #2    #3    #4   "((zhi)""リンク</a>li>"border:1 px dotted black"">""カラーpink">"カラー:brown">  の は、  の の   は、   "2">   は、セルをマージしました！   、      、   
 "border:2px dotted red; margin:5px; padding:5px;">  "chked" type="checkbox" checked/>for="chked">    
/>
> "notChked" type="checkbox" />for="notChked">not me brotha!

//SPAN               Ext.query("span:first-child"); // [span.bar] //A                Ext.query("a:last-child") // [a www.extjs.com, a test.html#] //SPAN         2    （ 1     ） Ext.query("span:nth-child(2)") // [span.bar] //TR                 Ext.query("tr:nth-child(odd)") // [tr, tr] //LI                 Ext.query("li:nth-child(even)") // [li, li] //  A  ，A              Ext.query("a:only-child") // [a test.html#] //       （checked） INPUT   Ext.query("input:checked") // [input#chked on] //      TR   Ext.query("tr:first") // [tr] //       INPUT   Ext.query("input:last") // [input#notChked on] //      TD   Ext.query("td:nth(2)") // [td] //       “within”    DIV Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar] //      FORM        DIV Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div] //     A     DIV   Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div] //        TD   TD  。       ，     colspan   TD     Ext.query("td:next(td)") // [td, td] //     INPUT     LABEL     Ext.query("label:prev(input)") //[label, label]


 
  "bar"  class="foo">
   I'm a div ==> my id: bar, my class: foo
   I'm a span within the div with a foo class
   「http://www.extjs.com「target=」_blank">An ExtJs link
  
  "foo" class="bar">
   my id: foo, my class: bar
   I'm a P tag within the foo div
   I'm a span within the div with a bar class
   「  」An internal link
  
   [email protected]

js argmentsとcaler、calee