ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom
详细实例：
（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）程序执行结果
fly方法的结果
版权声明：本文博客原创文章。博客，未经同意，不得转载。
ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jquery学习：选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- 谈谈Ext JS的组件——组件基类：Ext.Component
概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基 ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- ExtJS学习之路第二步：Ext.Component 和 Ext.dom.Element 的区别
让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...
- Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法
此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...
- Extjs 学习总结-Ext.define自定义类
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...
- ExtjS学习--------Ext.define定义类
Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...
随机推荐
- VIM IDE
打造VIM IDE(针对C语言开发者) ================================使用vim打造IDE, 针对C语言开发者建议使用gvim================== ...
- 超详细SDK Hello World
Windows应用程序的基本运行机制与HelloWin程序详细解 总的来说最基本的Windows应用程序的运行执行顺序总是以如下的基本顺序执行的. 顺序结构: 调用WinMain函数开始执行--à定义 ...
- 配置nexus仓库
Nexus有许多默认仓库:Central,Releases,Snapshots,和3rd Party 1.配置central仓库 Nexus内置了Maven中央代理仓库Central.选择仓库列表中的 ...
- UIViewController加载过程
UIViewController是视图和数据的桥梁,UIViewController是所有controller的基类,ios内置了很多试图控制器,如导航控制器,tableViewController等 ...
- perl学习(8) 控制：unless,until,next,redo,last
Perl中实现了所有C 的操作符! Perl力求代码最少! 1.1.unless unless的含义是:除非条件为真,否则执行块中的代码,和if正好相反 unless($fred=~ /^[A-Z_] ...
- iOS开发 - 应用内打开第三方应用并传值
首先说下这个功能, 应该都有接触过. 比方,你下载了一个电子书,然后选择打开方式的时候,可能会看到你手机中已经安装的阅读类App. 或者,你的QQ收到了某个文件,你也能够选择本地的应用来打开. 那这种 ...
- codeforces 148D 概率DP
题意: 原来袋子里有w仅仅白鼠和b仅仅黑鼠 龙和王妃轮流从袋子里抓老鼠. 谁先抓到白色老师谁就赢. 王妃每次抓一仅仅老鼠,龙每次抓完一仅仅老鼠之后会有一仅仅老鼠跑出来. 每次抓老鼠和跑出来的老鼠都是随 ...
- 重操JS旧业第七弹：面向对象与对象创建
JS是一种完全面向对象的程序设计语言,在面向对象处理方面,具有多种多样的实现方式,加之对象成员的动态性使得这门语言更加灵活:而js对象成员动态性也是创建和扩展对象的有力方式. 1 对象成员动态性 属性 ...
- Winfrom 文本框回车进入下一个个单元格（TextBox）
1.重写方法 OnShown protected override void OnShown(EventArgs e) { base.OnShown(e); foreach (Control ct i ...
- 金蝶盘点机条码数据採集器PDA，WIFI已经连接，可是PDA应用程序还是网络初始化不成功？
PDA任务栏里显示了小电脑.小电脑也是绿色的,为什么PDA还是网络初始化不成功呢? 1.须要检查下server的[PDA后台服务程序]是否打开?假设没有打开请打开[PDA后台服务程序]. 2.须要检查 ...