/* This file is part of Ext JS 3.4 Copyright (c) 2011-2013 Sencha Inc Contact: http://www.sencha.com/contact GNU General Public License Usage This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. Build date: 2013-04-03 15:07:25 */ Ext.data.JsonP.Ext_Resizable({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.util.Observable","uses":[],"html":"
Hierarchy
Ext.util.ObservableExt.ResizableFiles
Applies drag handles to an element to make it resizable. The drag handles are inserted into the element\nand positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap\nthe textarea in a div and set 'resizeChild' to true (or to the id of the element), or set wrap:true in your config and\nthe element will be wrapped for you automatically.
\n\n\nHere is the list of valid resize handles:
\n\n\nValue Description\n------ -------------------\n 'n' north\n 's' south\n 'e' east\n 'w' west\n 'nw' northwest\n 'sw' southwest\n 'se' southeast\n 'ne' northeast\n 'all' all\n\n\n\n
Here's an example showing the creation of a typical Resizable:
\n\n\nvar resizer = new Ext.Resizable('element-id', {\n handles: 'all',\n minWidth: 200,\n minHeight: 100,\n maxWidth: 500,\n maxHeight: 400,\n pinned: true\n});\nresizer.on('resize', myHandler);\n
\n\n\nTo hide a particular handle, set its display to none in CSS, or through script:
\nresizer.east.setDisplayed(false);
String 'auto' or an array [width, height] with values to be added to the\nresize operation's new size (defaults to [0, 0])
\nDefaults to: [0, 0]
True to animate the resize (not compatible with dynamic sizing, defaults to false)
\nDefaults to: false
Constrain the resize to a particular element
\nConstrain the resize to a particular element
\nTrue to disable mouse tracking. This is only applied at config time. (defaults to false)
\nDefaults to: false
Convenience to initialize drag drop (defaults to false)
\nDefaults to: false
Animation duration if animate = true (defaults to 0.35)
\nDefaults to: 0.35
True to resize the element while dragging instead of using a proxy (defaults to false)
\nDefaults to: false
Animation easing if animate = true (defaults to 'easingOutStrong')
\nDefaults to: 'easeOutStrong'
False to disable resizing (defaults to true)
\nDefaults to: true
String consisting of the resize handles to display (defaults to undefined).\nSpecify either 'all' or any of 'n s e w ne nw se sw'.
\nDefaults to: false
The height of the element in pixels (defaults to null)
\nThe height of the element in pixels (defaults to null)
\nThe increment to snap the height resize in pixels\n(only applies if dynamic==true
). Defaults to 0.
Defaults to: 0
(optional)
A config object containing one or more event handlers to be added to this\nobject during initialization. This should be a valid listeners config object as specified in the\naddListener example for attaching multiple handlers at once.
\n\nDOM events from ExtJs Components
\n\n\nWhile some ExtJs Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this\n\n\n
is usually only done when extra value can be added. For example the DataView's\nclick
event passing the node clicked on. To access DOM\nevents directly from a Component's HTMLElement, listeners must be added to the Element after the Component\nhas been rendered. A plugin can simplify this step:
// Plugin is configured with a listeners config object.\n// The Component is appended to the argument list of all handler functions.\nExt.DomObserver = Ext.extend(Object, {\n constructor: function(config) {\n this.listeners = config.listeners ? config.listeners : config;\n },\n\n // Component passes itself into plugin's init method\n init: function(c) {\n var p, l = this.listeners;\n for (p in l) {\n if (Ext.isFunction(l[p])) {\n l[p] = this.createHandler(l[p], c);\n } else {\n l[p].fn = this.createHandler(l[p].fn, c);\n }\n }\n\n // Add the listeners to the Element immediately following the render call\n c.render = c.render.createSequence(function() {\n var e = c.getEl();\n if (e) {\n e.on(l);\n }\n });\n },\n\n createHandler: function(fn, c) {\n return function(e) {\n fn.call(this, e, c);\n };\n }\n});\n\nvar combo = new Ext.form.ComboBox({\n\n // Collapse combo when its element is clicked on\n plugins: [ new Ext.DomObserver({\n click: function(evt, comp) {\n comp.collapse();\n }\n })],\n store: myStore,\n typeAhead: true,\n mode: 'local',\n triggerAction: 'all'\n});\n
\n\n\n\nThe maximum height for the element (defaults to 10000)
\nDefaults to: 10000
The maximum width for the element (defaults to 10000)
\nDefaults to: 10000
The minimum height for the element (defaults to 5)
\nDefaults to: 5
The minimum width for the element (defaults to 5)
\nDefaults to: 5
The minimum x for the element (defaults to 0)
\nDefaults to: 0
The minimum x for the element (defaults to 0)
\nDefaults to: 0
Deprecated. Deprecated style of adding multi-direction resize handles.
\nDefaults to: false
True to ensure that the resize handles are always visible, false to display them only when the\nuser mouses over the resizable borders. This is only applied at config time. (defaults to false)
\nDefaults to: false
True to preserve the original ratio between height\nand width during resize (defaults to false)
\nDefaults to: false
True to resize the first child, or id/element to resize (defaults to false)
\nDefaults to: false
Constrain the resize to a particular region
\nConstrain the resize to a particular region
\nTrue for transparent handles. This is only applied at config time. (defaults to false)
\nDefaults to: false
The width of the element in pixels (defaults to null)
\nThe width of the element in pixels (defaults to null)
\nThe increment to snap the width resize in pixels\n(only applies if dynamic==true
). Defaults to 0.
Defaults to: 0
True to wrap an element with a div if needed (required for textareas and images, defaults to false)\nin favor of the handles config option (defaults to false)
\nThe proxy Element that is resized in place of the real Element during the resize operation.\nThis may be queried using Ext.Element.getBox to provide the new area to resize to.\nRead only.
\nCreate a new resizable component
\nThe id or element to resize
\nconfiguration options
\nAdds the specified events to the list of events which this Observable may fire.
\nEither an object with event names as properties with a value of true
\nor the first event name string if multiple event names are being passed as separate parameters.
. Event name if multiple event names are being passed as separate parameters.\nUsage:
\n\nthis.addEvents('storeloaded', 'storecleared');\n
\n\nAppends an event handler to this object.
\nThe name of the event to listen for.
\nThe method the event invokes.
\nThe scope (this
reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
An object containing handler configuration.\nproperties. This may contain any of the following properties:
this
reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.\nCombining Options
\nUsing the options argument, it is possible to combine different types of listeners:
\n
\nA delayed, one-time listener.\n
myDataView.on('click', this.onClick, this, {\nsingle: true,\ndelay: 100\n});
\n\nAttaching multiple handlers in 1 call
\nThe method also allows for a single argument to be passed which is a config object containing properties\nwhich specify multiple handlers.\n
\n
myGridPanel.on({\n'click' : {\n fn: this.onClick,\n scope: this,\n delay: 100\n},\n'mouseover' : {\n fn: this.onMouseOver,\n scope: this\n},\n'mouseout' : {\n fn: this.onMouseOut,\n scope: this\n}\n});
\n\nOr a shorthand syntax:
\n
myGridPanel.on({\n'click' : this.onClick,\n'mouseover' : this.onMouseOver,\n'mouseout' : this.onMouseOut,\n scope: this\n});
\n\nprivate
\nDestroys this resizable. If the element was wrapped and\nremoveEl is not true then the element remains.
\ntrue to remove the element from the DOM
\nEnables events fired by this Observable to bubble up an owner hierarchy by calling\nthis.getBubbleTarget()
if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default\nimplementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\naccess the required target more quickly.
\n\n\nExample:
\n\n\nExt.override(Ext.form.Field, {\n // Add functionality to Field's initComponent to enable the change event to bubble\n initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {\n this.enableBubble('change');\n }),\n\n // We know that we want Field's events to bubble directly to the FormPanel.\n getBubbleTarget : function() {\n if (!this.formPanel) {\n this.formPanel = this.findParentByType('form');\n }\n return this.formPanel;\n }\n});\n\nvar myForm = new Ext.formPanel({\n title: 'User Details',\n items: [{\n ...\n }],\n listeners: {\n change: function() {\n // Title goes red if form has been modified.\n myForm.header.setStyle('color', 'red');\n }\n }\n});\n
\n\nFires the specified event with the passed parameters (minus the event name).
\n\n\nAn event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)\nby calling enableBubble.
\n\nThe name of the event to fire.
\nVariable number of parameters are passed to handlers.
\nreturns false if any of the handlers return false otherwise it returns true.
\nChecks to see if this object has any listeners for a specified event
\nThe name of the event to check for
\nTrue if the event is being listened for, else false
\nAppends an event handler to this object (shorthand for addListener.)
\nThe type of event to listen for
\nThe method the event invokes
\nThe scope (this
reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
An object containing handler configuration.
\nRelays selected events from the specified Observable as if the events were fired by this.
\nThe Observable whose events this object is to relay.
\nArray of event names to relay.
\nRemoves an event handler.
\nThe type of event the handler was associated with.
\nThe handler to remove. This must be a reference to the function passed into the addListener call.
\nThe scope originally specified for the handler.
\nPerforms resizing of the associated Element. This method is called internally by this\nclass, and should not be called by user code.
\n\n\nIf a Resizable is being used to resize an Element which encapsulates a more complex UI\ncomponent such as a Panel, this method may be overridden by specifying an implementation\nas a config option to provide appropriate behaviour at the end of the resize operation on\nmouseup, for example resizing the Panel, and relaying the Panel's content.
\n\n\nThe new area to be resized to is available by examining the state of the proxy\nElement. Example:\n
new Ext.Panel({\n title: 'Resize me',\n x: 100,\n y: 100,\n renderTo: Ext.getBody(),\n floating: true,\n frame: true,\n width: 400,\n height: 200,\n listeners: {\n render: function(p) {\n new Ext.Resizable(p.getEl(), {\n handles: 'all',\n pinned: true,\n transparent: true,\n resizeElement: function() {\n var box = this.proxy.getBox();\n p.updateBox(box);\n if (p.layout) {\n p.doLayout();\n }\n return box;\n }\n });\n }\n }\n}).show();\n
\n\nResume firing events. (see suspendEvents)\nIf events were suspended using the queueSuspended parameter, then all\nevents fired during event suspension will be sent to any listeners now.
\nprivate
\nSuspend the firing of all events. (see resumeEvents)
\nPass as true to queue up suspended events to be fired\nafter the resumeEvents call instead of discarding all suspended events;
\nRemoves an event handler (shorthand for removeListener.)
\nThe type of event the handler was associated with.
\nThe handler to remove. This must be a reference to the function passed into the addListener call.
\nThe scope originally specified for the handler.
\nFired before resize is allowed. Set enabled to false to cancel resize.
\nThe mousedown event
\nFired after a resize.
\nThe new width
\nThe new height
\nThe mouseup event
\n