1. 高亮显示点击的 Dom元素 e.g:
Ext . onReady ( function () {
var paragraphClicked = function ( e ) {
Ext . get ( e . target ). highlight ();
}
Ext . select ( 'p' ). on ( 'click' , paragraphClicked );
});
< p > nihao </ p >
< p > nihao </ p >
< p > nihao </ p >
< p > nihao </ p >
< p > nihao </ p >
2. 点击高亮显示并得到值eg:
Ext . onReady ( function () {
var paragraphClicked = function ( e ) {
var paragraph = Ext . get ( e . target );
paragraph . highlight ();
Ext . MessageBox . show ({
title : 'Paragraph Clicked' ,
msg : paragraph . dom . innerHTML ,
width : 400 ,
buttons : Ext . MessageBox . OK ,
animEl : paragraph
});
}
Ext . select ( 'div' ). on ( 'click' , paragraphClicked );
});
< p > nihao </ p >
< div > gg </ div >
3.
employee_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
reader: new Ext.data.JsonReader({},[ 'id', 'name', 'title', 'hire_date', 'active']),
remoteSort: false
});
employee_name.setValue( d ata.getAt(0).data.name);
4.得到多个相同标签的值返回数组
Ext . onReady ( function () {
var array = Ext . query ( " div " );
// var array = Ext . query ( " div " , " divId " );
alert ( array[ 0 ] . innerHTML );
});
<div>gg1</div>
<div>gg2</div>
<div>gg3</div>
Ext.query("#foo"); //安 id 查找还会数组
Ext.query(".foo"); 同上
// 这会返回一个数组,包含文档的所有元素。
Ext.query("*");
// 这会返回有一个元素的数组,内容为
div
标签下的
p
标签
Ext.query("div p");
// 这会返回有两个元素的数组,内容为
div
标签下的
span
标签
Ext.query("div span");
// 这会得到
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]");
5. CSS值元素选择符
// 获取所以红色的元素
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]
/*
SPAN元素为其父元素的第一个子元素
*/
Ext.query("span:first-child"); // [span.bar]
/*
A元素为其父元素的最后一个子元素
*/
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
/*
SPAN元素为其父元素的第
2
个子元素(由
1
开始的个数)
*/
Ext.query("span:nth-child(2)") // [span.bar]
/*
TR元素为其父元素的奇数个数的子元素
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
/*
LI元素为其父元素的奇数个数的子元素
*/
Ext.query("li:nth-child(even)") // [li, li]
/*
返回A
元素,
A
元素为其父元素的唯一子元素
*/
Ext.query("a:only-child") // [a test.html#]
/*
返回所有选中的(checked
)的
INPUT
元素
*/
Ext.query("input:checked") // [input#chked on]
/*
返回第一个的TR
元素
*/
Ext.query("tr:first") // [tr]
/*
返回最后一个的INPUT
元素
*/
Ext.query("input:last") // [input#notChked on]
/*
返回第二个的TD
元素
*/
Ext.query("td:nth(2)") // [td]
/*
返回每一个包含“
within
”
字符串的
DIV
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
/*
返回没有包含FORM
子元素以外的那些
DIV
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
/*
返回包含有A
元素的那些
DIV
集合
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
/*
返回接着会继续有TD
的那些
TD
集合。
尤其一个地方是,如果使用了colspan
属性的
TD
便会忽略
*/
Ext.query("td:next(td)") // [td, td]
/*
返回居前于INPUT
元素的那些
LABEL
元素集合
*/
Ext.query("label:prev(input)") //[label, label]
6.