码迷,mamicode.com
首页 > Web开发 > 详细

ExtJS学习--------Ext.Element中的查询方法学习(实例)

时间:2014-08-27 18:50:08      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:extjs   ext.element   查询   实例   

bubuko.com,布布扣

bubuko.com,布布扣

具体实例:(实验结果可复制代码后进行演示)

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{//创建一个面板
		title:'我的面板' , 
		width:'100%' , 
		height:400 ,
		renderTo:Ext.getBody(),
		html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div>'
	});
	//查询系最常用的方法:
	//Ext.dom.Element   get  fly   getDom
	var d1 = Ext.get('d1');
	var sp = Ext.get('sp');
	
	//查询系方法:
	
	//1: contains:判断元素是否包含另一个元素
	alert(d1.contains(sp));
	alert(d1.contains('sp'));
	
	//2: child:从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素,并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素
	var ch1 = d1.child('span');	//Ext.dom.Element
	alert(ch.dom.innerHTML);
	var ch2 = d1.child('span',true);	//HTMLElement
	alert(ch.innerHTML);
	
	//3: down:选择与选择符匹配的元素的子元素//findParentNode、up:查找与简单选择符匹配的元素的父元素
	
	var ch1 = d1.down('#d2');
	alert(ch1.dom.innerHTML);
	
	//4: first:选择元素第一个子元素 //last:选择元素的最后一个子元素
	var f1 = d1.first('div');
	alert(f1.dom.innerHTML);

	//5: findParent:查找与简单选择符匹配的元素的父元素 //parent:返回元素的父元素
	var parent =  sp.findParent('div');
	alert(parent.innerHTML);
	
	//6: is:判断元素是否匹配选择符
	alert(d1.is('div'));
	
	//7: next:选择元素同层的下一个元素 //prew:选择元素同层的上一个元素
	var next = sp.next();
	alert(next.dom.nodeName);

	//8: Ext.query:根据选择符获取元素  (Ext.dom.Element.query)
	var arr = Ext.query('span','d1');	//HTMLElement[]
	Ext.Array.each(arr , function(item){
		alert(item.innerHTML);
	});
	
	//9: Ext.select/Ext.dom.Element.select:根据选择符获取元素集合
	// 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)
	// 参数说明: 3个参数 , 
	//	1:selector 选择器  (不要使用id选择器)
	//  2:返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)
	//  3: 指定的根节点开始查找
	//参数为false时的
	var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite
	Ext.Array.each(list1.elements,function(el){
			alert(el.innerHTML);
	});
	//参数为true时的
	var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement
	Ext.Array.each(list2.elements,function(el){
			alert(el.dom.innerHTML);
	});	
});



ExtJS学习--------Ext.Element中的查询方法学习(实例)

标签:extjs   ext.element   查询   实例   

原文地址:http://blog.csdn.net/z1137730824/article/details/38873351

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!