Element

最新推荐文章于 2023-10-18 14:21:23 发布

zhoushuai3066

最新推荐文章于 2023-10-18 14:21:23 发布

阅读量1.1k

点赞数

分类专栏： Ext 文章标签： function html 浏览器 ext div css

Ext 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

第1章

Ext Core重要概念

在经历了一年多的等待，Ext官方出人意料地推出了一个只有25KB大小的Ext Core 3，此举说明Ext官方已不满足于使用Ext构建Web应用平台，还要在Web 2.0网站开发中与jQuery一较高低。

Ext Core为了实现轻量化，将Ext中的UI部分和与之相关的数据处理部分都剔除了，只保留了DOM操作和遍历、Ajax、事件处理（包括自定义事件）、动画、模板、面向对象机制等内容。本章将重点讲解Ext Core的核心功能。

1.1 Ext.Element

在一个网页文档里包含了许多HTML标签，而这些HTML标签在DOM树中会转换成一个个的HTMLElement，从而便于脚本引用。

由于浏览器DOM操作的差异，为了实现Web框架的跨浏览器特性，每个框架都会构建一个新类，用来操作和遍历DOM树，而在Ext框架中实现该功能的类就是Ext.Element。

Ext.Element类是Ext Core库中方法最多的类，其主要方法大致可归纳为以下几类：

l CSS样式操作（例如：setStyle、addClass）。

l DOM查询与遍历（例如：query、select、findParent）。

l DOM操作（例如：createChild、remove）。

l 尺寸大小操作（例如：getHeight、getWidth）。

下面几小节将简要介绍Ext.Element类的使用和方法。

1.1.1 获取HTMLElement节点的Ext.Element实例

在Ext中，可通过Ext.get方法正获取HTMLElement节点的Ext.Element实例，其语法如下面的代码所示，其中myElementId为HTMLElement的id属性。

var el = Ext.get(el);

//el可以为节点id、DOM节点或已存在的Element

使用Ext.get会创建一个Ext.Element的实例，并可在后期引用时使用。如果不需要创建这个实例，只是对HTMLElement执行一次性的操作，那么可以使用Ext.fly方法。Ext.fly方法并不创建Ext.Element实例，只是利用全局共享的Ext.Element实例进行操作，其语法如下面的代码所示。

Ext.fly(el).getHeight();

//el可以为节点id、DOM节点

如果要将Ext.Element实例赋值给一个变量，然后在后续代码中引用，请一定要使用Ext.get方法，不要使用Ext.fly方法。因为全局共享的Ext.Element实例有可能被后续代码修改，最终得不到你想要的效果，例如下面这段代码。

var el=Ext.fly('id1');

Ext.fly('id2').hide();

el.hide();

上面的代码本来是要隐藏id为“id1”和“id2”的HTML标签，但因为第2行已经修改了全局共享实例，el变量的对象已经变为“id2”的Ext.Element实例，所以运行第3行时，并不能隐藏“id1”。

为什么有了Ext.get方法，还要增加一个Ext.fly方法呢？主要是为了减少内存的使用。试想一下，当创建一个DOM节点的Ext.Element实例时，就需要为其分配内存，如果页面需要操作许多的DOM节点时，内存开销就很大了。在实际应用中，很多时候只是对某个节点执行一次性的操作，譬如修改节点的样式，这时候，如果使用全局共享的Ext.Element实例，就不用创建Ext.Element实例，从而节省内存的开销。

如果你只想返回HTMLElement对象，可使用Ext.getDom方法，其语法如下面的代码所示。

var el=Ext.getDom(el);

//el可以为节点id、DOM节点或已存在的Element

很多开发者在使用Ext.Element操作DOM节点本身的属性和方法时，经常会写以下这样的代码：

var el=Ext.get('elId');

el.innerHTML='Test';

造成这种错误的原因是：把Ext.Element对象当成了HTMLElement对象，正确的写法如下：

var el=Ext.get('elId');

el.dom.innerHTML='Test';

1.1.2 CSS样式操作

Ext.Element提供了11种操作样式方法，下面将介绍这些方法的功能和使用方法。

l addClass：为element增加样式类，其使用方法如下面代码所示。

//只增加一个样式类

Ext.fly('elId').addClass('elCss');

//增加多个样式类

Ext.fly('elId').addClass(['elCss1', 'elCss2',..., 'elCssN']);

l radioClass：与addClass类似，区别在于，该方法会移除相同的样式类，其使用方法可参考addClass。

l removeClass：移除一个或多个样式类，其使用方法可参考addClass。

l toggleClass：样式类开关。如果element已存在某个样式类，执行该方法将移除该样式类；如果不存在，则增加该样式类，其使用方法如下面的代码所示。

//假设elId不存在样式类elCss

Ext.fly('elId').toggleClass('elCss'); //为elId增加类elCss

Ext.fly('elId').toggleClass('elCss'); //删除elId的类elCss

Ext.fly('elId').toggleClass('elCss'); //再次为elId增加类elCss

l hasClass：检查element是否已应用指定的样式类，其使用方法如下面的代码所示。

If(Ext.fly('elId').hasClass('elCss')){

//已应用类elCss时执行

}

l replaceClass：替换一个样式类，其使用方法请看下面的代码。

//使用样式类elCss2替换elCss1

Ext.fly('elId').replaceClass('elCss1','elCss2');

l getStyle：返回element的某个样式属性值，其使用方法请看下面的代码。

var color=Ext.fly('elId').getStyle('color');

l setStyle：设置样式属性，其使用方法请看下面的代码。

//只设置一个属性

Ext.fly('elId').setStyle('color', '#FFFFFF');

//设置多个属性

Ext.fly('elId').setStyle({

color: 'red',

background: 'yellow',

font-weight: 'bold'

})

l getColor：根据传送的属性返回element的颜色值，例如传送“background-color”，则返回背景颜色。要注意的是，无论颜色是使用RGB法还是3位十六进制法设置的，都会以6位十六进制格式返回。例外的是，使用预定义颜色表示法设置的颜色值，会返回预定义的颜色名称。其使用方法及其返回结果如下面的代码所示。

//背景颜色为rgb(221,221,221)

var bgColor=Ext.fly('elId').getColor('background-color');

//返回"#dddddd"

//颜色为#ddd

var color=Ext.fly('elId').getColor('color');

//返回"#dddddd"

//颜色为yellow

var color=Ext.fly('elId').getColor('color');

//返回"#yellow"

l setOpacity：设置element的Opacity值，其使用方法请看下面的代码。

Ext.fly('elId').setOpacity(.5);

//使用动画过渡

Ext.fly('elId').setOpacity(.5,true);

//使用指定动画样式过渡

Ext.fly('elId').setOpacity(.5, {duration: .35, easing: 'easeIn'});

l clearOpacity：清除element的Opacity设置，其使用方法请看下面的代码。

Ext.fly('elId').clearOpacity();

1.1.3 DOM查询与遍历

Ext.Element提供了13种DOM查询与遍历方法，下面简单介绍一下这些方法的功能及其使用方法。

l is：判断当前element是否与选择器选择的element匹配，其使用方法请看下面的代码。

var el=Ext.get('elId');

if(el.is('div.elCss')){

//如果匹配，则执行该处代码

}

l findParent：从当前节点开始查找与选择器匹配的父节点（包含当前节点）。要注意该方法默认返回的是HTMLElement对象，不是Ext.Element对象。如果需要返回Ext.Element对象，则需要设置第3个参数为true。其使用方法如下面的代码所示。

var el=Ext.fly('elId').findParent('div'); //返回HTMLElement

//定位到在当前节点的第4层父节点

var el= Ext.fly('elId').findParent('div',4);

//返回Ext.Element

var el= Ext.fly('elId').findParent('div',null,true);

l findParentNode：从当前节点开始查找与选择器匹配的父节点，该方法的使用方法请参考findParent方法。

l up：是findParentNode方法的缩写，不过该方法返回的是Ext.Element对象，其使用方法请参考findParent方法。

l select：通过选择器选择当前节点下的子节点，该方法的返回值是Ext.CompositeElement对象，其使用方法请看下面的代码。

Ext.fly('elId').select('div');

//如果希望返回的节点是Ext.Element对象，需要设置第2个参数为true

Ext.fly('elId').select('div',true);

注意 Ext.CompositeElement对象是不允许直接通过索引访问其内部元素的，要访问内部元素需要使用item方法。注意，是item方法，不是属性，要使用括号（而不是中括号）包含索引，要遍历对象中的元素可使用each方法。通过getCount方法可获取元素的总数。要定位元素可使用indexOf方法。

l query：通过选择器选择DOM节点，该方法返回包含DOM节点的数组，其使用方法请看下面的代码。

Ext.fly('elId').query('div');

// 上面这句也可以使用以下语句代替

Ext.query('div', Ext.getDom('elId'));

l child：通过选择器返回一个当前节点的子节点，默认返回的是Ext.Element对象，如果需要返回HTMLElement对象，第2个参数需要设置为true，其使用方法请看下面的代码。

Ext.fly('elId').child('div'); //返回Ext.Element对象

Ext.fly('elId').child('div',true); //返回HTMLElement对象

l down：通过选择返回一个当前节点的直接子节点，该方法与child方法类似，唯一不同的是，选择器不能包含节点id，其使用方法可参考child方法。

l parent：返回当前节点的父节点。该方法通过设置第 2 个参数可控制返回的是Ext.Element对象还是HTMLElement对象，其使用语法如下面的代码所示。

Ext.fly('elId').parent(); //返回Ext.Element对象

Ext.fly('elId').parent('',true); //返回HTMLElement对象

//也可以通过选择器选择

Ext.fly('elId').parent('div');

l next：返回与当前节点同层的、除了文本外的下一个节点。该方法的使用方法与parent方法类似。

l prev：返回与当前节点同层的除了文本外的上一个节点。该方法的使用方法与parent方法类似。

l first：返回与当前节点同层的第一个节点。该方法的使用方法与parent方法类似。

l last：返回与当前节点同层的最后一个节点。该方法的使用方法与parent方法类似。

1.1.4 DOM操作

在DOM操作中会经常使用到Ext.DomHelper对象，因此在介绍DOM操作之前我们需要先了解一下Ext.DomHelper对象。

Ext.DomHelper是一个用来生成HTML片段的类，它主要通过定义一个JSON格式的数据生成HTML片段，对开发人员来说，非常灵活方便。它的数据结构主要包括以下4个属性：

l tag：元素的标签，例如div、span之类。

l children：由元素的子元素组成的数组，可以通过该属性不断增加子元素。

l cls：元素的CSS类名。

l html：元素的innerHTML属性，如果不想使用children属性定义元素的内部HTML内容，可使用该属性代替。

譬如要生成以下的HTML片段：

</ul>

其数据定义如下：

var list={

id: 'itemList',

tag: 'ul',

cls: 'list',

children:[

{tag: 'li',html: '1'},

{tag: 'li',html: '2'},

{tag: 'li',html: '3'}

]

}

当然了，如果你不喜欢使用children属性，也可以定义如下：

var list={

id: 'itemList',

tag: 'ul',

cls: 'list',

html: '<li>1</li><li>2</li><li>3</li>'

}

注意在目前版本的Ext Core中不支持createTemplate方法，因此使用DomHelper的模板功能，需要加载Ext 3完整包中的DomeHelpher-more.js文件。

如果需要添加元素的其他属性，例如id、target等，可以直接将属性名称作为JSON数据的标记附加到数据结构上，请看下面这段JSON数据代码：

{

id: 'link1',

tag: 'a',

href: 'url',

target: '_blank',

html: '链接'

}

该段代码将会生成以下的HTML代码：

从上面的例子可以看到，使用Ext.DomHelper的优点是代码简单明了、容易维护，是使用Ext Core必须掌握的知识。

下面将介绍14种DOM操作方法的功能及其使用方法。

l appendChild：在当前节点里追加子节点，其使用方法请看下面的代码。

var el=Ext.get('elId1')

Ext.fly('elId').appendChild('elId1'); //通过id追加

//与上一句作用一样，通过Ext.Element追加

Ext.fly('elId').appendChild(el);

//通过数组追加

Ext.fly('elId').appendChild(['elId1', 'elId2']);

//通过HTMLElement追加

Ext.fly('elId').appendChild(el.dom);

//通过CompositeElement追加

Ext.fly('elId').appendChild(Ext.select('div'));

l appendTo：将当前节点追加到某个节点。其使用方法请看下面的代码。

var el=Ext.get('elId1')

Ext.fly('elId').appendTo('elId1'); //通过id追加

//与上一句作用一样，通过Ext.Element追加

Ext.fly('elId').appendChild(el);

l insertBefore：将当前节点插入某个节点之前。其使用方法可参考appendTo方法。

l insertAfter：将当前节点插入某个节点之后。其使用方法可参考appendTo方法。

l insertFirst：在当前节点中插入1个子节点并作为当前节点的第一个子节点。其使用方法请看下面的代码。

var el=Ext.get('elId1')

Ext.fly('elId').insertFirst('elId1'); //通过id添加

//与上一句作用一样，通过Ext.Element添加

Ext.fly('elId').insertFirst(el);

//通过DomHelper添加

Ext.fly('elId').insertFirst({

tag: 'div',

cls: 'box',

html: 'hello'

})

l replace：使用当前节点替换某个节点。其使用方法可参考appendTo方法。

l replaceWith：将当前节点替换为某个已存在节点或新节点。其使用方法可参考insertFirst方法。

l createChild：在当前节点追加或在指定的节点前插入1个由DomHelper定义的新节点，其使用方法请看下面的代码。

var el= Ext.get('elId');

var c={

tag: 'div',

cls: 'box',

html: 'hello'

};

//追加1个子节点

el.createChild(c);

//在第一个子节点之前插入

el.createChild(c,el.first());

l wrap：在当前节点外绑定一个由DomHelper创建的父节点。其使用方法请看下面的代码。

//假设elid的html代码为：<div id='elId'>test</div>

Ext.fly('elId').wrap();

//执行上面代码后，html代码变成：

//<div id="随机创建的id"><div id="t1">test </div></div>

Ext.fly('elId').wrap({

tag: 'p',

id: 'elId1'

html: 'new test'

});

//执行后html代码变成：

// <p id='elId1'>new test <div id='elId'>test</div></p>

l insertHTML：在当前节点插入HTML代码。该方法需要指定插入位置（beforeBegin、beforeEnd、afterBegin和afterEnd）。该方法默认返回HTMLElement对象，如果需要返回Ext.Element对象，需要设置第3个参数为true。其使用方法及插入位置请看下面的介绍。

假设当前的html代码如下：

</ul>

执行以下代码（位置是“beforeBegin”）：

Ext.fly('elId').insertHtml('beforeBegin', '<p>插入的代码</p>');

则结果将是以下代码：

<p>插入的代码</p>

</ul>

如果执行以下代码（位置是“afterBegin”）：

Ext.fly('elId').insertHtml('afterBegin', '<p>插入的代码</p>');

则结果将是以下代码：

<p>插入的代码</p>

</ul>

如果执行以下代码（位置是“beforeEnd”）：

Ext.fly('elId').insertHtml('beforeEnd', '<p>插入的代码</p>');

则结果将是以下代码：

<p>插入的代码</p>

</ul>

如果执行以下代码（位置是“afterEnd”）：

Ext.fly('elId').insertHtml('afterEnd', '<p>插入的代码</p>');

则结果将是以下代码：

</ul>

<p>插入的代码</p>

l remove：删除当前节点。其使用方法请看下面的代码。

Ext.fly('elId').remove();

l removeNode：在DOM树中删除一个节点。其使用方法如下面的代码所示。

Ext.removeNode(node);//node为HTMLElement对象

l load：使用Ajax调用远程数据更新节点内容。其使用方法如下面的代码所示。

Ext.fly('elId').load({url: 'test.aspx'})

l getUpdater：返回当前节点的Ext.Updater对象。其使用方法如下面的代码所示。

var u= Ext.fly('elId').getUpdater();

//通过update方法更新节点内容

u.update({

url: 'test.aspx'

});

1.1.5 事件处理

由于各浏览器的事件处理模型不同，所以要实现框架的跨浏览器特性，就需要构建一个通用的处理模型，以适应各种浏览器。Ext Core通过Ext.EventObject对象实现了事件处理的跨浏览器特性。

在Ext中要绑定或删除事件非常简单，主要有4种方法，请看下面的介绍。

l addListener/on：为节点绑定事件。on是addListener的简写，其使用方法如下所示。

var el=Ext.get('elId');

el.on('click',function(e,t){

//参数e是Ext.EventObject对象，非浏览器产生的事件对象

//参数t是触发事件的Ext.Element对象

});

//也可以一次定义多个事件

el.on({

'click':{

fn:function(e,t){},

scope:this,

delay:100

'mouseover'{

fn:function(e,t){}

scope:this

}

});

l removeListener/un：删除节点的监听事件。un是removeListener的简写，其使用方法如下所示。

var el=Ext.get('elId');

el.un('click',this.handlerFn);

在Ext Core中还有几个配置方便的高级事件处理方法，如事件委托、缓冲和延时等。这些配置的具体使用请看下面的介绍。

l delegation：事件委托是一种减少内存消耗和防止内存泄漏的技术，其基本思路是基于DOM的事件传播规则（具体信息可参考相关JavaScript书籍），将事件绑定在一组元素的容器元素上，而不是分别为该组元素的每一个元素绑定事件。但这并不意味着可以将所有事件绑定在文档的body元素上，原因是页面内所有事件都执行同一个函数，只会产生消极的影响并降低性能。这项技术一般用于一个下拉日期对话框或由一个容器元素直接包含或几乎直接包含的一组元素，譬如以下HTML代码：

</ul>

通常的做法是为每一个li元素绑定事件，请看以下代码：

Ext.fly('item1').on('click',function(e,t){

//处理过程

)};

Ext.fly('item2').on('click',function(e,t){

//处理过程

)};

Ext.fly('item3').on('click',function(e,t){

//处理过程

)};

使用事件委托技术则可以修改为以下代码：

Ext.fly('elId').on('click',function(e,t){

switch(t.id){

case 'item1':

//处理过程

break;

case 'item2':

//处理过程

break;

case 'item3':

//处理过程

break;

}

)};

基于DOM的事件传播规则，容器elId内的子元素的事件会传播到容器elId，这样就触发了elId绑定的函数，通过返回的子元素id就可以执行相应的代码。从例子中可以看到，事件委托的另一个优点就是无论子节点如何变化，都不需要增减事件绑定代码，只要在switch中添加相应处理代码即可，这样就方便了代码的维护。

l delegate：这是on方法的第4个参数的一个配置选项，其作用是通过一个选择器选择触发事件的目标。譬如以下的HTML代码：

</ul>

在下面的代码中，将为元素elId中绑定“click”事件，并设置delgate参数值为“.list”。

var el=Ext.get('elId');

el.on('click',function(e,t){

console.log(t.id); //结果将显示为"item2"

this,

{

delegate: '.list'

}

);

从代码中可以清楚了解到，delegate将不符合选择要求的项都过滤了，只有类名为“.list”的项才会执行事件代码。

l hover：该方法是Ext Core实现跨浏览器的悬停效果的解决方案，它将确保鼠标在进入或离开元素时执行相应的函数。在IE的原有事件模型里，当鼠标在子元素移动时，浏览器会过滤掉mouserenter和mouserleave事件。Ext Core则避免了这种情况，从而实现了悬停效果的跨浏览器特性。其使用方法请看下面的代码。

function enter(e,t){

t.toggleClass('red');

};

function leave(e,t){

t.toggleClass('red');

};

Ext.fly('elId').hover(over,out);

l removeAllListeners：删除节点所有的监听事件，其使用方法请看下面的代码。

var el=Ext.get('elId');

el.removeAllListeners('click',this.handlerFn);

l single：这是on方法第4个参数的一个配置选项。当设置该值为true时，事件在执行一次后将自动删除。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('click',function(e,t){

//处理过程

this,

{

single: true //只会执行一次单击事件

}

);

l buffer：这是on方法第4个参数的一个配置选项。其作用是在其设置的时间范围（单位是毫秒）内，将只执行一次事件处理。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('click',function(e,t){

//处理过程

this,

{

buffer: 1000 //从事件触发开始，1秒后才会再次响应

}

);

l delay：这是on方法第4个参数的一个配置选项。其作用是在事件触发后，等待设置的时间值（单位是毫秒）后，再执行处理函数。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('click',function(e,t){

//处理过程

this,

{

delay: 1000 //从事件触发开始，1秒后才会执行处理函数

}

);

l target：这是on方法第4个参数的一个配置选项，其作用是只有在事件传播到你设定的目标元素时才执行处理函数。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('click',function(e,t){

//处理过程

this,

{

target: el.up('div') //事件传播到第一个div元素时才执行处理函数

}

);

l normalized：这是on方法的第4个参数的一个配置选项。当设置该参数为false时，传递到处理函数的将是浏览器的事件句柄，而不是Ext.EventObject。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('click',function(e,t){

//e将是浏览器事件句柄，不是Ext.EventObject

this,

{

normalized: false

}

);

l stopPropagation：这是on方法第4个参数的一个配置选项。当设置为true时，将会停止事件传播。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('click',function(e,t){

//处理过程

this,

{

stopPropagation: true //事件将不继续往上传播

}

);

l preventDefault：这是on方法第4个参数的一个配置选项。当设置为true时，将屏蔽默认操作。其使用方法如下面的代码所示。

var el=Ext.get('elId');

el.on('click',function(e,t){

//处理过程

this,

{

preventDefault: true //停止默认操作

}

);

l stopEvent：这是on方法的第4个参数的一个配置选项。当设置为true时，将停止当前事件传播和屏蔽默认操作。该项一般使用在需要使用自己右键菜单替换浏览器默认右键菜单的地方。其使用方法请看下面的代码。

var el=Ext.get('elId');

el.on('contentmenu',function(e,t){

//弹出自己的右键菜单

this,

{

stopEvent: true //停止事件

}

);

1.1.6 尺寸大小

在页面中，通常需要获取或修改页面元素的尺寸或大小。在Ext Core中提供了一个方法来获取或修改元素尺寸大小，而且某些方法还可以配置动画。下面开始简单介绍这些方法的使用。

l getHieght：获取元素的高度（offset height）。其使用方法如下面的代码所示。

var height = Ext.fly('elId').getHieght();

l getWidth：获取元素的宽度（offset width）。其使用方法如下面的代码所示。

var width = Ext.fly('elId').getWidth();

l setHeight：设置元素高度。其使用方法如下面的代码所示。

Ext.fly('elId').setHeight(200);

//使用默认动画方式修改高度

Ext.fly('elId').setHeight(200，true);

//自定义动画方式修改高度

Ext.fly('elId').setHeight(200，{

duration :.5 //动画的持续时间

callback :function(){//处理} //动画结束回调函数

});

l setWidth：设置元素宽度。其具体使用方法请参考setHeight方法。

l getBorderWidth：获取元素指定边的宽度。4条边分别用t（上）、l（左）、r（右）、b（下）4个字母表示，也可以获取由这4个字母组合而成的宽度合值，例如“lr”，表示可获得左边和右边宽度的合值。其使用方法如下面的代码所示。

var borderWidth = Ext.fly('elId').getBorderWidth('lr');

l getPadding：获取元素指定边的边距。与getBorderWidth一样，使用t、l、r、b 4个字母表示4条边，也可以通过组合获取合值。其使用方法可参考getBorderWidth方法。

l clip：保存元素当前的overflow设置和clip设置。可使用unclip取消。其使用方法请看下面的代码。

Ext.fly('elId').clip ();

l unclip：将执行clip方法之后的clip设置还原回原来的设置。其使用方法请看下面的代码。

Ext.fly('elId').unclip();

l isBorderBox：检查浏览器是否使用了border box规则。如果返回true，表示浏览器是IE且使用了非严格模式盒子模型。其使用方法请看下面的代码。

if(Ext.isBorderBox){

//处理过程

}

1.1.7 定位功能

通过Ext Core的定位API，可方便实现跨浏览器的获取或设置元素的位置。类似尺寸API，可在方法中加入动画效果。下面开始简单介绍这22个方法的使用方法。

l getX：获取元素基于页面坐标的X轴位置。元素只有在DOM树下才可以获取坐标值，如果display属性为none或还没插入DOM树，则返回false。其使用方法请看下面的代码。

var x=Ext.fly('elId').getX();

l getY：获取元素基于页面坐标的Y轴位置。与getX方法一样，元素只有在DOM树下才可以获取坐标值。其使用方法请参考getX方法。

l getXY：获取元素基于页面坐标的坐标值，返回值为数组。该方法与getX方法一样，元素只有在DOM树下才可以获取坐标值。其使用方法请参考getX方法。

l setX：设置元素X坐标。该方法与getX方法一样，元素只有在DOM树下才可以设置。其使用方法请看下面代码。

Ext.fly('elId').setX(10);

l setY：设置元素Y坐标。该方法与getX方法一样，元素只有在DOM树下才可以设置坐标值。其使用方法请参考setX方法。

l setXY：设置元素坐标。该方法与getX方法一样，元素只有在DOM树下才可以设置坐标值。其使用方法请看下面代码。

Ext.fly('elId').setXY([10,10]);

l getOffsetsTo：返回元素相对于另一元素的间距。该方法返回的是数组值。该方法与getX方法一样，元素只有在DOM树下才可以设置坐标值。其使用方法请看下面代码。

var offset = Ext.fly('elId').getOffsetsTo(Ext.fly('elId1'));

l getLeft：返回元素左边的X坐标。如果设置参数为true，则返回基于css定义的坐标值，而不是基于页面的坐标值。其使用方法请看下面代码。

var x = Ext.fly('elId').getLeft();

l getRight：返回元素右边的X坐标，实际值为元素的X坐标加上元素宽度。与getleft方法一样，设置参数为true则返回基于css定义的坐标值。其使用方法可参考getLeft方法。

l getTop：返回元素顶部的Y坐标。与getleft方法一样，设置参数为true则返回基于css定义的坐标值。其使用方法可参考getLeft方法。

l getBottom：返回元素底部的Y坐标，实际值为元素Y坐标加上元素高度。与getleft方法一样，设置参数为true则返回基于css定义的坐标值。其使用方法可参考getLeft方法。

l setLeft：设置元素样式left属性的值。其使用方法请看下面代码。

Ext.fly('elId').setLeft(100);

l setRight：设置元素样式right属性的值。其使用方法请参考setLeft方法。

l setTop：设置元素样式top属性的值。其使用方法请参考setLeft方法。

l setBottom：设置元素样式bottom属性的值。其使用方法请参考setLeft方法。

l setLocation：设置元素基于页面坐标的坐标值。其使用方法请看下面代码。

Ext.fly('elId').setLocation(100，200);

l moveTo：设置元素基于页面坐标的坐标值。该方法可设置位置改变时是否使用动画。其使用方法请看下面代码。

Ext.fly('elId').moveTo(100，200);

//使用默认动画

Ext.fly('elId').moveTo(100，200,true);

//使用自定义动画

Ext.fly('elId').moveTo(100，200,{

duration :.5 //动画的持续时间

callback :function(){//处理} //动画结束回调函数

});

l position：预置元素的position属性。如果没有设置position属性，该方法会设置position属性为“relative”。其使用方法请看下面代码。

//设置为relative

Ext.fly('elId').position('relative');

//设置为absolute，z-Index为1000，x坐标为100，坐标为200

Ext.fly('elId').position('absolute',1000，100,200);

l clearPositioning：当文档已经加载完成，将元素position属性并设置回默认值。其使用方法请看下面代码。

Ext.fly('elId').cearPositioning();

Ext.fly('elId').cearPositioning('top');

l getPositioning：获取元素的position属性。通常与setPostitioning方法一起使用，在更新元素后用来恢复设置。其使用方法请看下面代码。

var pos=Ext.fly('elId').getPositioning();

l setPositioning：设置元素position属性。其使用方法请看下面代码。

Ext.fly('elId').setPositioning({

left: 'static',

right: 'auto'

});

l translatePoints：修改元素的left属性值和top属性。其使用方法请看下面代码。

Ext.fly('elId').translatePoints([100,200]);

Ext.fly('elId').translatePoints(100,200);

1.1.8 动画功能

Ext Core通过预置的动画功能，可以让开发人员轻松实现动画功能。通过自定义动画配置，可实现更多的动画效果。在动画完成后，开发人员可通过回调函数实现后续处理。

Ext Core动画插件可选择8个不同定位点来开始或结束动画。这8个定位点的值与描述请看表1-1。

表1-1 Ext Core动画8个定位点的值与描述

值

描述

左上角

顶边中心

右上角

左边中心

右边中心

左下角

底边中心

右下角

下面开始介绍Ext Core预置的12个动画功能。

l slideIn/slideOut：元素的滑进或滑出效果。默认slideIn是从顶部滑进的，而slideOut是从底部滑出的，可通过修改第1个参数设置滑进或滑出位置。其使用方法请看下面代码。

var el = Ext.get('elId');

//从顶部滑进

el.slideIn();

//从底部滑出

el.slideOut();

//从左边滑进

el.slideIn('l',{

easing: 'easeOut',

duration: .5

});

l puff：元素慢慢向四周扩大并逐渐消失。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.puff();

//自定义方式，元素消失后删除元素

el.puff({

easing: 'easeOut',

duration: .5,

remove: true,

useDisplay: false

})

l switchOff：元素闪烁一下，然后往中心折叠（类似关掉电视）。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.switchOff();

//自定义方式，元素消失后删除元素

el.switchOff({

easing: 'easeOut',

duration: .5,

remove: true,

useDisplay: false

});

l highlight：利用设置的颜色高亮显示元素，然后逐渐消隐回原有颜色。默认是设置元素背景颜色，可通过设置attr属性设置高亮显示方式。如果没有初始颜色，可以使用endColor属性设置消隐后的颜色。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.highlight();

//自定义方式

el.highlight('0f0f0f',{

easing: 'easeOut',

attr: 'color'

duration: .5,

endColor: 'dddddd'

});

l frame：从元素边界开始以水波扩散的方式提示用户。其使用方法请看下面代码。

var el = Ext.get('elId');

//默认方式

el.frame();

//自定义方式

el.frame('0f0f0f',{

duration: .5,

});

l pause：在队列中的动画开始之前产生一个停顿。其使用方法请看下面代码。

el.pause(1); //停顿1秒

l fadeIn/fadeout：实现渐变效果。fadeIn方法从透明渐变到不透明。fadeOut方法从不透明渐变到透明。通过endOpacity属性可设置渐变结束后的不透明度。要注意在IE中可能要设置useDisplay属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');

el.fadeIn();

el.fadeOut();

//自定义方式

el.fadeIn({

endpacity: 1,

easing: 'easeOut',

duration: .5

});

l scale：将元素的尺寸从原有尺寸过渡到设置的尺寸。其使用方法请看下面代码。

var el = Ext.get('elId');

el.scale(100，200);

//自定义方式

el.fadeIn(100，200，{

easing: 'easeOut',

duration: .5

});

l shift：元素渐变到新的位置、新的尺寸和不透明度。该方法至少需要位置、尺寸和不透明度其中一项设置，不然元素不会被改变。其使用方法请看下面代码。

var el = Ext.get('elId');

el.shift({

width:100, //元素的新宽度

height: 100, //元素的新高度

x: 10 , //元素的新x坐标

y: 10 , //元素的新y坐标

opacity: .8， //元素的新不透明度

easing: 'easeOut',

duration: .5

});

//以上属性width、height、x、y、opacity至少必须有一项

l ghost：当元素渐隐时，元素同时滑出。可通过第1个参数设置滑出位置。其使用方法请看下面代码。

var el = Ext.get('elId');

el.ghost();

//自定义方式，从左边滑出

el.ghost('l'，{

easing: 'easeOut',

duration: .5,

remove:false,

userDisplay:fase

});

l animate：通过该方法可自定义复杂的动画效果。其使用方法请看下面代码。

var el = Ext.get('elId');

el.animate(

{

borderWith:{to : 3,from:0},

opacity: {to: .5, from:1}

height: {to 100 , from:el.getHeight()},

widht: {to 200 , from:el.getwidth()},

top:{by:-100,unit: 'px'}

1,//动画长度，单位为秒，该参数可选

null, //回调函数，该参数可选

'easeOut',//渐变方式，该参数可选

'run' //动画类型

);

在定义中，borderWidth、opactiy等属性可以为元素的任何样式属性。动画类型包括以下几个类型：

l run：默认类型。

l color：动画渐变背景、文本或边界颜色。

l motion：在渐变过程中使用Bezier曲线作为运动轨迹。

l scroll：已垂直或水平滚动方式运动。

1.1.9 杂项

Ext.Element还有4个常用的方法，请看下面的介绍。

l focus：使元素获得焦点。其使用方法请看下面代码。

Ext.fly('elId').focus();

l blur：使元素失去焦点。其使用方法请看下面代码。

Ext.fly('elId').blur();

l getValue：返回value属性的值。其使用方法请看下面代码。

var v1= Ext.fly('elId').getValue();

var v2= Ext.fly('elId').getValue(true); //返回数字值

l getAttributeNS：返回指定属性名称的值。其使用方法请看下面代码。

//返回属性name的值

var v1= Ext.fly('elId').getAttributeNS('', 'name');

zhoushuai3066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element

第1章 Ext Core重要概念在经历了一年多的等待，Ext官方出人意料地推出了一个只有25KB大小的Ext Core 3，此举说明Ext官方已不满足于使用Ext构建Web应用平台，还要在Web 2.0网站开发中与jQuery一较高低。Ext Core为了实现轻量化，将Ext中的UI部分和与之相关的数据处理部分都剔除了，只保留了DOM操作和遍历、Ajax、事件处理（包括自定义事件
复制链接

扫一扫

专栏目录