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