本教程旨在为读者了解怎样利用单例对象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
// extendExt.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 fileExt.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;
}
浙公网安备 33010602011771号