zoukankan      html  css  js  c++  java
  • ExtJS得知--------Ext.Element学习的查询方法(示例)


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

    Ext.onReady(function(){
    	Ext.create('Ext.panel.Panel',{//创建一个面板
    		title:'我的面板' , 
    		'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);
    	});	
    });



    版权声明:本文博主原创文章。博客,未经同意不得转载。

  • 相关阅读:
    你所不知道的mfc…mfc项目索引 &mfc调优指南 &mfc vc添加添加子功能指南
    Cu 大彻大悟内存管理 mm (update 0410)
    [转]Linux iostat监测IO状态
    linux virtual memory layout by moniskiller upload [读书笔记]
    河畔找到的 面经笔经
    【转】Linux本地磁盘(硬盘)介绍
    读写UTF8、Unicode文件
    codesmith执行时提示“调用的目标发生了异常”的处理过程经验。
    DB2表信息以及字段信息的表
    iBatis.NET获取resultMap相关数据
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4853317.html
Copyright © 2011-2022 走看看