第十五讲：ExtJS常用工具类和函数(下)

最新推荐文章于 2021-10-28 16:50:22 发布
原创 最新推荐文章于 2021-10-28 16:50:22 发布 · 284 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解了Ext.DomQuery的功能和用法，包括选择DOM元素、过滤元素、验证元素匹配及选择特定元素等操作，提供了丰富的代码示例。

Ext.DomQuery

示例一：简单的应用

Ext.onReady(function(){

var divs = Ext.query("div");

Ext.each(divs,function(item,index,allItems){

alert(item.innerHTML);

})

});

 

Ext.onReady(function(){

var divs = Ext.DomQuery.select("div");

Ext.each(divs,function(item,index,allItems){

alert(item.innerHTML);

})

});

 

filter( Array el, String selector, Boolean nonMatches ) : Array

过滤el中的元素,保留符合selector的，如果nonMatches为真，结果相反。

实例二：选择符合selector的元素。

Ext.onReady(function(){

var divs = Ext.DomQuery.select("div");

var includes = Ext.DomQuery.filter(divs,"#test1");

Ext.each(includes,function(item,index,allItems){

alert(item.innerHTML);

})

});

 

示例三：选择不符合selector的元素。

Ext.onReady(function(){

var divs = Ext.DomQuery.select("div");

var includes = Ext.DomQuery.filter(divs,"#test1",true);

Ext.each(includes,function(item,index,allItems){

alert(item.innerHTML);

})

});

 

is( String/HTMLElement/Array el, String selector ) : Boolean

验证el是否匹配selector。

示例四：String类型的el，进行匹配。

Ext.onReady(function(){

alert(Ext.DomQuery.is("test1","#test1"));

alert(Ext.DomQuery.is("test1","#test2"));

alert(Ext.DomQuery.is("test1","#test3"));

alert(Ext.DomQuery.is("test1","#test4"));

alert(Ext.DomQuery.is("test1","#test5"));

});

 

示例五：HTMLElement类型的el，进行匹配。

Ext.onReady(function(){

alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test1"));

alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test2"));

alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test3"));

alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test4"));

alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test5"));

});

 

示例六：Array类型的el，进行匹配。

Ext.onReady(function(){

var divs = Ext.query("div");

alert(Ext.DomQuery.is(divs,"div"));

alert(Ext.DomQuery.is(divs,"#test1"));

 

var includes = Ext.DomQuery.filter(divs,"#test1");

alert(Ext.DomQuery.is(includes,"#test1"));

 

var excepts = Ext.DomQuery.filter(divs,"#test1",true);

alert(Ext.DomQuery.is(excepts,"#test1"));

 

});

select( String selector, [Node root] ) : Array

从root中选择匹配selector的对象数组

示例七：选择指定ID下的匹配selector的对象数组

Ext.onReady(function(){

var divs = Ext.query("div","test1");

Ext.each(divs,function(item,index,allItems){

alert(item.innerHTML);

})

 

var divs2 = Ext.query("div","test2");

Ext.each(divs2,function(item,index,allItems){

alert(item.innerHTML);

})

});

 

selectNode( String selector, [Node root] ) : Element

返回root中第一个匹配selector的对象

Ext.onReady(function(){

var divs = Ext.DomQuery.selectNode("div","test1");

Ext.each(divs,function(item,index,allItems){

alert(item.innerHTML);

})

});

extjs 3详解与实践_书摘和访谈：ExtJS的实践
cunfu6353的博客
07-10 387
extjs 3详解与实践 Jesus Garcia撰写的ExtJS in Action是一本书，试图介绍Ext JS跨浏览器JavaScript库，该库用于构建Rich Internet Applications。 Ext JS结合了大型的小部件库，可扩展的组件模型和易于使用的API，可为基于JavaScript的Web应用程序创建完整的，坚固的平台。 作者在IT和企业Web应用程序开发方面...
Extjs4.0视频教程和源代码，另附文档翻译
09-09
- **Core包概述**：介绍了Extjs的核心包，其中包括了大量的工具函数和类，为开发者提供了丰富的API。 - **Ext类详解**：深入探讨了Ext类的功能，包括如何使用Ext.extend扩展类、如何使用Ext.create创建对象等。 - **...
ExtJS可视化工具
05-15
这是是一款开源的跨平台、数据库和浏览器的可视化ExtJS应用开发平台。 特色： .基于浏览器的集成开发环境 .丰富的组件库，可自定义扩展ExtJS组件 .开发应用简单快速 .高效率和高稳定性 .跨平台、数据库和浏览器 .服务器端的脚本支持 .智能的数据库访问机制 您可以到 http://www.putdb.com 在线使用或下载到本地使用。
Extjs4中的常用组件：Grid、Tree和Form
dfgf123521的专栏
11-26 363
至此我们已经学习了Data包和布局等API。下面我们来学习作为Extjs框架中我们用得最多的用来展现数据的Grid、Tree和Form吧！ 目录： 5.1. Grid panel 　　5.1.1. Columns 　　5.1.2. Feature 　　　　5.1.2.1. Ext.grid.feature.Grouping 　　　　5.1.2.2. Ext.grid.fe...
杂项：ExtJS
weixin_30569153的博客
10-23 170
ylbtech-杂项：ExtJS extjs是一种软件。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。 1.返回顶部 1、 序言 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮...
extjs中滚动条属性_ExtJS 常用组件属性 及使用方法
weixin_42518930的博客
02-06 539
/*Ext.Panel主要配置表:animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则falseapplyTo Mixed 面板定位autoDestroy Boolean 是否自动销毁从...
ExtJS框架基础：事件模型及其常用功能
chengniugai1684的博客
03-04 170
前言 工作中用ExtJS有一段时间了，Ext丰富的UI组件大大的提高了开发B/S应用的效率。虽然近期工作中天天都用到ExtJS，但很少对 ExtJS框架原理性的东西进行过深入学习，这两天花了些时间学习了下。我并不推荐大家去研究ExtJS框架的源码，虽然可以学习其中的思想和原理，但太 浪费精...
Software knowledge Encyclopedia：extjs是一种软件，自动生成行号，支持checkbox全选
BLOG域名:programb.blog.youkuaiyun.com
10-28 300
在添加了这些插件之后，您的表格应该具有行号显示和复选框全选功能。如果您在实现过程中遇到任何问题，请提供更多的细节，我将很乐意为您提供进一步的帮助。除了行号和全选复选框外，ExtJS还提供了许多其他强大的功能和配置选项，可以进一步增强表格的交互性和可用性。具体的配置可能会因ExtJS的版本和您的具体需求而有所不同，因此请参考您正在使用的ExtJS版本的官方文档以获取更详细的信息和示例。请注意，为了使上述代码正常工作，您需要确保已经正确地引入了ExtJS库，并且您的应用程序已经配置了正确的类路径和依赖关系。
extjs html 指向网页,extjs-mvc结构实践(二):基本页面
weixin_33917277的博客
06-30 333
接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。书接上回，开始写UI效果。目标全屏显示、左侧导航菜单，右侧标签页切换操作内容区域。包含header和footer导航菜单动态ajax产生，点击对应菜单可以动态加载js资源或者数据不要太丑！！！！先扯点概念：一些基本的Extjs概念本文不会去讲，请参考官网API文档。但是对于用java的同志来说，看extjs的结构应该是很容易的定义与创...
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
热门推荐
itlwc
08-17 1万+
1.创建一个简单工具条 效果图 Ext.onReady(function(){ // 创建带三个按钮的工具条 var tb = new Ext.Toolbar({ width : 300, items : [{ text: '新建' },{ text: '修改' }
今天订了一本EXT的书：ExtJS Web应用程序开发指南
diaoqiu7578的博客
12-16 381
在china-pub买的，43块钱，昨天晚上还想要买本书学学EXT，今天看邮件的时候就看到有新书出来了，用的EXT2.0，不知道跟现在的2.2差别大吗？？应该有帮助的吧。 购买地址：http://www.china-pub.com/43585 图书目录： 前言. 第1章　认识ExtJS 1.1　ExtJS的精彩表现 1.2　ExtJS的前世今生 ...
Extjs常用函数和事件.pdf
09-30
在ExtJS中，有一些常用的类、函数和事件，这些是开发人员日常工作中不可或缺的部分。下面我们将详细讨论这些知识点。 1. **Ext.onReady**：这是ExtJS程序启动时调用的第一个函数，确保DOM已经加载完成。它接受一个...
免费 Extjs4.0教程视频
11-14
#### 第十讲：Extjs 4.0的util包 - **util包**： - util包包含了各种实用工具类，如日期处理、数组操作等。 - **详细分析**： - 深入介绍util包中的主要工具类及其使用方法。 #### 高级组件讲解 - **高级组件**：...
第八讲：ExtJS组件之FormPanel(上)
xiaozhengN的博客
11-25 979
示例一：最简单的FormPanel示例。 Ext.onReady(function(){ var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, items:[ new Ext.fo...
ExtJS基础第五讲学习--Extjs窗口组件Window
xiaozhengN的博客
11-10 462
第五讲：窗口组件Window 示例一：显示Window <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/...
第十九讲：ExtJS与服务器交互
xiaozhengN的博客
12-12 456
一、向服务器发送请求。 1.通过Ext.Ajax.request向服务器发送请求。 2.通过url属性来指定发送请求的地址。 3.通过params属性来设置请求参数。（参数的格式是核心） 4.callback属性来指定回调函数。 示例一：发送请求。//这个格式就非常的简单了，但是实际中这样用的并不多 Ext.Ajax.request({ url:"loginServer...
第十讲：ExtJS组件之FormPanel(下)
xiaozhengN的博客
11-25 363
TimeField时间选择框 示例一：简单应用。 Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";   var formPanle = new Ext.FormPanel({ renderTo:"TestTimeFiel...
第二十讲：ExtJS与Struts 2框架整合
xiaozhengN的博客
01-13 340
一、 XML与JSON的生成 示例一：将Java对象转换成XML数据 package com.ibeifeng.xstream;   import com.thoughtworks.xstream.XStream; import com.thoughtworks.xstream.io.xml.DomDriver;   public class T...
第十三讲：ExtJS常用工具类和函数(上)
xiaozhengN的博客
11-25 317
常用工具类和函数。 1. Ext.onReady() Ext.onReady(function(){ Ext.MessageBox.alert("大家好","让我们回味一下!!"); }); 2. Ext.get()    get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象， Ext.Element类是Ext对DOM的封装，代表DO...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值