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)程序运行结果

   get方法获得的结果。

   
fly方法的结果

 getDom方法的结果

时间: 2024-10-07 02:33:06

ExtJS学习-------Ext对Dom的操作:Ext.get Ext.fly Ext.getDom的相关文章

ExtJs学习笔记1—DOM操作

<div id="myDiv"><p>p标签</p></div> alert(document.getElementById("myDiv").childNodes[0]); //通过childNodes这种方式来获取节点

ExtJS学习----------Ext.Dom.Query类学习(实例)

具体实例: Ext.onReady(function(){ //Ext.DomQuery Ext.create('Ext.Panel',{ title:'Ext.DomQuery示例', width:500 , height:400 , renderTo:Ext.getBody(), html:'<ul><li>item1</li><li>item2</li></ul><div id=d1><span id=sp&g

[ExtJS学习笔记]第八节 Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API: http://docs.sencha.

ExtJS学习--------Ext.Element中的常用事件和其他重要的方法学习(实例)

常用事件: 其他重要方法: 具体实例:(实例结果可以将对应的代码取消注释进行测试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</d

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

Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和示例的下载地址:http://download.csdn.net/detail/z1137730824/7754771) 语法: define( String className, Object data, Function createdFn ) 实例: Ext.onReady(function()

ExtJS学习-------Ext.define的别名和备用名,两种定义静态方法的方法,混入属性和其他属性

(1)Ext.define起别名和备用名 Ext.onReady(function(){ Ext.define('User',{ config:{ name:'张三', age:23 }, //使用别名 alias:'alias_user', //使用备用名 alternateClassName:'alternateClassName_user', constructor:function(config){//构造器 var me=this; me.initConfig(config); } }

ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承

(1)Ext.define的继承extend 具体实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ name:'bjsxt' } , constructor:function(config){ var me = this ; me.initConfig(config); } }); //Sub Class 子类 Ext.define('Boy',{ //使用Ext的继承 extend:'Person

ExtJS学习--------通过WindowGroup(也叫ZIndexManager)来操作window等组件

具体实现代码:(注意:在进行测试的时候最好分别进行测试,测试一个功能的时候将其他功能注释掉,否则会影响效果....)WindowGroup对象的方法可以在其参考文档中进行查看,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893  下载查看 Ext.onReady(function(){//WindowGroup的使用 var wingroup=new Ext.ZIndexManager();//两个都可以 // var wingr

Ext.Net学习笔记01:在ASP.NET WebForm中使用Ext.Net

Ext.Net是一个对ExtJS进行封装了的.net控件库,可以在ASP.NET WebForm和MVC中使用.从今天开始记录我的学习笔记,这是第一篇,今天学习了如何在WebForm中使用Ext.Net控件库. 下载Ext.Net 首先要去Ext.Net网站上下载Ext.Net,我先学习的是WebForm版: 当前版本是3.1.0,压缩包里面包含了不同版本,分别用在相应.net版本的程序中. 在项目中引用 要使用Ext.Net,首先创建一个WebForm程序,我们这里使用4.5版. 在引用管理器