ext.resizable.html.svn-base
来自「PHP 知识管理系统（基于树结构的知识管理系统）, 英文原版的PHP源码。」· SVN-BASE 代码 · 共 825 行 · 第 1/3 页
SVN-BASE
825 行
<div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.Resizable-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Resizable-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Resizable-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Resizable-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Resizable"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div> <div class="inheritance res-block"><pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a> <img src="resources/elbow-end.gif"/>Resizable</pre></div> <h1>Class Ext.Resizable</h1> <table cellspacing="0"> <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr> <tr><td class="label">Defined In:</td><td class="hd-info">Resizable.js</td></tr> <tr><td class="label">Class:</td><td class="hd-info">Resizable</td></tr> <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a></td></tr> </table> <div class="description"> <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrapthe textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config andthe element will be wrapped for you automatically.</p><p>Here is the list of valid resize handles:</p><pre>Value Description
------ -------------------
'n' north
's' south
'e' east
'w' west
'nw' northwest
'sw' southwest
'se' southeast
'ne' northeast
'all' all</pre><p>Here's an example showing the creation of a typical Resizable:</p><pre><code>var resizer = <b>new</b> Ext.Resizable(<em>"element-id"</em>, { handles: <em>'all'</em>, minWidth: 200, minHeight: 100, maxWidth: 500, maxHeight: 400, pinned: true});resizer.on(<em>"resize"</em>, myHandler);</code></pre><p>To hide a particular handle, set its display to none in CSS, or through script:<br>resizer.east.setDisplayed(false);</p> </div> <div class="hr"></div> <a id="Ext.Resizable-configs"></a> <h2>Config Options</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2">Config Options</th> <th class="msource-header">Defined By</th> </tr> <tr class="config-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-adjustments"></a>
<b>adjustments</b> : Array/String <div class="mdesc">
<div class="short">String "auto" or an array [width, height] with values to be added to the resize operation's new size (defaults to [0,...</div>
<div class="long">
String "auto" or an array [width, height] with values to be <b>added</b> to the resize operation's new size (defaults to [0, 0]) </div>
</div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-animate"></a>
<b>animate</b> : Boolean <div class="mdesc">
True to animate the resize (not compatible with dynamic sizing, defaults to false) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-constrainTo"></a>
<b>constrainTo</b> : Mixed <div class="mdesc">
Constrain the resize to a particular element </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-disableTrackOver"></a>
<b>disableTrackOver</b> : Boolean <div class="mdesc">
True to disable mouse tracking. This is only applied at config time. (defaults to false) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-draggable"></a>
<b>draggable</b> : Boolean <div class="mdesc">
Convenience to initialize drag drop (defaults to false) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-duration"></a>
<b>duration</b> : Number <div class="mdesc">
Animation duration if animate = true (defaults to .35) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-dynamic"></a>
<b>dynamic</b> : Boolean <div class="mdesc">
True to resize the element while dragging instead of using a proxy (defaults to false) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-easing"></a>
<b>easing</b> : String <div class="mdesc">
Animation easing if animate = true (defaults to 'easingOutStrong') </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-enabled"></a>
<b>enabled</b> : Boolean <div class="mdesc">
False to disable resizing (defaults to true) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-handles"></a>
<b>handles</b> : String <div class="mdesc">
String consisting of the resize handles to display (defaults to undefined) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-height"></a>
<b>height</b> : Number <div class="mdesc">
The height of the element in pixels (defaults to null) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-heightIncrement"></a>
<b>heightIncrement</b> : Number <div class="mdesc">
The increment to snap the height resize in pixels (dynamic must be true, defaults to 0) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-listeners"></a>
<b>listeners</b> : Object <div class="mdesc">
<div class="short">A config object containing one or more event handlers to be added to this object during initialization. This should b...</div>
<div class="long">
A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the <a ext:cls="Ext.util.Observable" ext:member="addListener" href="output/Ext.util.Observable.html#addListener">addListener</a> example for attaching multiple handlers at once. </div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#listeners" href="output/Ext.util.Observable.html#listeners">Observable</a></td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-maxHeight"></a>
<b>maxHeight</b> : Number <div class="mdesc">
The maximum height for the element (defaults to 10000) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-maxWidth"></a>
<b>maxWidth</b> : Number <div class="mdesc">
The maximum width for the element (defaults to 10000) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-minHeight"></a>
<b>minHeight</b> : Number <div class="mdesc">
The minimum height for the element (defaults to 5) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-minWidth"></a>
<b>minWidth</b> : Number <div class="mdesc">
The minimum width for the element (defaults to 5) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-minX"></a>
<b>minX</b> : Number <div class="mdesc">
The minimum allowed page X for the element (only used for west resizing, defaults to 0) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-minY"></a>
<b>minY</b> : Number <div class="mdesc">
The minimum allowed page Y for the element (only used for north resizing, defaults to 0) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-multiDirectional"></a>
<b>multiDirectional</b> : Boolean <div class="mdesc">
<div class="short">Deprecated. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option ...</div>
<div class="long">
<b>Deprecated</b>. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option (defaults to false) </div>
</div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-pinned"></a>
<b>pinned</b> : Boolean <div class="mdesc">
<div class="short">True to ensure that the resize handles are always visible, false to display them only when the user mouses over the r...</div>
<div class="long">
True to ensure that the resize handles are always visible, false to display them only when the user mouses over the resizable borders. This is only applied at config time. (defaults to false) </div>
</div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row alt">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-preserveRatio"></a>
<b>preserveRatio</b> : Boolean <div class="mdesc">
True to preserve the original ratio between height and width during resize (defaults to false) </div>
</td>
<td class="msource">Resizable</td>
</tr>
<tr class="config-row">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.Resizable-resizeChild"></a>
<b>resizeChild</b> : Boolean/String/Element <div class="mdesc">
True to resize the first child, or id/element to resize (defaults to false) </div>
</td>
<td class="msource">Resizable</td>
</tr>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?