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);
{@link #dynamic}==true). Defaults to 0.
+ */
+ heightIncrement : 0,
+ /**
+ * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
+ * (only applies if {@link #dynamic}==true). Defaults to 0.
+ */
+ widthIncrement : 0,
+ /**
+ * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+ */
+ minHeight : 5,
+ /**
+ * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+ */
+ minWidth : 5,
+ /**
+ * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+ */
+ maxHeight : 10000,
+ /**
+ * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+ */
+ maxWidth : 10000,
+ /**
+ * @cfg {Number} minX The minimum x for the element (defaults to 0)
+ */
+ minX: 0,
+ /**
+ * @cfg {Number} minY The minimum x for the element (defaults to 0)
+ */
+ minY: 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)
+ */
+ pinned : false,
+ /**
+ * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
+ * and width during resize (defaults to false)
+ */
+ preserveRatio : false,
+ /**
+ * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
+ */
+ resizeChild : false,
+ /**
+ * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+ */
+ transparent: false,
+ /**
+ * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
+ */
+ /**
+ * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+ * in favor of the handles config option (defaults to false)
+ */
+
+
+ /**
+ * Perform a manual resize and fires the 'resize' event.
+ * @param {Number} width
+ * @param {Number} height
+ */
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.updateChildSize();
+ this.fireEvent('resize', this, width, height, null);
+ },
+
+ // private
+ startSizing : function(e, handle){
+ this.fireEvent('beforeresize', this, e);
+ if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
+
+ if(!this.overlay){
+ this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
+ this.overlay.unselectable();
+ this.overlay.enableDisplayMode('block');
+ this.overlay.on({
+ scope: this,
+ mousemove: this.onMouseMove,
+ mouseup: this.onMouseUp
+ });
+ }
+ this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
+
+ this.resizing = true;
+ this.startBox = this.el.getBox();
+ this.startPoint = e.getXY();
+ this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+ (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+
+ this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+ this.overlay.show();
+
+ if(this.constrainTo) {
+ var ct = Ext.get(this.constrainTo);
+ this.resizeRegion = ct.getRegion().adjust(
+ ct.getFrameWidth('t'),
+ ct.getFrameWidth('l'),
+ -ct.getFrameWidth('b'),
+ -ct.getFrameWidth('r')
+ );
+ }
+
+ this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+ this.proxy.show();
+ this.proxy.setBox(this.startBox);
+ if(!this.dynamic){
+ this.proxy.setStyle('visibility', 'visible');
+ }
+ }
+ },
+
+ // private
+ onMouseDown : function(handle, e){
+ if(this.enabled){
+ e.stopEvent();
+ this.activeHandle = handle;
+ this.startSizing(e, handle);
+ }
+ },
+
+ // private
+ onMouseUp : function(e){
+ this.activeHandle = null;
+ var size = this.resizeElement();
+ this.resizing = false;
+ this.handleOut();
+ this.overlay.hide();
+ this.proxy.hide();
+ this.fireEvent('resize', this, size.width, size.height, e);
+ },
+
+ // private
+ updateChildSize : function(){
+ if(this.resizeChild){
+ var el = this.el;
+ var child = this.resizeChild;
+ var adj = this.adjustments;
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ // Second call here for IE
+ // The first call enables instant resizing and
+ // the second call corrects scroll bars if they
+ // exist
+ if(Ext.isIE){
+ setTimeout(function(){
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ }, 10);
+ }
+ }
+ },
+
+ // private
+ snap : function(value, inc, min){
+ if(!inc || !value){
+ return value;
+ }
+ var newValue = value;
+ var m = value % inc;
+ if(m > 0){
+ if(m > (inc/2)){
+ newValue = value + (inc-m);
+ }else{
+ newValue = value - m;
+ }
+ }
+ return Math.max(min, newValue);
+ },
+
+ /**
+ * Performs resizing of the associated Element. This method is called internally by this + * class, and should not be called by user code.
+ *If a Resizable is being used to resize an Element which encapsulates a more complex UI + * component such as a Panel, this method may be overridden by specifying an implementation + * as a config option to provide appropriate behaviour at the end of the resize operation on + * mouseup, for example resizing the Panel, and relaying the Panel's content.
+ *The new area to be resized to is available by examining the state of the {@link #proxy} + * Element. Example: +
+new Ext.Panel({
+ title: 'Resize me',
+ x: 100,
+ y: 100,
+ renderTo: Ext.getBody(),
+ floating: true,
+ frame: true,
+ width: 400,
+ height: 200,
+ listeners: {
+ render: function(p) {
+ new Ext.Resizable(p.getEl(), {
+ handles: 'all',
+ pinned: true,
+ transparent: true,
+ resizeElement: function() {
+ var box = this.proxy.getBox();
+ p.updateBox(box);
+ if (p.layout) {
+ p.doLayout();
+ }
+ return box;
+ }
+ });
+ }
+ }
+}).show();
+