ExtJS中元素查找方法

基础定义用例

 	Ext.create('Ext.panel.Panel', {
 		title:'我的面板',
 		width:'100%',
 		height:400,
 		renderTo:Ext.getBody(),
 		html:'<div id="d1"><span id="span">我是span的内容</span><div id="d2">我是d2的内容</div><input id="inp"></input></div><form id="f1"><input name="uname" value="giserDev" /><input name="pwd" value="123" /></form>'
 	});
 
 	// Ext.dom.Element	  get fly getDom
 	var d1 = Ext.get('d1');
 	var span = Ext.get('span');
 	var d2 = Ext.get('d2');

• contains 判断一个元素是否包含另一个元素

alert(d1.contains(span));

• child 根据选择器获取一个直接子元素，默认返回 Ext.dom.Element 第二个参数控制返回的是哪一种元素，如果为true，则返回HTMLElement

var ch1 = d1.child('span');
alert(ch1.dom.innerHTML);
 	
var ch2 = d1.child('span', true); // 返回原生的HTMLElement
alert(ch2.innerHTML);

• down 根据选择器向下查找元素

var d2 = d1.down('#d2');
alert(d2.dom.innerHTML);

• findParentNode 和 up 根据选择器向上查找元素

var d2 = d1.down('#d2');
var d2Parent = d2.findParentNode('div');// 默认返回HTMLElement元素
alert(d2Parent.innerHTML);

• first 获取元素的第一个子元素
• last 选择元素的最后一个元素

var d1F = d1.first();
alert(d1F.dom.innerHTML);
 	
// 根据选择器过滤元素,并返回HTMLElement元素
var d1F = d1.first('div', true);
alert(d1F.innerHTML);

• findParent 查找与选择器匹配的元素的父元素
• parent

var divParent = d1.parent(); // 默认返回的是Ext.dom.Element
alert(divParent.dom.innerHTML);
 	
var divParent = d1.parent('div', true);
alert(divParent.innerHTML);

• is 判断元素是否匹配选择符

alert(d1.is('div'));

• next 返回元素同一层次的下一个元素
• prev 返回元素同一层次的上一个元素

var span = span.next();
alert(span.dom.innerHTML);

• Ext.dom.Element.query 根据选择器获取元素 返回HTMLElement

// Ext.query 根据选择器获取元素   返回HTMLElement
var arr = Ext.query('span');  // HTMLElement[]
Ext.Array.each(arr, function(item){
	alert(item.innerHTML);
});

var arr = Ext.query('span', 'd1');  // HTMLElement[]  指定从d1元素开始出查找
Ext.Array.each(arr, function(item){
	alert(item.innerHTML);
});

• Ext.select / Ext.dom.Element.select 根据选择器获取元素

// 返回的都是元素集合 
// Ext.dom.CompositeElement  Ext.dom.Element
// Ext.dom.CompositeElementLite  HTMLElement
// 3个参数：
 	// 1、selector 选择器
 	// 2、返回集合对象   true : Ext.dom.CompositeElement  false : Ext.dom.CompositeElementLite
 	// 3、从指定的根节点开始查找
var list1 = Ext.select('span', false, 'd1'); 	
Ext.Array.each(list1.elements, function(e1){
	alert(e1.innerHTML);
});

var list2 = Ext.select('span', true, 'd1'); 	
Ext.Array.each(list2.elements, function(e1){
	alert(e1.dom.innerHTML);
});