PropertiesMethodsEventsConfig OptionsDirect Link

Class Ext.Resizable

Package: Ext.grid
Defined In: .js
Class:
Extends: Ext.util.Observable

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);

@cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be added to the resize operation's new size (defaults to [0, 0]) @cfg {Number} minWidth The minimum width for the element (defaults to 5) @cfg {Number} minHeight The minimum height for the element (defaults to 5) @cfg {Number} maxWidth The maximum width for the element (defaults to 10000) @cfg {Number} maxHeight The maximum height for the element (defaults to 10000) @cfg {Boolean} enabled False to disable resizing (defaults to true) @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false) @cfg {Number} width The width of the element in pixels (defaults to null) @cfg {Number} height The height of the element in pixels (defaults to null) @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false) @cfg {Number} duration Animation duration if animate = true (defaults to .35) @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false) @cfg {String} handles String consisting of the resize handles to display (defaults to undefined) @cfg {Boolean} multiDirectional Deprecated. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option (defaults to false) @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false) @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong') @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0) @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0) @cfg {Boolean} pinned 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) @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false) @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false) @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0) @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0) @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)

配置项

这个类没有配置项。

公告属性

属性 定义者

公共方法

方法 定义者

公告事件

这个类没公共的事件。