📄 ext.resizable.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.Resizable-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.Resizable-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.Resizable-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.Resizable-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.Resizable"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.Resizable</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"> Resizable.js </td> </tr> <tr> <td class="label"> Class: </td> <td class="hd-info"> Ext.Resizable </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Ext.util.Observable </td> </tr> </table> <div class="description"> <p>在元素上应用拖动柄以使其支持缩放。拖动柄是嵌入在元素内部的且采用了绝对定位。某些元素, 如文本域或图片, 不支持这种做法。为了克服这种情况, 你可以把文本域打包在一个 Div 内, 并把 "resizeChild" 属性设为 true(或者指向元素的 ID), <b>或者</b>在配置项中设置 wrap 属性为 true, 元素就会被自动打包了。</p>
<p>下面是有效的拖动柄的值列表:</p>
<pre>
值 说明
------ -------------------
'n' 北(north)
's' 南(south)
'e' 东(east)
'w' 西(west)
'nw' 西北(northwest)
'sw' 西南(southwest)
'se' 东北(southeast)
'ne' 东南(northeast)
'all' 所有
</pre>
<p>下面是展示的是创建一个典型的 Resizable 对象的例子:</p>
<pre><code>
var resizer = new Ext.Resizable("element-id", {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
resizer.on("resize", myHandler);
</code></pre>
<p>想要隐藏某个缩放柄, 可以将它的CSS样式中的 display 属性设为 none, 或者通过脚本来实现:<br>
resizer.east.setDisplayed(false);</p>
@cf </div> <div class="hr"> </div> <a id="Ext.Resizable-configs"></a> <h2>配置项</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2"> 配置项 </th> <th class="msource-header"> 定义者 </th> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="resizeChild-header"></a> <b>resizeChild</b> : Boolean/String/Element <div class="mdesc"> <div class="short"> 值为 true 时缩放首个子对象, 或者值为 id/element 时... </div> <div class="long"> 值为 true 时缩放首个子对象, 或者值为 id/element 时缩放指定对象(默认为 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="minWidth-header"></a> <b>minWidth</b> : Number <div class="mdesc"> <div class="short"> 元素允许的最小宽度(默认为 5) </div> <div class="long"> 元素允许的最小宽度(默认为 5) </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="maxWidth-header"></a> <b>maxWidth</b> : Number <div class="mdesc"> <div class="short"> 元素允许的最大宽度(默认为 10000) </div> <div class="long"> 元素允许的最大宽度(默认为 10000) </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="enabled-header"></a> <b>enabled</b> : Boolean <div class="mdesc"> <div class="short"> 设为 false 可禁止缩放(默认为 true) </div> <div class="long"> 设为 false 可禁止缩放(默认为 true) </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="width-header"></a> <b>width</b> : Number <div class="mdesc"> <div class="short"> 以像素表示的元素宽度(默认为 null) </div> <div class="long"> 以像素表示的元素宽度(默认为 null) </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="animate-header"></a> <b>animate</b> : Boolean <div class="mdesc"> <div class="short"> 设为 true 则在缩放时展示动画效果(不可与 dynamic 同时使... </div> <div class="long"> 设为 true 则在缩放时展示动画效果(不可与 dynamic 同时使用, 默认为 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="dynamic-header"></a> <b>dynamic</b> : Boolean <div class="mdesc"> <div class="short"> 设为 true 则对元素进行实时缩放而不使用代理(默认为 false) </div> <div class="long"> 设为 true 则对元素进行实时缩放而不使用代理(默认为 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="multiDirectional-header"></a> <b>multiDirectional</b> : Boolean <div class="mdesc"> <div class="short"> Deprecated. 以前的添加多向缩放柄的方式, 建议使用 ha... </div> <div class="long"> <b>Deprecated</b>. 以前的添加多向缩放柄的方式, 建议使用 handles 属性。(默认为 false) </div> </div> </td> <td class="msource"> Resizable </td>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -