📄 ext.element.html
字号:
<!--Mock<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" /><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>--><style type="text/css"> body { overflow: scroll; } /** .mdesc .long { display: block; } */</style><!-- End Mock--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.Element-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.Element-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.Element-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.Element-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.Element"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.Element</h1> <table cellspacing="0"> <!-- <tr> <td class="label"> Package: </td> <td class="hd-info"> </td> </tr> --> <tr> <td class="label"> Defined In: </td> <td class="hd-info"> Element_Clean.js </td> </tr> <tr> <td class="label"> Class: </td> <td class="hd-info"> Ext.Element </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Object </td> </tr> </table> <div class="description"> Represents an Element in the DOM.<br><br>
Usage:<br>
呈现DOM里面的一个元素。<br><br>
用法：<br>
<pre><code>
var el = Ext.get("my-div");
// or with getEl
// 或者是 getEl
var el = getEl("my-div");
// or with a DOM element
// 或者是一个 DOM element
var el = Ext.get(myDivElement);
</code></pre>
Using Ext.get() or getEl() instead of calling the constructor directly ensures you get the same object
each call instead of constructing a new one.<br><br>
<b>Animations</b><br />
Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
should either be a boolean (true) or an object literal with animation options. Note that the supported Element animation
options are a subset of the <a href="###" onClick="alert('Ext.Fx');">Ext.Fx</a> animation options specific to Fx effects. The Element animation options are:
使用Ext.get或是getEl()来代替调用构造函数，保证每次调用都是获取相同的对象而非构建新的一个。
<br><br>
<b>动画</b><br />
操作DOM元素，很多情况下会用一些到动画效果（可选的）。
动画选项应该是布尔值（true ）或是Object Literal 。动画选项有：
<pre>
Option Default Description
可选项 默认值 描述
--------- -------- ---------------------------------------------
duration .35 动画持续的时间
easing easeOut The easing method
callback none 当动画完成后执行的函数
scope this 回调函数的作用欲（可选的）
duration .35 动画持续的时间（单位：秒）
easing easeOut YUI的消除方法
callback none 动画完成之后执行的函数
scope this 回调函数的作用域
</pre>
Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
manipulate the animation. Here's an example:
另外，可通过配置项中的“anim“来获取动画对象，这样便可停止或操控这个动画效果。例子如下：
<pre><code>
var el = Ext.get("my-div");
// no animation
// 没有动画
el.setWidth(100);
// default animation
// 默认动画
el.setWidth(100, true);
// animation with some options set
// 对动画的一些设置
el.setWidth(100, {
duration: 1,
callback: this.foo,
scope: this
});
// using the "anim" property to get the Anim object
// 使用属性“anim”来获取动画对象
var opt = {
duration: 1,
callback: this.foo,
scope: this
};
el.setWidth(100, opt);
...
if(opt.anim.isAnimated()){
opt.anim.stop();
}
</code></pre>
<b> Composite (Collections of) Elements</b><br />
For working with collections of Elements, see <a href="###" onClick="alert('Ext.CompositeElement');">Ext.CompositeElement</a </div> <div class="hr"> </div> <a id="Ext.Element-configs"></a> <h2>配置项</h2> 这个类没有配置项。 <a id="Ext.Element-props"></a> <h2>公告属性</h2> <table cellspacing="0" class="member-table"> <tr> <th colspan="2"> 属性 </th> <th> 定义者 </th> </tr> <tr class="property-row inherited expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="dom-activeItem"></a> <b> dom: this.</b> <div class="mdesc"> <div class="short">
DOM元素
</div> <div class="long">
DOM元素
</div> </div> </td> <td class="msource"> Element </td> </tr> <tr class="property-row inherited expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="id-activeItem"></a> <b> id: this.</b> <div class="mdesc"> <div class="short">
DOM元素之ID
</div> <div class="long">
DOM元素之ID
</div> </div> </td> <td class="msource"> Element </td> </tr> <tr class="property-row inherited expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="originalDisplay-activeItem"></a> <b> originalDisplay: </b> <div class="mdesc"> <div class="short">
元素默认的显示模式（默认为""）
</div> <div class="long">
元素默认的显示模式（默认为""）
</div> </div> </td> <td class="msource"> Element </td> </tr> <tr class="property-row inherited expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="defaultUnit-activeItem"></a> <b> defaultUnit: </b> <div class="mdesc"> <div class="short">
CSS值的单位。如不指定则默认为px。
</div> <div class="long">
CSS值的单位。如不指定则默认为px。
</div> </div> </td> <td class="msource"> Element </td> </tr> <tr class="property-row inherited expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="VISIBILITY-activeItem"></a> <b> VISIBILITY: </b> <div class="mdesc"> <div class="short">
Visibility mode constant - Use vi... </div> <div class="long">
Visibility mode constant - Use visibility to hide element
显示模式（Visibility mode）的常量 - 使用Visibility来隐藏元素
</div> </div> </td> <td class="msource"> Element </td> </tr> ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -