ExtJS学习-------Ext对Dom的操作：Ext.get Ext.fly Ext.getDom

浏览数：45 / 时间：2015年06月09日

具体实例：

（1）创建JSP文件，引入CSS和js文件，添加三个Div

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '004_base05_dom1.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="styleSheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
	<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" charset="utf-8" src="base/ext_dom.js"></script>

  </head>
  <body>
  			<div id=d1 align="center">我是d1</div>
  			<div id=d2 align="center">我是d2</div>
  			<div id=d3 align="center">我是d3</div>
  </body>
</html>

（2）编写Ext文件

Ext.onReady(function(){

	//Ext.dom.Element
	//Ext.get 使用了缓存机制来提升获取DOM节点的效率 Ext.Element
	
	//get方法的描述:
	/**
	 * 1 首先去Ext.cache缓存里去查找 ，如果缓存里有，直接返回即可
	 * 2 如果缓存里没有 ，那再去页面上去查找 ， 如果页面里没有，返回null
	 * 3 如果页面里有，把当前内容加入到缓存里： { id : {data/events/dom} }
	 * 4 Ext.addCacheEntry加到缓存里的方法
	 */
	var d1 = Ext.get('d1');	//Ext.Element
	alert(d1.dom.innerHTML);
	
	//Ext.fly
	/**
	 * fly:使用了javascript经典的‘享元模式’来提升效率，从而节约内存，更加低碳化
	 * 返回的对象：Fly对象 ，当然你可以理解成为返回的就是Ext封装好的Ext.Element对象
	 * 注意点：fly由于内部使用了享元模式 所以 只适合一次操作 ，从而节省内存
	 */
	 
	 var d2 = Ext.fly('d2');
	 var d3 = Ext.fly('d3');
	 d2.dom.innerHTML = 'AAA'; 
	 d3.dom.innerHTML = 'BBB';
	 
	 /*//注意：正确的方法应该是下面的
	 var d2 = Ext.fly('d2');
	 d2.dom.innerHTML = 'AAA'; 
	 var d3 = Ext.fly('d3');
	 d3.dom.innerHTML = 'BBB';*/
	
	
	//Ext.getDom
	/**
	 * 直接从页面上获取元素的DOM元素
	 */
	var dom = Ext.getDom('d3');  //HTMLElement
	dom.innerHTML="CCCC";	
});

（3）程序运行结果

get方法获得的结果。