ExtJS:获取Ext元素
来源:互联网 发布:url端口写法 编辑:程序博客网 时间:2024/06/02 20:30
ExtJS:获取Ext元素
操作系统:WIN7
ExtJS版本:ExtJS3.0
浏览器:Google Chrome57.0.2987.98
新建一个文本文件,将扩展名修改为.html,我的文件名为ExtJSTest.html。在文件中编写相关html代码,如:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
将ExtJS的两个js文件复制到与创建的html文件相同的路径下。在html文件中添加js的引用,如:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
</body>
</html>
注意<script>标签的结尾,如果写成:
<script type="text/javascript" src="ext-base.js"/>
用浏览器打开html文件,文件结构将会不正确,如:
html文件内容:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ext-base.js"/>
</head>
<body>
<div id="id_div01">页面上的一个div</div>
</body>
</html>
浏览器打开的html实际结构:
可以看到html文件结构已经混乱,各个标签混在了一起。
所以<script>标签的结尾一定要使用</script>来进行结尾,如:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ext-base.js"></script>
</head>
<body>
<div id="id_div01">页面上的一个div</div>
</body>
</html>
浏览器打开的html实际结构:
可以看到html结构很完整。
对于ExtJS而言,需要引入两个js才可以正常的运行ExtJS的程序,ext-base.js和ext-all.js。少哪个js都不能正常的运行ExtJS程序,会报错误。
在<script type="text/javascript"></script>标签中编写如下代码:
Ext.onReady(function(){
});
用这个函数来注册HTML被加载解析完成后需要执行的代码。一个页面可以多次使用onReady()函数注册多个处理函数,这些函数会被放在事件队列中,在HTML文档加载完成后依次执行。
在onReady()函数中编写获取页面div对象的代码,然后输出下结果,如:
var divObject1 = Ext.get("id_div01");
alert(divObject1);
显示的是[object Object]。我们看看这个到底是什么,利用浏览器的开发者工具,在程序代码上打断点看看divObject的内容,如:
键盘F10让代码往下执行一行,可以看到divObject的内容:
[dom:div#id_div01
id:"id_div01"
_proto_:Object]
dom是Ext获取对象的Dom元素,其中都是Dom的属性值;id是dom元素的id值;_proto_是Ext获取对象的相关方法。那么,通过
var divObject1 = Ext.get("id_div01")方式可以获得Ext元素。除此之外,还可以用另外的方式获取Ext元素:
var divObject2 = Ext.get(document.getElementById('id_div01'))。两种方式获得的效果是一样的。
获取的Ext元素,其类型是Ext.Element的对象。Ext.Element类是Ext对Dom的封装,每个Element 对象都对应着HTML
中的一个 Dom 元素,我们可以为每一个Dom 创建一个对应的Element 对象,并通过Element 对象中的函数来实现对Dom 的指定操作。如,想获得div中的innerHTML属性值,可以通过Ext.get("id_div01").dom获得对象的Dom属性集,获取对应的属性值:
var divDom = Ext.get("id_div01").dom;
var divInnerHTML = divDom.innerHTML;
alert(divInnerHTML);
运行结果:
- ExtJS:获取Ext元素
- EXTjs获取元素
- ExtJS 操作DOM元素Ext.Element
- ExtJs之获取dom元素
- ExtJS学习笔记(十二) Ext 获取组件、获取DOM
- ExtJS获取父子、兄弟容器元素方法
- ExtJS获取父子、兄弟容器元素方法
- ExtJS获取父子、兄弟容器元素方法
- ExtJS获取父子、兄弟容器元素方法
- ExtJS获取父子、兄弟容器元素方法
- Extjs 获取页面元素放到一个combox 中显示
- Extjs 研究 Ext.extend
- 什么是Ext(ExtJs)?
- Extjs学习 Ext.Panel
- Extjs学习 Ext.TabPanel
- Extjs-实用工具 Ext.Template()
- Extjs学习 Ext.Panel
- ExtJS学习------Ext.EventManager
- 查看一个image具体占用的空间
- Windows 2003服务器硬盘增加空间
- KNN算法理解
- 单例模式(饿汉模式和懒汉模式)
- MySQL 集群服务简介
- ExtJS:获取Ext元素
- redis的两种存储方式string和byte对比
- java观察者设计模式
- PDFBox-0.7.3和itextsharp 两张PDF读取
- ssm框架项目导入及解决tomcat部署问题
- LOL好运魄罗限时免费换改名卡
- JS 直接可以new var定义的属性。
- 分子量 UVa1586
- IOS FMDB 获取数据库表和表中的数据