本教程旨在为读者了解怎样利用单例对象Ext.DomQuery,浏览穿梭于DOM树之中和获取对象，提供一个起点。

DomQuery基础

DomQuery的select函数有两个参数。第一个是选择符字符（selector string ）而第二个是欲生成查询的标签ID(TAG ID)。
本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。

这是要入手的html：

<html>
 <head>
 <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
 <script type="text/javascript" src="../ext/ext-base.js"></script>
 <script type="text/javascript" src="../ext/ext-core.js"></script>
 <div id="bar" class="foo">
   I'm a div ==> my id: bar, my class: foo
   <span class="bar">I'm a span within the div with a foo class</span>
   <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
 </div>
 <div id="foo" class="bar">
   my id: foo, my class: bar
   <p>I'm a P tag within the foo div</p>
   <span class="bar">I'm a span within the div with a bar class</span>
   <a href="#">An internal link</a>
 </div>
 </body>
</html>

第一部分：元素选择符Selector

假设我想获取文档内所有的“span”标签：

// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span"); 
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");

注意刚才怎么传入一个普通的字符串作为第一个参数。

按id获取标签，你需要加上“#”的前缀：

// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");

按class name获取标签，你需要加上“.”的前缀：

/*这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");

你也可以使用关键字“*”来获取所有的元素：

// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");

要获取子标签，我们只须在两个选择符之间插入一个空格：

// 这会返回有一个元素的数组，包含p标签的div标签 
Ext.query("div p");
// 这会返回有两个元素的数组，包含span标签的div标签 
Ext.query("div span");

还有三个的元素选择符，待后续的教程会叙述。 ""

如果朋友你觉得这里说得太简单的话，你可以选择到DomQuery 文档看看，可能会有不少收获:)

第二部分：属性选择符Attributes selectors

这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。

// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]"); // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]

现在我们针对特定的class属性进行搜索。

// 这会得到class等于“bar”的所有元素
Ext.query("*[class=bar]");
 
// 这会得到class不等于“bar”的所有元素
Ext.query("*[class!=bar]");
 
// 这会得到class从“b”字头开始的所有元素
Ext.query("*[class^=b]");
 
//这会得到class由“r”结尾的所有元素
Ext.query("*[class$=r]");
 
//这会得到在class中抽出“a”字符的所有元素
Ext.query("*[class*=a]");

第三部分： CSS值元素选择符

这些选择符会匹配DOM元素的style属性。尝试在那份html中加上一些颜色：

<html>
 <head>
 <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
 <script type="text/javascript" src="../ext/ext-base.js"></script>
 <script type="text/javascript" src="../ext/ext-core.js"></script>
 <div id="bar" class="foo" style="color:red;">
   我是一个div ==> 我的id是： bar, 我的class: foo
   <span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>
 </div>
 <div id="foo" class="bar" style="color:fushia;">
   my id: foo, my class: bar
   <p>I'm a P tag within the foo div</p>
   <span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>
   <a href="#" style="color:green;">An internal link</a>
 </div>
 </body>
</html>

基于这个CSS的颜色值我们不会作任何查询，但可以是其它的内容。它的格式规定是这样的：

元素{属性 操作符 值}

注意我在这里是怎么插入一个不同的括号。

所以，操作符（operators）和属性选择符（attribute selectors）是一样的。

// 获取所以红色的元素
Ext.query("*{color=red}"); // [div#bar.foo]
 
// 获取所有粉红颜色的并且是有红色子元素的元素
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
 
// 获取所有不是红色文字的元素
Ext.query("*{color!=red}");
//[html, head, script firebug.js, link, body#ext-gen2.ext-gecko,
// script ext-base.js, script ext-core.js, span.bar,
//a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
 
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}"); // [a www.extjs.com]
 
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}"); // [a www.extjs.com]
 
// 获取所有颜色属性包含“ow”字符的元素
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]

第四部分：伪类选择符Pseudo Classes selectors

仍然是刚才的网页，但是有所不同的只是新加上了一个UL元素、一个TABLE元素和一个FORM元素，以便我们可以使用不同的伪类选择符，来获取节点。

<html>
 <head>
 <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
 <script type="text/javascript" src="../ext/ext-base.js"></script>
 <script type="text/javascript" src="../ext/ext-core.js"></script>
 <div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">
   I'm a div ==> my id: bar, my class: foo
   <span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>
 </div>
 <div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">
  my id: foo, my class: bar
   <p>I'm a P tag within the foo div</p>
   <span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>
   <a href="#" style="color:green;">An internal link</a>
 </div>
 <div style="border:2px dotted pink; margin:5px; padding:5px;">
   <ul>
    <li>Some choice #1</li>
    <li>Some choice #2</li>
    <li>Some choice #3</li>
    <li>Some choice #4 with a <a href="#">link</a></li>
   </ul>
   <table style="border:1px dotted black;">
    <tr style="color:pink">
     <td>1st row, 1st column</td>
     <td>1st row, 2nd column</td>
    </tr>
    <tr style="color:brown">
        <td colspan="2">2nd row, colspanned! </td>
    </tr>
    <tr>
     <td>3rd row, 1st column</td>
     <td>3rd row, 2nd column</td>
    </tr> 
   </table>
 </div>
 <div style="border:2px dotted red; margin:5px; padding:5px;">
   <form>
    <input id="chked" type="checkbox" checked/><label for="chked">I'm checked</label>
    <br /><br />
    <input id="notChked" type="checkbox" /><label for="notChked">not me brotha!</label>
   </form>
 </div>
 </body>
</html>
 

接着：

/*
 this one gives us the first SPAN child of its parent
*/
Ext.query("span:first-child"); // [span.bar]
 
/*
 this one gives us the last A child of its parent
*/
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
 
/*
 this one gives us the second SPAN child of its parent
*/
Ext.query("span:nth-child(2)") // [span.bar]
 
/*
 this one gives us ODD TR of its parents
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
 
/*
 this one gives us even LI of its parents
*/
Ext.query("li:nth-child(even)") // [li, li]
 
/*
 this one gives us A that are the only child of its parents
*/
 
Ext.query("a:only-child") // [a test.html#]
 
/*
 this one gives us the checked INPUT
*/
Ext.query("input:checked") // [input#chked on]
 
/*
 this one gives us the first TR
*/
Ext.query("tr:first") // [tr]
 
/*
 this one gives us the last INPUT
*/
Ext.query("input:last") // [input#notChked on]
 
/*
 this one gives us the 2nd TD
*/
Ext.query("td:nth(2)") // [td]
 
/*
 this one gives us every DIV that has the "within" string
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
 
/*
 this one gives us every DIV that doesn't have a FORM child
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
 
/*
 This one gives use every DIV that has an A child
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
 
/* 
 this one gives us every TD that is followed by another TD. 
 obviously, the one that has a colspan property is ignored.
*/
Ext.query("td:next(td)") // [td, td]
 
/*
 this one gives us every LABEL that is preceded by an INPUT
*/
Ext.query("label:prev(input)") //[label, label]

扩展EXT组件

要创建的扩展是一个在文字前面能够显示图标的这么一个Ext.form.Combobox。将其中一个功能举例来说，就是要在一块选择里，国家名称连同国旗一并出现。

我们先给扩展起个名字，就叫Ext.ux.IconCombo。

文件的创建

首要的步骤是准备好开发中将会使用的文件。需下列文件：

·     iconcombo.html: 新扩展将会使用的 html markup

·     iconcombo.js: 程序javascript代码

·     Ext.ux.IconCombo.js: 扩展的javascript文件

·     Ext.ux.IconCombo.css: 扩展样式表

iconcombo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="Ext.ux.IconCombo.css">
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="Ext.ux.IconCombo.js"></script>
    <script type="text/javascript" src="iconcombo.js"></script>
    <!-- A Localization Script File comes here -->
    <script type="text/javascript">Ext.onReady(iconcombo.init, iconcombo);</script>
    <title>Ext.ux.IconCombo Tutorial</title>
</head>
<body>
<div style="position:relative;width:300px;top:24px;left:64px;font-size:11px">
    <div>Icon combo:</div>
    <div id="combo-ct"></div>
</div>
</body>
</html>

该文件来自教程Ext程序规划入门 的轻微修改。

iconcombo.js

/**
 * Ext.ux.IconCombo Tutorial
 * by Jozef Sakalos, aka Saki
 * http://extjs.com/learn/Tutorial:Extending_Ext_Class
 */
 
// 引用本地空白文件
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 
// 创建程序
iconcombo = function() {
 
    // 公共空间
    return {
        // public properties, e.g. strings to translate
 
        // public methods
        init: function() {
            var icnCombo = new Ext.ux.IconCombo({
                store: new Ext.data.SimpleStore({
                    fields: ['countryCode', 'countryName', 'countryFlag'],
                    data: [
                        ['US', 'United States', 'x-flag-us'],
                        ['DE', 'Germany', 'x-flag-de'],
                        ['FR', 'France', 'x-flag-fr']
                    ]
                }),
                valueField: 'countryCode',
                displayField: 'countryName',
                iconClsField: 'countryFlag',
                triggerAction: 'all',
                mode: 'local',
                width: 160
            });
            icnCombo.render('combo-ct');
            icnCombo.setValue('DE');
        }
    };
}(); // end of app
 
// end of file

我们在这个文件中创建IconCombo，以便可以进行扩展和测试。

Ext.ux.IconCombo.js

// Create创建用户的扩展（User eXtensions namespace (Ext.ux)）
Ext.namespace('Ext.ux');
 
/**
 * Ext.ux.IconCombo 扩展类
 *
 * @author Jozef Sakalos, aka Saki
 * @version 1.0
 *
 * @class Ext.ux.IconCombo
 * @extends Ext.form.ComboBox
 * @constructor
 * @param {Object} config 配置项参数
 */
Ext.ux.IconCombo = function(config) {
 
    // 调用父类的构建函数
    Ext.ux.IconCombo.superclass.constructor.call(this, config);
 
} // Ext.ux.IconCombo构建器的底部
 
// 进行扩展
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
 
}); // 扩展完毕
 
// 文件底部

运行到这一步，实际这是一个没有对Ext.form.ComboBox新加任何东西的空扩展。我们正是需要这个完成好的空扩展，再继续下一步。

Ext.ux.IconCombo.css

.x-flag-us {
    background-image: url(../img/flags/us.png);
}
.x-flag-de {
    background-image: url(../img/flags/de.png);
}
.x-flag-fr {
    background-image: url(../img/flags/fr.png);
}

路径可能根据你所在的国旗放置目录有所不同。国旗的资源可在here下载。

Let's go

So far so good！如果你浏览iconcombo.html应该会发现一个包含三个选项的标准combo,而德国的那个是选中的...是吧？不过还没有图标...

现在正是开始工作。在调用父类构建器之后加入下列行：

this.tpl = config.tpl ||
      '<div class="x-combo-list-item">'
    + '<table><tbody><tr>'
    + '<td>'
    + '<div class="{' + this.iconClsField + '} x-icon-combo-icon"></div></td>'
    + '<td>{' + this.displayField + '}</td>'
    + '</tr></tbody></table>'
    + '</div>'
;

在这一步，我们将默认combox box的模版重写为iconClsField模版。

现在加入Ext.ux.IconCombo.css中的样式文件：

.x-icon-combo-icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    width: 18px;
    height: 14px;
}

不错！可以测试一下了，刷新的页面，还好吧！？嗯，列表展开时那些漂亮的图标就出来了。。还有。。我们不是要在关闭时也出现图标的吗？

在构建器中加入创建模版的过程：

this.on({
    render:{scope:this, fn:function() {
        var wrap = this.el.up('div.x-form-field-wrap');
        this.wrap.applyStyles({position:'relative'});
        this.el.addClass('x-icon-combo-input');
        this.flag = Ext.DomHelper.append(wrap, {
            tag: 'div', style:'position:absolute'
        });
    }}
});

加入 事件render的侦听器，用于调整元素样式和创建国旗的div容器。如后按照下列方式进行扩展：

// 进行扩展
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
 
    setIconCls: function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    },
 
    setValue: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    }
 
}); // 扩展完毕

新增 setIconCls函数并重写setValue函数。我们还是需要父类的setValue的方法来调用一下，接着再调用setIconCls的函数。最后，我们应该在文件Ext.ux.IconCombo.css加入下列代码：

.x-icon-combo-input {
    padding-left: 26px;
}
.x-form-field-wrap .x-icon-combo-icon {
    top: 3px;
    left: 6px;
}

完成

最后再刷新一下，如果一切顺利，那这个就是新的Ext.ux.IconCombo扩展！ 希望你能在此基础上扩展更多的组件！

谢谢Brian Moeskau提醒，使得能进一步精简Ext.ux.IconCombo 代码，才称得上最终版本。最终代码和CSS为：

Ext.ux.IconCombo.js

// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');
 
/**
 * Ext.ux.IconCombo Extension Class
 *
 * @author Jozef Sakalos
 * @version 1.0
 *
 * @class Ext.ux.IconCombo
 * @extends Ext.form.ComboBox
 * @constructor
 * @param {Object} config Configuration options
 */
Ext.ux.IconCombo = function(config) {
 
    // call parent constructor
    Ext.ux.IconCombo.superclass.constructor.call(this, config);
 
    this.tpl = config.tpl ||
          '
{' 
        + this.displayField 
        + '}
'
    ;
 
    this.on({
        render:{scope:this, fn:function() {
            var wrap = this.el.up('div.x-form-field-wrap');
            this.wrap.applyStyles({position:'relative'});
            this.el.addClass('x-icon-combo-input');
            this.flag = Ext.DomHelper.append(wrap, {
                tag: 'div', style:'position:absolute'
            });
        }}
    });
} // end of Ext.ux.IconCombo constructor
 
// extend
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
 
    setIconCls: function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    },
 
    setValue: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    }
 
}); // end of extend
 
// end of file

Ext.ux.IconCombo.css

css

/* application specific styles */
.x-flag-us {
    background-image:url(../img/flags/us.png);
}
.x-flag-de {
    background-image:url(../img/flags/de.png);
}
.x-flag-fr {
    background-image:url(../img/flags/fr.png);
}
 
/* Ext.ux.IconCombo mandatory styles */
.x-icon-combo-icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    width: 18px;
    height: 14px;
}
.x-icon-combo-input {
    padding-left: 25px;
}
.x-form-field-wrap .x-icon-combo-icon {
    top: 3px;
    left: 5px;
}
.x-icon-combo-item {
    background-repeat: no-repeat;
    background-position: 3px 50%;
    padding-left: 24px;
}

转载于:https://www.cnblogs.com/tgyun/archive/2009/06/22/ext3.html

DomQuery基础相关推荐

  1. Tutorial:DomQuery Basics(DomQuery的基础)

    DomQuery基础 DomQuery的select函数有两个参数.第一个是选择符字符(selector string )而第二个是欲生成查询的标签ID(TAG ID).本文中我准备使用函数" ...

  2. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  3. java入门 慕路径,Java入门基础知识总结学习教程大全【必看经典】

    类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...

  4. 提交表单自动刷新_Web自动化测试：元素的基础操作和浏览器基础操作

    上一节,我们了解了如何定位元素,其实也有涉及对于元素的操作,这一节我们就详细的介绍一下对于元素的操作和对于浏览器的一些操作 一.对于元素的基础操作: clear():清除输入框内的文本 send_ke ...

  5. java mybatis基础

    java mybatis基础 1.1 什么是mybatis? mybatis是一个优秀的持久层框架. 避免几乎所有的JDBC代码和手动设置参数以及获取结果集的过程. 可以使用简单的xml或者注解来配置 ...

  6. 【J2SE】学习基础

    Java基础 语法基础 OO Exception Array 基础类 I/O Stream Collection/Generic Thread TCP/UDP GUI Meta Data Regula ...

  7. 【Linux系统】基础总结

    我不太清楚运维部门具体是做什么的,就接触过一点点运维部门! 也就是是知道他们负责管理服务器,管理网络,管理项目部署 偶尔自己需要部署,不得不接触一些linux命令.简单总结一些基础 linux系统发展 ...

  8. 【Java 2 Platform Enterprise Edition】基础

    问题1:为什么java是无关平台? 你之前用C或者C++写的源代码,编译好后,换一种操作系统,可能就执行不了了.因为新的操作系统不识别,你需要修改你的源码,并在新的操作系统上重新编译才能运行,比如Wi ...

  9. SpringCloud Alibaba微服务实战(一) - 基础环境搭建

    说在前面 Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来 ...

最新文章

  1. 因用了Insert into select语句，同事被开除了！
  2. Linux yum 命令详解 源配置
  3. 2020人工神经网络第一次作业-参考答案第二部分
  4. 横竖三个数的和相等_怎样证明 0.999… = 1？数值上是相等的，那么两者的区别是什么？...
  5. c语言变量相等问题穷举法,C语言穷举法经典例题.ppt
  6. oracle中创建一个用户，只能查看指定的视图，如何授权，创建别名
  7. postgresql 配置redis_自建 Gitlab (邮箱配置、拆分 PostgreSQL、Redis) + 随想
  8. 蚂蚁移动开发平台 mPaaS 3.0 智能化 + 生态化 1
  9. 小学数学与计算机整合课优质教案,优秀小学数学教学案例【小学数学教学与信息技术的结合】...
  10. 游戏策划案应该分哪几个方面来编写？制作游戏系统应该准备整理那些方面的内容？游戏策划相关分析
  11. jpg格式怎么转换成plt格式的_JPEG格式图片转PLT格式雕刻输出
  12. 评价类算法之AHP层次分析法
  13. 中国微型电动车行业市场供需与战略研究报告
  14. c语言求圆锥的表面积和体积_C语言-圆形体体积计算器，1：计算球体；2：计算圆柱体；3：计算圆锥体...
  15. 如何高效的开展测试工作？
  16. wii手柄_Wii时代的隐藏宝石
  17. 物联网关键技术————RFID
  18. 14-eval 函数
  19. 细化(thinning)
  20. 28个Unix/Linux的命令行神器

热门文章

  1. 女子高铁劝阻小孩踢椅背遭掌掴何从法律角度解读？
  2. 学术前沿丨大数据在劳动力市场研究中的应用与展望
  3. GDCPC2016题解 by lby@SYSU | Asiimov
  4. 时区 java 巴黎_java中的时区陷阱 - iasuna
  5. 旭元数艺：以科技创新的力量共度传统佳节
  6. 树莓派4b hat板机械图ad版（ad6.9）
  7. software reporter tool占用高_裸车18万喜提沃尔沃S60L，车主：档次不输迈腾，性价比很高_搜狐汽车...
  8. 大学小学期实践课程第六课：车辆动力学标定
  9. 超五类屏蔽双绞线和计算机电缆区别,超五类屏蔽双绞线英文说明
  10. uni-app获取用户所在地