Ext杂记

1.applyTo是直接使用指定元素来生成组件,
  renderTo是在指定容器内部生成组件(该元素被用作容器)


2.Ext.fly和Ext.get


     Ext.Element是Ext对Dom元素的一个强有力封装,它封装了很多方便对dom操作的接口(并通过Element的dom属性引用对应的 dom元素),因此每创建一个Element元素都将消耗不少的内存(主要是大量的操作接口消耗),因此如果创建过多的Element元素必然导致内存占 用的剧增和系统性能的下降。

Ext.get和Ext.fly返回的都是一个Element对象,但是Ext.get返回的是一个独立的Element,拥有自己独立的操作接口 封装,可以将其返回值保存到变量中,以便以后调用操作等,这样为重用带来了方便。但是它的一个很大缺点就是内存消耗问题,假如调用 Ext.get(id)1000次,则会在内存中创建1000个独立Element,其内存占用可想而知。但是很多时候我们可能仅仅只是对该dom元素执 行一次很简单的操作,如隐藏(hide),这样如果每次都创建一个独立Element放在内存中,实在是对内存的巨大浪费,因此当我们在只需要执行一次操 作或者一个很简单的操作时,采用Ext.get就显得很不合理。Ext.fly正是为了解决这个问题而出现,它通过使每次创建的Element共享内存中 的一套操作接口来达到节省内存的效果。


3.Ext.get和Ext.getCmp


get方法
get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代 表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element 对象上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是 Ext.Element.get的简写形式。
get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码:

Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html页面中包含一个id为hello的div,代码如下:
<div id="hello">tttt</div>

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。

 

getCmp方法-获得Ext组件。
      getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数,也就是组件的id。比如下面的代码:

 

Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:" ",
renderTo:"hello",
width:300,
height:200});
Ext.getCmp("h2").setTitle("新的标题");
});
 

在代码中,我们使用Ext.getCmp("h2").来得到id为h2的组件,并调用其setTitle方法来设置该面板的标题。



4 Ext.getDom


getDom方法-获得DOM节点
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码:

 

Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html:
<div id="hello">tttt</div>
 

在上面的代码中,Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。

 

5

<a href="#" onclick="window.opener=null;window.open('','_self');window.close();" >不确认关闭 </a >
 

 

你可能感兴趣的:(ext)