ExtJS得知--------Ext.Element学习的查询方法(示例)
详细实例:(实验结果可复制代码后进行演示)
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学习的查询方法(示例)的更多相关文章
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢? 目录 目录 extjs的查询组件的API 查 ...
- Ext JS学习第十二天 Ext基础之操作dom ; get与fly 方法
此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...
- Ext JS学习第十三天 Ext基础之 Ext.Element
•Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力.那么根据操作类型基本可以分为查询系.DOM操作系.样式操作系. ...
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
- [转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系
原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html Ext.Element对象是对dom对象的封装,目的是为了跨平台以 ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- Dynamic CRM 2015学习笔记(3)oData 查询方法及GUID值比较
本文将比较二种查询字符串在同一个oData查询方法中的不同,另外,还将介绍如何比较不同方法返回的GUID的值. 用同一个oData查询方法,如果传入查询的字符串不一样,返回结果的格式竟然完全不一样. ...
- django学习-15.ORM查询方法汇总
1.前言 django的ORM框架提供的查询数据库表数据的方法很多,不同的方法返回的结果也不太一样,不同方法都有各自对应的使用场景. 主要常用的查询方法个数是13个,按照特点分为这4类: 方法返回值是 ...
- 【Java EE 学习 17 下】【数据库导出到Excel】【多条件查询方法】
一.导出到Excel 1.使用DatabaseMetaData分析数据库的数据结构和相关信息. (1)测试得到所有数据库名: private static DataSource ds=DataSour ...
随机推荐
- A ResourcePool could not acquire a resource from its primary factory or source
出处:http://aaron81939097.iteye.com/blog/1144642 原配置: <bean id="dataSource" class="c ...
- [leetcode] Combination Sum and Combination SumII
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
- 第十九章——使用资源调控器管理资源(1)——使用SQLServer Management Studio 配置资源调控器
原文:第十九章--使用资源调控器管理资源(1)--使用SQLServer Management Studio 配置资源调控器 本系列包含: 1. 使用SQLServer Management Stud ...
- 设计Kafka的High Level Consumer
原文:https://cwiki.apache.org/confluence/display/KAFKA/Consumer+Group+Example 为什么使用High Level Consumer ...
- 付款页面DEMO
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHRxdWVlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- CSDN帐号被盗尚未?
总是早上登录CSDN,STIL.总是让C货币. 但是今天除了发C币,还提示我有2篇博文被删除了,打开看了看,原来不是我发的. watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...
- Cookie和Session (转)
Session和Cookie在网站开发中是用来保存用户与后端服务器的交互状态.它们有各自的缺点和优点.而且,他们的优点和应用场景是对立的. Cookie 完整地描述:当一个用户通过HTTP访问一个 ...
- 爬虫(heritrix框架)
Heritrix 下载 目前 Heritrix 的最新版本是 1.14.4(2010-5-10 发布),您可以从 SourceForge(http://sourceforge.net/projects ...
- URAL 1141. RSA Attack RSA加密演算法
标题来源:URAL 1141. RSA Attack 意甲冠军:给你e n c 并有m^e = c(mod n) 求 m 思路:首先学习RSA算法 here 过程大致是 1.发送的信息是m 2.随机选 ...
- Xcode的小标记旁边的文件的名称的作用
这两天老板教我要注意Xcode该文件名以小标记权.例如: 这里的M就是Xcode中类名旁边的一个symbol.还有A,D等,这些标记用于显示当前文件和代码仓库中该文件对照后的状态: M = Local ...