ExtJs007最常用的查询方法

 1 Ext.onReady(function () {
 2      
 3     Ext.create('Ext.panel.Panel', {
 4         title: '我的面板',
 5         width: '100%',
 6         height: 400,
 7         renderTo: Ext.getBody(),
 8         html: '<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form>'
 9     });
10     //查询系最常用的方法:
11     //Ext.dom.Element   get  fly   getDom
12       
13     var d1 = Ext.get('d1');//都是id
14     var sp = Ext.get('sp');
15 
16     //查询系方法:
17      
18     //1: contains:判断元素是否包含另一个元素
19     //alert(d1.contains(sp));
20     //alert(d1.contains('sp'));
21 
22     //2: child:从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素,并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素
23     //获得第一个子元素
24     //var ch1 = d1.child('span');
25     //alert(ch1.dom.innerHTML);
26 
27     //var ch2 = d1.child('span', true);//HTMLElement,取得的是原生的HTMLElement元素
28     //alert(ch2.innerHTML);
29 
30     //3: down:选择与选择符匹配的元素的子元素//findParentNode、up:查找与简单选择符匹配的元素的父元素
31    
32     //    var ch1 = d1.down('#d2');
33     //    alert(ch1.dom.innerHTML);
34 
35     //4: first:选择元素第一个子元素 //last:选择元素的最后一个子元素
36     //    var f1 = d1.first('div');
37     //    alert(f1.dom.innerHTML);
38 
39     //21:49
40     //5: findParent:查找与简单选择符匹配的元素的父元素 //parent:返回元素的父元素
41       
42     //var parent = sp.findParent('div');
43     //alert(parent.innerHTML);
44 
45     //6: is:判断元素是否匹配选择符
46     //alert(d1.is('div'));//判断是不是div选择器
47 
48     //7: next:选择元素同层的下一个元素 //prew:选择元素同层的上一个元素
49     //var next = sp.next();
50     //alert(next.dom.nodeName);
51 
52     //8: Ext.query:根据选择符获取元素  (Ext.dom.Element.query)
53 
54     //参数:要查找的元素,从哪个元素id下查找
55     var arr = Ext.query("span","d1");
56     Ext.Array.each(arr, function (item) {
57         alert(item.innerHTML);
58     });
59 
60     //9: Ext.select/Ext.dom.Element.select:根据选择符获取元素集合
61     // 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)
62     // 参数说明: 3个参数 , 
63     //    1:selector 选择器  (不要使用id选择器)
64     //  2:返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)
65     //  3: 指定的根节点开始查找
66 
67     //    var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite
68     //    Ext.Array.each(list1.elements,function(el){
69     //            alert(el.innerHTML);
70     //    });
71     //    var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement
72     //    Ext.Array.each(list2.elements,function(el){
73     //            alert(el.dom.innerHTML);
74     //    });    
75      
76 
77 });

 

posted @ 2016-10-25 18:19  01234  阅读(229)  评论(0编辑  收藏  举报