| Package: | Ext |
| Class: | Resizable |
| Extends: | Observable |
| Defined In: | Resizable.js |
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 wrap the textarea in a div and set "resizeChild" to true (or to the id of the element), or set wrap:true in your config and the element will be wrapped for you automatically.
Here is the list of valid resize handles:
Value Description ------ ------------------- 'n' north 's' south 'e' east 'w' west 'nw' northwest 'sw' southwest 'se' southeast 'ne' northeast 'all' all
Here's an example showing the creation of a typical Resizable:
var resizer = new Ext.Resizable("element-id", {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
resizer.on("resize", myHandler);
To hide a particular handle, set its display to none in CSS, or through script:
resizer.east.setDisplayed(false);
| 方法 | 定义对象 | |
|---|---|---|
Resizable(String/HTMLElement/Ext.Element el, Object config) |
Resizable | |
| Create a new resizable component | ||
addEvents(Object object) : void |
Observable | |
| 将对象中没有的事件从给出的对象中复制过来。 | ||
addListener(String eventName, Function handler, [Object scope], [Object options]) : void |
Observable | |
| 为该组件加入事件处理器函数 | ||
fireEvent(String eventName, Object... args) : Boolean |
Observable | |
| 触发指定的事件, 并将参数传入(至少要有事件名称)。 | ||
hasListener(String eventName) : Boolean |
Observable | |
| 检查该对象是否拥有指定事件的侦听器 | ||
on(String eventName, Function handler, [Object options]) : void |
Observable | |
| 为该组件加入事件处理器函数, addListener 的简写方式 | ||
| purgeListeners() : void | Observable | |
| 从对象身上移除所有的侦听器 | ||
removeListener(String eventName, Function handler, [Object scope]) : void |
Observable | |
| 移除侦听器 | ||
un(String eventName, Function handler, [Object scope]) : void |
Observable | |
| 移除侦听器, removeListener 的简写方式 | ||
| 设置选项 | 定义对象 | |
|---|---|---|
| adjustments : Array/String | Resizable | |
| String "auto" or an array [width, height] with values to be added to the resize operation's new size (defaults to [0,... | ||
| animate : Boolean | Resizable | |
| True to animate the resize (not compatible with dynamic sizing, defaults to false) | ||
| disableTrackOver : Boolean | Resizable | |
| True to disable mouse tracking. This is only applied at config time. (defaults to false) | ||
| draggable : Boolean | Resizable | |
| Convenience to initialize drag drop (defaults to false) | ||
| duration : Number | Resizable | |
| Animation duration if animate = true (defaults to .35) | ||
| dynamic : Boolean | Resizable | |
| True to resize the element while dragging instead of using a proxy (defaults to false) | ||
| easing : String | Resizable | |
| Animation easing if animate = true (defaults to 'easingOutStrong') | ||
| enabled : Boolean | Resizable | |
| False to disable resizing (defaults to true) | ||
| handles : Boolean/String | Resizable | |
| String consisting of the resize handles to display (defaults to false) | ||
| height : Number | Resizable | |
| The height of the element in pixels (defaults to null) | ||
| heightIncrement : Number | Resizable | |
| The increment to snap the height resize in pixels (dynamic must be true, defaults to 0) | ||
| maxHeight : Number | Resizable | |
| The maximum height for the element (defaults to 10000) | ||
| maxWidth : Number | Resizable | |
| The maximum width for the element (defaults to 10000) | ||
| minHeight : Number | Resizable | |
| The minimum height for the element (defaults to 5) | ||
| minWidth : Number | Resizable | |
| The minimum width for the element (defaults to 5) | ||
| minX : Number | Resizable | |
| The minimum allowed page X for the element (only used for west resizing, defaults to 0) | ||
| minY : Number | Resizable | |
| The minimum allowed page Y for the element (only used for north resizing, defaults to 0) | ||
| multiDirectional : Boolean | Resizable | |
| Deprecated. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option ... | ||
| pinned : Boolean | Resizable | |
| True to ensure that the resize handles are always visible, false to display them only when the user mouses over the r... | ||
| preserveRatio : Boolean | Resizable | |
| True to preserve the original ratio between height and width during resize (defaults to false) | ||
| resizeChild : Boolean/String/Element | Resizable | |
| True to resize the first child, or id/element to resize (defaults to false) | ||
| transparent : Boolean | Resizable | |
| True for transparent handles. This is only applied at config time. (defaults to false) | ||
| width : Number | Resizable | |
| The width of the element in pixels (defaults to null) | ||
| widthIncrement : Number | Resizable | |
| The increment to snap the width resize in pixels (dynamic must be true, defaults to 0) | ||
| wrap : Boolean | Resizable | |
| True to wrap an element with a div if needed (required for textareas and images, defaults to false) | ||
public function Resizable(String/HTMLElement/Ext.Element el, Object config)
el : String/HTMLElement/Ext.Elementconfig : Objectpublic function addEvents(Object object)
object : Objectvoidpublic function addListener(String eventName, Function handler, [Object scope], [Object options])
eventName : Stringhandler : Functionscope : Objectoptions : Object
组合选项
使用选项参数可以组合不同类型的监听器:
下面是一个标准的、延迟执行的、一次性的监听器,将会自动停止事件并传递一个自定义的参数(forumId)
el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 }); 这个方法也允许传递的单个参数是一个包含多个指定处理函数的设置对象。
一次调用多个处理函数
代码:
el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } }); 或者简写为:
代码:
el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
voidpublic function fireEvent(String eventName, Object... args)
eventName : Stringargs : Object...Booleanpublic function hasListener(String eventName)
eventName : StringBooleanpublic function on(String eventName, Function handler, [Object options])
eventName : Stringhandler : Functionoptions : Objectvoidpublic function purgeListeners()
voidpublic function removeListener(String eventName, Function handler, [Object scope])
eventName : Stringhandler : Functionscope : Objectvoidpublic function un(String eventName, Function handler, [Object scope])
eventName : Stringhandler : Functionscope : Objectvoidadjustments : Array/String
animate : Boolean
disableTrackOver : Boolean
draggable : Boolean
duration : Number
dynamic : Boolean
easing : String
enabled : Boolean
handles : Boolean/String
height : Number
heightIncrement : Number
maxHeight : Number
maxWidth : Number
minHeight : Number
minWidth : Number
minX : Number
minY : Number
multiDirectional : Boolean
pinned : Boolean
preserveRatio : Boolean
resizeChild : Boolean/String/Element
transparent : Boolean
width : Number
widthIncrement : Number
wrap : Boolean