1.获取dom
通过id获取：
var el = Ext.get("my-div");
通过DOM元素引用：
var el = Ext.get(myDivElement);
如果此Dom节点只操作一次的话,为了节省内存,建议使用fly()方法,如：
Ext.fly("my-div").getHeight();
2.操作dom
Ext,get('my-div')得到的是Ext.Element,而不是HTMLElement，所以操作的时候应该：
var el=Ext.get('elId');
el.dom.innerHTML='Test';
Ext操作样式：
Ext.fly('elId').addClass('elCss'); //还可删除,替换样式类
Ext.fly('elId').setStyle({
color: 'red',
background: 'yellow',
font-weight: 'bold'
}) //还可以获得属性
Ext选择器:
query：通过选择器选择DOM节点 ,如：
Ext.query('div', Ext.getDom('elId'));
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");
// 这会返回有一个元素的数组，包含p标签的div标签
Ext.query("div p");
// 这会返回有两个元素的数组，包含span标签的div标签
Ext.query("div span");
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]"); // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
// 这会得到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]");
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
<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>
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
// 获取所以红色的元素
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]
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
<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>
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
Ext.query("span:first-child"); // [span.bar]
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
Ext.query("span:nth-child(2)") // [span.bar]
Ext.query("tr:nth-child(odd)") // [tr, tr]
Ext.query("li:nth-child(even)") // [li, li]
Ext.query("a:only-child") // [a test.html#]
Ext.query("input:checked") // [input#chked on]
Ext.query("tr:first") // [tr]
Ext.query("input:last") // [input#notChked on]
Ext.query("td:nth(2)") // [td]
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
Ext.query("td:next(td)") // [td, td]
Ext.query("label:prev(input)") //[label, label]
通过id获取：
var el = Ext.get("my-div");
通过DOM元素引用：
var el = Ext.get(myDivElement);
如果此Dom节点只操作一次的话,为了节省内存,建议使用fly()方法,如：
Ext.fly("my-div").getHeight();
2.操作dom
Ext,get('my-div')得到的是Ext.Element,而不是HTMLElement，所以操作的时候应该：
var el=Ext.get('elId');
el.dom.innerHTML='Test';
Ext操作样式：
Ext.fly('elId').addClass('elCss'); //还可删除,替换样式类
Ext.fly('elId').setStyle({
color: 'red',
background: 'yellow',
font-weight: 'bold'
}) //还可以获得属性
Ext选择器:
query：通过选择器选择DOM节点 ,如：
Ext.query('div', Ext.getDom('elId'));
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");
// 这会返回有一个元素的数组，包含p标签的div标签
Ext.query("div p");
// 这会返回有两个元素的数组，包含span标签的div标签
Ext.query("div span");
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]"); // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
// 这会得到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]");
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
<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>
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
// 获取所以红色的元素
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]
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
<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>
query的使用方法及介绍" alt=程序代码 src="http://www.sloppy.cn/blog/images/code.gif" real_src="http://www.sloppy.cn/blog/images/code.gif"> 程序代码
Ext.query("span:first-child"); // [span.bar]
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
Ext.query("span:nth-child(2)") // [span.bar]
Ext.query("tr:nth-child(odd)") // [tr, tr]
Ext.query("li:nth-child(even)") // [li, li]
Ext.query("a:only-child") // [a test.html#]
Ext.query("input:checked") // [input#chked on]
Ext.query("tr:first") // [tr]
Ext.query("input:last") // [input#notChked on]
Ext.query("td:nth(2)") // [td]
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
Ext.query("td:next(td)") // [td, td]
Ext.query("label:prev(input)") //[label, label]
分享到：
发表评论
-
EXT中Menu和ComboBox的BUG及解决方法
2011-04-26 19:58 1485最近一直在玩Ext,所以可 ... -
tabpanel的激活模式
2011-04-13 00:58 933listeners : { render : func ... -
ExtJs非Iframe框架加载页面实现
2011-04-09 00:32 3911在用Ext开发App应用时，一般的框架都是左边为菜单栏，中 ... -
EXTJS FORM textField emptyText 空值提交的解决办法
2011-04-02 01:10 4834Ext的textField有一个emptyText属性用起来很 ... -
项目开发中遇到的extjs常见问题
2011-03-31 22:16 1933事件触发机制 l ... -
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中使用 启用了事件验证。
2011-03-28 23:35 1274回发或回调参数无效。在配置中使用 <pages enab ... -
extjs 如何自动缩放
2011-03-24 00:03 1584例如 可编辑的grid面板 var grid_mate ... -
Extjs 开发使用
2011-03-13 16:24 1957extjs基础 extjs基础 extjs ... -
Extjs ajax实现文本框(TextField)联想功能
2011-03-13 16:19 2349<%@ page language="ja ... -
Extjs EditorGrid 可编辑表格控件
2011-03-03 23:26 1885定义Ext.grid.ColumnModel时，列的信息项ed ... -
调试ExtJs利器 - Firebug(Firefox插件)
2011-02-25 00:22 1124Firebug是一个Firefox插件,集HTML查看和编辑、 ... -
调试ExtJs利器 - Full Source(IE插件)
2011-02-25 00:19 1009Full Source是一个Internet Explorer ... -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:17 843ExtJs的智能提示插件-Spket(Eclipse) -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:16 1522选择Help -> Software Updates - ... -
EXTJS accordion layout event
2011-02-24 20:14 1261EXTJS 的 accordion layout 布局在API ... -
extjs 相关PPT
2011-02-24 20:13 1031布局介绍和开发相关介绍 -
EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
2011-02-23 00:01 1054制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返 ... -
去掉修改后extjs中grid 左上角的红三角
2011-02-17 13:54 1467gridpanel.on('afteredit',functi ... -
可输入可联想的下拉列表的实现——Ext ComboBox
2011-02-17 13:36 1891网上这样的控件不少，有很多实现方法，其中不少的很巧妙。 ... -
extjs更换皮肤
2011-02-12 13:53 2038<head runat="server&quo ...
相关推荐
记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候，用JQuery操作的。毕业工作后是从事C++方面的编程，两年后，又重新解决了网页编程，不过这次不是用JQuery了，用的是ExtJS。就我经验来看，程序员是一个需要...
Element是EXTJS操作DOM的基础，提供了丰富的API来处理DOM元素的选择、样式修改、事件处理等。 "获取多个DOM的节点"介绍了EXTJS中选择和操作多个DOM元素的方法，如使用Selector选择器和DomQuery，这些都是EXTJS增强...
5. DOM操作：通过EXTJS对DOM进行操作，构建发送短信的表单界面。 遗憾的是，由于没有具体的代码或详细文档，我们无法深入探讨实现细节，只能根据提供的信息推测项目的架构和关键技术。如果能获取更多项目资源，将有...
- **DomHelper类**: 提供了一种简洁的方法来创建和操作DOM元素。 - **XTemplate类**: 用于生成动态HTML模板，支持数据绑定。 #### 7. 格式化功能 Extjs的`Ext.util.Format`类提供了一组内置的格式化函数，用于文本...
在EXTJS中，DOM节点获取是通过Element类实现的，这是一个封装了原生DOM操作方法的类，使得操作DOM元素变得更加方便和安全。Element类中包含很多方法来获取和操作DOM元素，如：get、query、select等方法。通过这些...
- **底层API（core）**：这是EXTJS的基础，包含DOM操作、事件处理、查询器等功能，如`DomHelper.js`和`Element.js`。 - **控件（widgets）**：EXTJS提供了大量的可视化组件，如面板、表格、树、窗口等，它们都基于...
- **DOM操作**：ExtJS简化了对DOM的操作，使得开发者能够更加高效地操纵网页元素。 #### 3. 构建开发环境 - **安装Sencha Cmd**：Sencha Cmd是一款命令行工具，用于管理和构建ExtJS项目。安装此工具是开始ExtJS...
开发人员可以通过监听鼠标事件和利用DOM操作，实现元素的位置调整。 再者，"多级开始菜单"是桌面应用中常见的一种组织和访问功能。在ExtJS 4.2 Desktop拓展中，开始菜单可以有层次结构，用户可以轻松地浏览和启动...
返回的是一个Element对象，可以直接进行DOM操作。如果需要根据特定选择器获取一组元素，可以使用EXTJS提供的选择器功能，例如获取所有class为'myClass'的元素。 EXTJS4的学习文档还包括更多关于组件、布局、数据...
手册将详细解析Ext Core中的组件、DOM操作和事件处理，帮助开发者理解其精简但强大的特性。 在学习这些文档时，建议首先从"EXT 中文手册"入手，了解EXT库的基本概念和组件，然后通过"ExtJS实用开发指南"掌握如何将...
这意味着开发者无需手动编写大量DOM操作和事件处理代码，只需要关注于UI设计和逻辑结构，极大地简化了开发流程。 5. **提高开发效率**：对于ExtJS开发者来说，界面设计器减少了编写和调试前端代码的时间，使得他们...
`Ext.get`返回的是一个Element对象，你可以使用Element.dom直接操作底层的DOM节点。如果你需要获取一组具有相同特征的元素，可以使用选择器，如`var ps = Ext.select('p')`，这将返回页面上所有`<p>`标签的集合。 ...
这部分内容可能会讲解如何使用EXTJS的API高效地操作DOM，以及它如何提高性能和代码可读性。 3. **ExtJSEvents**： 事件处理是EXTJS中的关键部分，允许用户与UI进行交互。这部分PPT可能涵盖了EXTJS中的事件模型，...
**Element**是ExtJs中最核心的概念之一，它为DOM操作提供了统一而强大的API。 ##### **3.1 获取DOM节点** 传统JavaScript中，我们通常使用`document.getElementById('id')`获取DOM节点。这种方法虽然有效，但在...
在机器上安装完上述软件后，需要进行如下操作来准备ExtJS开发环境： 1. **部署WebBuilder**：WebBuilder是一个可视化开发环境，可以通过其提供的安装向导完成安装。下载WebBuilder的安装包，并解压至合适的位置。 2...
HTML是EXTJS应用的基石，EXTJS组件通过扩展和操作DOM来呈现和交互。 "ExtDocs.CHM"可能包含了EXTJS的扩展或附加文档，可能是开发者社区提供的额外教程、最佳实践或者特定问题的解决方案。 "ext_core_manual_zhcn....
- **DOM操作**：确保所有的DOM操作（如元素的选择、创建等）符合ExtJS 3.x的API要求。 - **样式和布局**：根据新版框架中的样式和布局规则调整组件样式，确保UI的一致性和美观。 - **事件绑定**：更新事件绑定方式，...