详细实例：

（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方法获得的结果。

   
fly方法的结果

 getDom方法的结果

版权声明：本文博客原创文章。博客，未经同意，不得转载。

ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  3. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  4. 谈谈Ext JS的组件——组件基类：Ext.Component

    概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基 ...

  5. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  6. ExtJS学习之路第二步：Ext.Component 和 Ext.dom.Element 的区别

    让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...

  7. Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法

    此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...

  8. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

  9. ExtjS学习--------Ext.define定义类

    Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...

随机推荐

  1. [Windows Phone]常用类库&API推荐

    原文 [Windows Phone]常用类库&API推荐 简介: 把自己的应用程序搭建在稳定的API之上,这会使得我们在开发时能把精力都集中在程序的业务逻辑之上,避免重复造轮子,并且使得程序结 ...

  2. C#的静态构造函数

    “静态构造函数”典型应用于第一次使用类时的初始化工作,注意“第一次”,意思是它只执行一次. 有同学说了,类的初始化不是有构造函数嘛?我们回答:构造函数是每个实例被声明时都会执行的,它属于每一个实例,而 ...

  3. ubunut在系统恢复模式下无法改动rootpassword的分析和解决

    前些日子本猫的ubuntu 14.10貌似出了点问题,想改动下rootpassword,可是无奈原系统有错正常情况下无法改动啊.这是逼我重装的节奏吗? 在ubuntu开机后马上按住left_shift ...

  4. Linux下mpi环境配置与执行步骤（Ubuntu为例）

    转载注明出处: http://blog.csdn.net/bendanban/article/details/9136755 以两台计算机为例,将这两台计算机应用于MPI运行环境. 第一步:在两台机器 ...

  5. LeetCode: LRU Cache [146]

    [题目] Design and implement a data structure for Least Recently Used (LRU) cache. It should support th ...

  6. 创建了一个基于最短路径规划geoserver的wms服务

    两点之间的文章书面请求随机最短路径sql功能,这篇文章是关于如何将上述到系统中的子功能. 1.geoserver登录 首先单击geoserver安装路径下的start Geoserver 待geose ...

  7. Oracle判断指定列是否全部为数字

    select nvl2(translate(name,'\1234567890 ', '\'),'is   characters ','is   number ') from customer_inf ...

  8. linux编程掌握常用命令

    1)编译应用程序 make -f makefile_5_2 clean make -f makefile_5_2 2)关于共享目录 在linux虚拟机的/mnt/hgfs下可看到该文件夹 3)cd命令 ...

  9. Selenium HtmlUnitDriver 多浏览器的支持

    1.HtmlUnitDriver WebDriver包括一个基于HtmlUnit的无界面实现,称为HtmlUnitDriver,即使用HtmlUnit时并不会打开真实的浏览器,而是在内存中执行代码,因 ...

  10. 领略TApplicationEvents的风采

    这是它的声明,它的数据成员全部都是Event,而没有真正意义上的数据(如此一来,几乎可以猜测,它本身什么都做不了): TCustomApplicationEvents = class(TCompone ...