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);
运行结果：
