详细实例:

(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. this小记

    this小记 太久没有研究底层的js相关,今晚差点被紫红爸爸上课了. 正题 var net=new Object(); //定义一个全局变量net net.AjaxRequest=function(u ...

  2. SQL Server 2008中文企业版下载地址和序列号[转]

    SQLSERVER2008下载链接http://sqlserver.dlservice.microsoft.com/dl/download/B/8/0/B808AF59-7619-4A71-A447- ...

  3. 查询mysql哪些表正在被锁状态

    1.查进程,主要是查找被锁表的那个进程的ID SHOW PROCESSLIST; 2.kill掉锁表的进程ID KILL   10866;//后面的数字即时进程的ID

  4. linux系统挂掉问题的分析

    玩linux系统,经常遇到的一件事就是做了某个操作之后系统会突然挂掉,这要怎么办? 1. 首先我们要看log,看看是否会留下一些蛛丝马迹,比如PC/LR是否有留下来. PC是ARM的一个寄存器,即程序 ...

  5. Use GraceNote SDK in iOS(二)获取音乐的完整信息

    在需求彻底明朗化,外加从MusicFans转到GraceNote,再从GraceNote的GNSDK转到iOS SDK后,最终完毕了在iOS上通过音乐的部分信息获取完整信息的功能了.(好吧,我承认是相 ...

  6. oracle逻辑导入小错:提示无法创建日志提示

    ***********************************************声明*************************************************** ...

  7. Leetcode: Median of Two Sorted Arrays. java.

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  8. JavaScript编程:使用DOM操作样式表

    6.使用DOM操作样式表: 操纵元素的Style样式属性:         background-color:style.backgroundColor         color:style.col ...

  9. 在Java中使用MD5和BASE64

    MD5: 在上一篇<Servlet的学习之Session(5)>中,为了能使获取的所有随机数都能有相同的位数,我们采用MD5获取随机数的消息摘要(或称数据指纹.数据摘要等等). MD5可以 ...

  10. JDK 安装以及环境变量的配置(Windows)

    首先下载对应版本的jdk ,然后安装,这里使用的是jdk 1.7的安装的 这个时候,JDK 已经安装完成,打开cmd 输入 java -version 就可以查看到,当前JDK 的版本如图 JDK 安 ...