详细实例：

（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. SQL模板和模板实例化

    需求:需要得出一个数据源DataTable,我已知SQL和HttpRequest如何,通过SQL模板的方式去实例化匹配HttpRequest中的参数实例化为查询SQL,最后返回DataTable 1. ...

  2. [linux]linux命令学习-netstat

    linux非常多服务都与网络相关.当服务调不通或者是启动port被占用,或者是又是被防火墙挡住的时候,就须要查询网络相关的问题,netstat命令之前仅仅会用一两个參数这里.好好学习一番. 经常使用的 ...

  3. Ubuntu下SVN命令行递归加入文件夹文件(免去一个一个的加入 --force)

    因为在Linux下一直没有找到好的svn工具(类似于TortiseSVN的).当然eSVN这些也不错,但就是使用上认为还不是很习惯.终于还是选择了svn原始的命令行工具来进行版本号控制操作. 命令行的 ...

  4. 如何制定AxureRP设计体系

    经常有朋友问我,如何在从来没有用过AxureRP的公司或者团队里面开始使用AxureRP做原型设计?这个问题对个体来说不存在,因为个人学习使用AxureRP时非常快速的,基本试着做几个原型实例就能把整 ...

  5. html,JavaScript调用winfrom方法

    ---恢复内容开始--- 目的: 在动画上面添加点击事件,通过JavaScript调用winfrom方法 1.创建一个页面 using System; using System.Collections ...

  6. Libgdx实现异步加载网络图片并保存到SD卡或者data/data目录下边

    Libgdx实现异步加载网络图片并保存到SD卡或者data/data目录下边,当本地有图片的时候,直接从本地读取图片,如果本地没有图片,将从服务器异步加载图片 package com.example. ...

  7. AVL树----java

                                                                                        AVL树----java AVL ...

  8. 核心游记之　page_address_init

    lock_kernel()仅仅虚晃一枪就过去了． 紧接着来的是page_address_init include/linux/mm.h   #if defined(CONFIG_HIGHMEM) &a ...

  9. fedora 搭建pptp vpn server

    1 首先去sourceforge上下载pptpd的源码 http://sourceforge.net/projects/poptop/files/?source=navbar 2 对源码进行编译 ./ ...

  10. openfire学习4------->android客户端聊天开发之聊天功能开发

    前面我们已经把服务器搭建完成,并且在客户端实现了登录了. 和我们使用的QQ一样,想一想,登录成功之后呢?肯定是要有一个好友列表,通过这个列表,我们可以选择我们需要聊天的好友. 这里我们先研究下 xmp ...