Key constant

Key constant

Visibility mode constant for use with Ext.dom.Element.setVisibilityMode. Add or remove the Ext.Layer.visibilityCls class to hide the element.

Key constant

Key constant

URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images. In older versions of IE, this defaults to "http://sencha.com/s.gif" and you should change this to a URL on your server. For other browsers it uses an inline data URL.

Key constant

Button config that displays a single Cancel button

Key constant

Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side validation is performed unless Ext.form.action.Submit.clientValidation is explicitly set to false.

The update operation of type 'commit'. Used by Store.update event.

Failure type returned when a communication error happens when attempting to send a request to the remote server. The response may be examined to provide further information.

Key constant

Key constant

Key constant

Date interval constant

Key constant

Visibility mode constant for use with Ext.dom.Element.setVisibilityMode. Use the CSS 'display' property to hide the element.

Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.

Where supported. Fires when an attribute has been modified.

Where supported. Fires when the character data has been modified.

Where supported. Similar to HTML focus event, but can be applied to any focusable element.

Where supported. Similar to HTML blur event, but can be applied to any focusable element.

Where supported. Fires when a node has been added as a child of another node.

Where supported. Fires when a node is being inserted into a document.

Where supported. Fires when a descendant node of the element is removed.

Where supported. Fires when a node is being removed from a document.

Where supported. Fires when the subtree is modified.

Key constant

Key constant

The update operation of type 'edit'. Used by Store.update event.

Key constant

Key constant

Key constant

The CSS class that provides the ERROR icon image

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Date interval constant

Key constant

The CSS class that provides the INFO icon image

Key constant

Key constant

Key constant

Key constant

Key constant

Failure type returned when the response's success property is set to false, or no field values are returned in the response's data property.

Key constant

Date interval constant

Date interval constant

Date interval constant

Key constant

Key constant

Button config that displays a single No button

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Visibility mode constant for use with Ext.dom.Element.setVisibilityMode. Use CSS absolute positioning and top/left offsets to hide the element.

Button config that displays a single OK button

Button config that displays OK and Cancel buttons

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

The CSS class that provides the QUESTION icon image

Key constant

The update operation of type 'reject'. Used by Store.update event.

Key constant

Key constant

Key constant

Date interval constant

Failure type returned when server side processing fails and the result's success property is set to false.

In the case of a form submission, field-specific error messages may be returned in the result's errors property.

Key constant

Key constant

Key constant

Key constant

URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent the IE insecure content warning ('about:blank', except for IE in secure mode, which is 'javascript:""').

Key constant

Key constant

Key constant

Key constant

Key constant

Key constant

Indicates whether to use native browser parsing for JSON methods. This option is ignored if the browser does not support native JSON methods.

Note: Native JSON methods will not work with objects that have functions. Also, property names must be quoted, otherwise the data will not parse.

Key constant

Visibility mode constant for use with Ext.dom.Element.setVisibilityMode. Use the CSS 'visibility' property to hide the element.

Note that in this mode, isVisible may return true for an element even though it actually has a parent element that is hidden. For this reason, and in most cases, using the OFFSETS mode is a better choice.

Key constant

The CSS class that provides the WARNING icon image

The mouse wheel delta scaling factor. This value depends on browser version and OS and attempts to produce a similar scrolling experience across all platforms and browsers.

To change this value:

 Ext.EventObjectImpl.prototype.WHEEL_SCALE = 72;

Key constant

Key constant

Date interval constant

Button config that displays a single Yes button

Button config that displays Yes and No buttons

Button config that displays Yes, No and Cancel buttons

Key constant

Key constant

Used only during a layout run, this value indicates that a layout has finished its calculations. This flag is set to true prior to the call to calculate and should be set to false if this layout has more work to do.

Fires after an unsuccessful load.

Fires when the reader receives improperly encoded data from the server

Fires when the server returns an exception. This event may also be listened to in the event that a request has timed out or has been aborted.

Fired when a operation encountered an exception

Setting this property to true causes the isLayoutRoot method to return true and stop the search for the top-most component for a layout.

Returns whether this version matches the supplied argument. Example:

var version = new Ext.Version('1.0.2beta');
console.log(version.match(1)); // True
console.log(version.match(1.0)); // True
console.log(version.match('1.0.2')); // True
console.log(version.match('1.0.2RC')); // False

The request method to use (GET or POST) for form actions if one isn't supplied in the action options.

The HTTP method to use to access the requested URL. Defaults to the BasicForm's method, or 'POST' if not specified.

The HTTP method to use on this Request. Should be one of 'GET', 'POST', 'PUT' or 'DELETE'.

Raise an error that can include additional data and supports automatic console logging if available. You can pass a string error message or an object with the msg attribute which will be used as the error message. The object can contain any other name-value attributes (or objects) to be logged along with the error.

Note that after displaying the error message a JavaScript error will ultimately be thrown so that execution will halt.

Example usage:

Ext.Error.raise('A simple string error message');

// or...

Ext.define('Ext.Foo', {
    doSomething: function(option){
        if (someCondition === false) {
            Ext.Error.raise({
                msg: 'You cannot do that!',
                option: option,   // whatever was passed into the method
                'error code': 100 // other arbitrary info
            });
        }
    }
});

The type of action this Action instance performs. Currently only "submit" and "load" are supported.

The type of the sprite. Possible options are 'circle', 'ellipse', 'path', 'rect', 'text', 'image'.

See Ext.draw.Sprite class documentation for examples of all types.

The data type for automatic conversion from received data to the stored value if convert has not been specified. This may be specified as a string value. Possible values are

• auto (Default, implies no conversion)
• string
• int
• float
• boolean
• date

This may also be specified by referencing a member of the Ext.data.Types class.

Developers may create their own application-specific data types by defining new members of the Ext.data.Types class.

The type of series. Set in subclasses.

Aborts the active load request

Fires when an object/image is stopped from loading before completely loaded.

The name of the action this Request represents. Usually one of 'create', 'read', 'update' or 'destroy'.

The action being performed by this Operation. Should be one of 'create', 'read', 'update' or 'destroy'.

The RegExp used to categorize actions that require record commits.

Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. The Ext.data.proxy.Rest maps these to the correct RESTful methods.

The RegExp used to categorize actions that skip local record synchronization. This defaults to match 'destroy'.

Alias for Ext.grid.column.Action.

Fires when an action is completed.

Fires when an action is completed.

Fires when an action fails.

Fires when an action fails.

Fires after a Component has been visually activated.

Fires after the window has been visually activated via setActive.

Indicates whether the user is currently dragging this tracker.

If specified, then the component will be displayed with this value as its active error when first rendered. Use setActiveError or unsetActiveError to change it after component creation.

The template used to format the Array of error messages passed to setActiveErrors into a single HTML string. if the msgTarget is title, it defaults to a list separated by new lines. Otherwise, it renders each message as an item in an unordered list.

A string component id or the numeric index of the component that should be initially activated within the container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the container's collection). activeItem only applies to layout styles that can display items one at a time (like Ext.layout.container.Card and Ext.layout.container.Fit).

Fires when an item is added to the collection.

Adds an item to the collection. Fires the add event when complete.

Adds a Sprite to the surface. See Ext.draw.Sprite for the configuration object to be passed into this method.

For example:

drawComponent.surface.add({
    type: 'circle',
    fill: '#ffc',
    radius: 100,
    x: 100,
    y: 100
});

Adds elements to this Composite object.

Adds Model instance to the Store. This method accepts either:

• An array of Model instances or Model configuration objects.
• Any number of Model instance or Model configuration object arguments.

The new Model instances will be added at the end of the existing collection.

Sample usage:

myStore.add({some: 'data'}, {some: 'other data'});

Note that if this Store is sorted, the new Model instances will be inserted at the correct point in the Store to maintain the sort order.

Adds a new operation to this batch at the end of the operations array

Fired when a Model instance has been added to this Store.

Provides a convenient method for performing basic date arithmetic. This method does not modify the Date instance being called - it creates and returns a new Date instance containing the resulting date value.

Examples:

// Basic usage:
var dt = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5);
console.log(dt); // returns 'Fri Nov 03 2006 00:00:00'

// Negative values will be subtracted:
var dt2 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, -5);
console.log(dt2); // returns 'Tue Sep 26 2006 00:00:00'

 // Decimal values can be used:
var dt3 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, 1.25);
console.log(dt3); // returns 'Mon Oct 02 2006 06:00:00'

Fires after any Ext.Component is added or inserted into the container.

This event bubbles: 'add' will also be fired when Component is added to any of the child containers or their childern or ...

Adds Component(s) to this Container.

Description:

• Fires the beforeadd event before adding.
• The Container's default config values will be applied accordingly (see defaults for details).
• Fires the add event after the component has been added.

Notes:

If the Container is already rendered when add is called, it will render the newly added Component into its content area.

If the Container was configured with a size-managing layout manager, the Container will recalculate its internal layout at this time too.

Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing.

If adding multiple new child Components, pass them as an array to the add method, so that only one layout recalculation is performed.

tb = new Ext.toolbar.Toolbar({
    renderTo: document.body
});  // toolbar is rendered
// add multiple items.
// (defaultType for Toolbar is 'button')
tb.add([{text:'Button 1'}, {text:'Button 2'}]);

To inject components between existing ones, use the insert method.

Warning:

Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.

Adds all elements of an Array or an Object to the collection.

Applies event listeners to elements by selectors when the document is ready. The event name is specified with an @ suffix.

Ext.addBehaviors({
    // add a listener for click on all anchors in element with id foo
    '#foo a@click' : function(e, t){
        // do something
    },

    // add the same listener to multiple selectors (separated by comma BEFORE the @)
    '#foo a, #bar span.some-class@mouseover' : function(){
        // do something
    }
});

Add a new binding to this KeyMap.

Usage:

// Create a KeyMap
var map = new Ext.util.KeyMap(document, {
    key: Ext.EventObject.ENTER,
    fn: handleKey,
    scope: this
});

//Add a new binding to the existing KeyMap later
map.addBinding({
    key: 'abc',
    shift: true,
    fn: handleKey,
    scope: this
});

Adds a CSS class to the body element. If not rendered, the class will be added when the panel is rendered.

Adds each argument passed to this method to the childEls array.

Sets a batch of path entries

Queue the addition of a class name (or array of class names) to this ContextItem's target when next flushed.

Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.

For example:

drawComponent.surface.addCls(sprite, 'x-visible');

Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Note this method is severly limited in VML.

Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.

Defined in override Ext.dom.AbstractElement_style.

Adds a CSS class to the top level element representing this component.

Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)

Defined in override Ext.dom.Element_style.

Sets up event handlers to add and remove a css class when this element has the focus

Defined in override Ext.dom.Element_style.

Sets up event handlers to add and remove a css class when the mouse is over this element

Defined in override Ext.dom.Element_style.

Adds a cls to the uiCls array, which will also call addUIClsToElement and adds to all elements of this component.

Adds docked item(s) to the container.

Adds the specified events to the list of events which this Observable may fire.

Adds a new Filter to this Store's filter set and by default, applys the updated filter set to the Store's unfiltered dataset.

Adds a gradient definition to the Surface. Note that in some surface engines, adding a gradient via this method will not take effect if the surface has already been rendered. Therefore, it is preferred to pass the gradients as an item to the surface config, rather than calling this method, especially if the surface is rendered immediately (e.g. due to 'renderTo' in its config). For more information on how to create gradients in the Chart configuration object please refer to Ext.chart.Chart.

The gradient object to be passed into this method is composed by:

• id - string - The unique name of the gradient.
• angle - number, optional - The angle of the gradient in degrees.
• stops - object - An object with numbers as keys (from 0 to 100) and style objects as values.

For example:

drawComponent.surface.addGradient({ id: 'gradientId', angle: 45, stops: { 0: { color: '#555' }, 100: { color: '#ddd' } } });

Lets you specify a css class of elements that will not initiate a drag

Lets you to specify an element id for a child of a drag handle that should not initiate a drag

Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate embedding links within a drag handle that do something other than start the drag.

Convenience method for constructing a KeyMap

Creates a KeyMap for this element

Appends an event handler to this object. For example:

myGridPanel.on("mouseover", this.onMouseOver, this);

The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Shorthand for on.

Appends an event handler to this element.

Appends an event handler to this object. For example:

myGridPanel.on("mouseover", this.onMouseOver, this);

The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.

Add methods / properties to the prototype of this class.

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.addMembers({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Adds namespace(s) to known list.

Save a property to the given state object if it is not its default or configured value.

Registers one or more references.

Adds a CSS Class to a specific row.

(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.

Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event.

Add / override static properties of this class.

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Adds this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belong to as many groups as needed.

Add tools to this panel

inherit docs

Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element.

Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element.

Fires after a Component had been added to a Container.

Modifies the current region to be adjusted by offsets.

Whether to adjust the label at the end of the axis.

An optional string or XTemplate configuration to insert in the field markup at the end of the input containing element. If an XTemplate is used, the component's render data serves as the context.

Invoked after the Panel is Collapsed.

Invoked after the Panel is Collapsed.

Invoked after the Panel is Collapsed.

private Inform the header container about the resize

Called by the layout system after the Component has been laid out.

Called by the layout system after the Component has been laid out.

Called by the layout system after the Component has been laid out.

Called by the layout system after the Component has been laid out.

Called by the layout system after the Component has been laid out.

An empty function by default, but provided so that you can perform a custom action after a valid drag drop has occurred by providing an implementation.

An empty function by default, but provided so that you can perform a custom action when the dragged item enters the drop target by providing an implementation.

An empty function by default, but provided so that you can perform a custom action after the dragged item is dragged out of the target without dropping.

An empty function by default, but provided so that you can perform a custom action while the dragged item is over the drop target by providing an implementation.

Invoked after the Panel is Expanded.

Invoked after the Panel is Expanded.

Invoked after the Panel is Expanded.

Invoked after the Component has been hidden.

Gets passed the same callback and scope parameters that onHide received.

An empty function by default, but provided so that you can perform a custom action after an invalid drop has occurred by providing an implementation.

An optional string or XTemplate configuration to insert in the field markup after the label text. If an XTemplate is used, the component's render data serves as the context.

An optional string or XTemplate configuration to insert in the field markup after the label element. If an XTemplate is used, the component's render data serves as the context.

Invoked after the Container has laid out (and rendered if necessary) its child Components.

Removes layout's itemCls and owning Container's itemCls. Clears the managed dimensions flags

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Allows addition of behavior after rendering is complete. At this stage the Component’s Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.

Optional callback function which can be used to clean up after a request has been completed.

Template method called after a Component has been positioned.

Template method called after a Component has been positioned.

Invoked after the Component is shown (after onShow is called).

Gets passed the same parameters as show.

Invoked after the Component is shown (after onShow is called).

Gets passed the same parameters as show.

Invoked after the Component is shown (after onShow is called).

Gets passed the same parameters as show.

An optional string or XTemplate configuration to insert in the field markup after the subTpl markup. If an XTemplate is used, the component's render data serves as the context.

An empty function by default, but provided so that you can perform a custom action after a valid drop has occurred by providing an implementation.

Fires when the components in this container are arranged by the associated layout manager.

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocessed by any afterRender method defined for the Component.

Runs the aggregate function for all the records in the store.

When store is filtered, only items within the filter are aggregated.

Any additional options to be passed to the request, for example timeout or headers.

Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). If a callback function is passed it will be called after the user clicks the button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button, which will always report as "cancel").

List of short aliases for class names. Most useful for defining xtypes for widgets:

Ext.define('MyApp.CoolPanel', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.coolpanel'],
    title: 'Yeah!'
});

// Using Ext.create
Ext.create('widget.coolpanel');

// Using the shorthand for defining widgets by xtype
Ext.widget('panel', {
    items: [
        {xtype: 'coolpanel', html: 'Foo'},
        {xtype: 'coolpanel', html: 'Bar'}
    ]
});

Besides "widget" for xtype there are alias namespaces like "feature" for ftype and "plugin" for ptype.

Sets the alignment of the header and rendered columns. Possible values are: 'left', 'center', and 'right'.

Sets the element to the location of the mousedown or click event, maintaining the cursor location relative to the location on the element that was clicked. Override this if you want to place the element in a location other than where the cursor is.

Sets the element to the location of the mousedown or click event, maintaining the cursor location relative to the location on the element that was clicked. Override this if you want to place the element in a location other than where the cursor is.

Aligns the element with another element relative to the specified anchor points. If the other element is the document it aligns it to the viewport. The position parameter is optional, and can be specified in any one of the following formats:

• Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
• One anchor (deprecated): The passed anchor position is used as the target element's anchor point. The element being aligned will position its top-left corner (tl) to that point. This method has been deprecated in favor of the newer two anchor syntax below.
• Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the element's anchor point, and the second value is used as the target's anchor point.

In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than that specified in order to enforce the viewport constraints. Following are all of the supported anchor positions:

Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

Example Usage:

// align el to other-el using the default positioning
// ("tl-bl", non-constrained)
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el
// (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

Specify false to validate that the value's length must be > 0. If true, then a blank value is always taken to be valid regardless of any vtype validation that may be applied.

If vtype validation must still be applied to blank values, configure validateBlank as true;

False to not allow a pressed Button to be depressed. Only valid when enableToggle is true.

Allow users to deselect a record in a DataView, List or Grid. Only applicable when the mode is 'SINGLE'.

True to allow deselecting a record. This config is forwarded to Ext.selection.Model.allowDeselect.

Configure as true if the addAll function should add function references to the collection.

Specify true if the addAll function should add function references to the collection. Defaults to false.

Specify false to automatically trim the value before validating the whether the value is blank. Setting this to false automatically sets allowBlank to false.

True to allow multiple menus to be displayed at the same time.

Checks whether this operation should cause writing to occur.

True if the alt key was down during the event.

Defines alternate names for this class. For example:

Ext.define('Developer', {
    alternateClassName: ['Coder', 'Hacker'],
    code: function(msg) {
        alert('Typing... ' + msg);
    }
});

var joe = Ext.create('Developer');
joe.code('stackoverflow');

var rms = Ext.create('Hacker');
rms.code('hack hack');

If specified, indicates that the tip should be anchored to a particular side of the target element or mouse pointer ("top", "right", "bottom", or "left"), with an arrow pointing back at the target or mouse pointer. If constrainPosition is enabled, this will be used as a preferred value only and may be flipped as needed.

A numeric pixel value used to offset the default position of the anchor arrow. When the anchor position is on the top or bottom of the tooltip, anchorOffset will be used as a horizontal offset. Likewise, when the anchor position is on the left or right side, anchorOffset will be used as a vertical offset.

Defines the anchoring size of container. Either a number to define the width of the container or an object with width and height fields.

Anchors an element to another element and realigns it when the window is resized.

True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates. When anchorToTarget is true, use defaultAlign to control tooltip alignment to the target element. When anchorToTarget is false, use anchor instead to control alignment.

true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.fx.Anim class is available, otherwise false). May also be specified as the animation duration in milliseconds.

If true, animates the proxy element back to the position of the handle element used to trigger the drag.

Performs custom animation on this object.

This method is applicable to both the Component class and the Sprite class. It performs animated transitions of certain properties of this object over a specified timeline.

Animating a Component

When animating a Component, the following properties may be specified in from, to, and keyframe objects:

• x - The Component's page X position in pixels.

• y - The Component's page Y position in pixels

• left - The Component's left value in pixels.

• top - The Component's top value in pixels.

• width - The Component's width value in pixels.

• height - The Component's height value in pixels.

• dynamic - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.

For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:

myWindow = Ext.create('Ext.window.Window', {
    title: 'Test Component animation',
    width: 500,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: 'Left: 33%',
        margins: '5 0 5 5',
        flex: 1
    }, {
        title: 'Left: 66%',
        margins: '5 5 5 5',
        flex: 2
    }]
});
myWindow.show();
myWindow.header.el.on('click', function() {
    myWindow.animate({
        to: {
            width: (myWindow.getWidth() == 500) ? 700 : 500,
            height: (myWindow.getHeight() == 300) ? 400 : 300
        }
    });
});

For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.

Performs custom animation on this Element.

The following properties may be specified in from, to, and keyframe objects:

• x - The page X position in pixels.

• y - The page Y position in pixels

• left - The element's CSS left value. Units must be supplied.

• top - The element's CSS top value. Units must be supplied.

• width - The element's CSS width value. Units must be supplied.

• height - The element's CSS height value. Units must be supplied.

• scrollLeft - The element's scrollLeft value.

• scrollTop - The element's scrollTop value.

• opacity - The element's opacity value. This must be a value between 0 and 1.

Be aware that animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components.

Defined in override Ext.dom.Element_anim.

True for the default animation (easing: 'ease' and duration: 500) or a standard animation config object to be used for default chart animations. Defaults to false.

Performs custom animation on this object.

This method is applicable to both the Component class and the Sprite class. It performs animated transitions of certain properties of this object over a specified timeline.

Animating a Component

When animating a Component, the following properties may be specified in from, to, and keyframe objects:

• x - The Component's page X position in pixels.

• y - The Component's page Y position in pixels

• left - The Component's left value in pixels.

• top - The Component's top value in pixels.

• width - The Component's width value in pixels.

• height - The Component's height value in pixels.

• dynamic - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.

For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:

myWindow = Ext.create('Ext.window.Window', {
    title: 'Test Component animation',
    width: 500,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: 'Left: 33%',
        margins: '5 0 5 5',
        flex: 1
    }, {
        title: 'Left: 66%',
        margins: '5 5 5 5',
        flex: 2
    }]
});
myWindow.show();
myWindow.header.el.on('click', function() {
    myWindow.animate({
        to: {
            width: (myWindow.getWidth() == 500) ? 700 : 500,
            height: (myWindow.getHeight() == 300) ? 400 : 300
        }
    });
});

For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.

Id or element from which the window should animate while opening.

True to allow any match - no regex start/end line anchors will be added.

If specified, load and submit actions will be handled with DirectLoad and DirectSubmit. Methods which have been imported by Ext.direct.Manager can be specified here to load and submit forms. API methods may also be specified as strings. See Ext.data.proxy.Direct.directFn. Such as the following:

api: {
    load: App.ss.MyProfile.load,
    submit: App.ss.MyProfile.submit
}

Load actions can use paramOrder or paramsAsHash to customize how the load method is invoked. Submit actions will always use a standard form submit. The formHandler configuration (see Ext.direct.RemotingProvider#action) must be set on the associated server-side method which has been imported by Ext.direct.Manager.

Specific urls to call on CRUD action methods "create", "read", "update" and "destroy". Defaults to:

api: {
    create  : undefined,
    read    : undefined,
    update  : undefined,
    destroy : undefined
}

The url is built based upon the action being executed [create|read|update|destroy] using the commensurate api property, or if undefined default to the configured Ext.data.Store.url.

For example:

api: {
    create  : '/controller/new',
    read    : '/controller/load',
    update  : '/controller/update',
    destroy : '/controller/destroy_action'
}

If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the configured url.

The path to the directory which contains all application's classes. This path will be registered via Ext.Loader.setPath for the namespace specified in the name config.

The name of a property to be assigned to the main namespace to gain a reference to this application. Can be set to an empty value to prevent the reference from being created

Ext.application({
    name: 'MyApp',
    appProperty: 'myProp',

    launch: function() {
        console.log(MyApp.myProp === this);
    }
});

Applies the supplied values to the template and appends the new node(s) to the specified el.

For example usage see Ext.Template class docs.

Appends the passed element(s) to this element

Defined in override Ext.dom.AbstractElement_insertion.

Appends this element to the passed element

Defined in override Ext.dom.AbstractElement_insertion.

The Ext.app.Application for this controller.

Loads Ext.app.Application class and starts it up with given configuration after the page is ready.

See Ext.app.Application for details.

Returns an HTML fragment of this template with the specified values applied.

Copies all the properties of config to the specified object. Note that if recursive merging and cloning without referencing the original objects / arrays is needed, use Ext.Object.merge instead.

Applies the configuration parameters that were passed into the constructor. This is supposed to happen at each level through the inheritance chain. So a DDProxy implentation will execute apply config on DDProxy, DD, and DragDrop in order to get all of the parameters that are available in each object.

Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the inheritance chain are called

Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the inheritance chain are called

Copies all the properties of config to object if they don't already exist.

Calls Ext.applyIf for all field in this form with the passed object.

Appends the result of this template to the provided output array.

Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object.

Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object.

Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object.

Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object.

More flexible version of setStyle for setting style properties.

Defined in override Ext.dom.AbstractElement_style.

Alias for apply.

Returns an HTML fragment of this template with the specified values applied.

Calls Ext.apply for all fields in this form with the passed object.

The side of the Button box to render the arrow if the button has an associated menu. Two values are allowed:

• 'right'
• 'bottom'

The className used for the inner arrow element if the button has a menu.

An array of associations for this model.

Formats an object of name value properties as HTML element attribute values suitable for using when creating textual markup.

True to automatically adjust width and height settings for box-model issues.

True to automatically load and instantiate AppName.view.Viewport before firing the launch function.

When a Store is used by only one DataView, and should only exist for the lifetime of that view, then configure the autoDestroy flag as true. This causes the destruction of the view to trigger the destruction of its Store.

If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually.

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to 'div'. The more complex Sencha classes use a more complex DOM structure specified by their own renderTpls.

This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:

{
    xtype: 'component',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'component',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'component',
        autoEl: 'li',
        html: 'First list item'
    }
}

Whether to adjust the component's body area to make room for 'side' or 'under' error messages.

True to automatically hide the tooltip after the mouse exits the target element or after the dismissDelay has expired if set. If closable = true a close tool button will be rendered into the tooltip header.

True to have the loader make a request as soon as it is created. This argument can also be a set of options that will be passed to load is called.

If data is not specified, and if autoLoad is true or an Object, this store's load method is automatically called after creation. If the value of autoLoad is an Object, this Object will be passed to the store's load method.

Sets the pointer offset to the distance between the linked element's top left corner and the location the element was clicked.

Windows render to the body on first show.

This config is intended mainly for non-floating Components which may or may not be shown. Instead of using renderTo in the configuration, and rendering upon construction, this allows a Component to render itself upon first show. If floating is true, the value of this config is omitted as if it is true.

Specify as true to have this Component render to the document body upon first show.

Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.

private panel overrides

This config is intended mainly for non-floating Components which may or may not be shown. Instead of using renderTo in the configuration, and rendering upon construction, this allows a Component to render itself upon first show. If floating is true, the value of this config is omitted as if it is true.

Specify as true to have this Component render to the document body upon first show.

Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.

This config is intended mainly for non-floating Components which may or may not be shown. Instead of using renderTo in the configuration, and rendering upon construction, this allows a Component to render itself upon first show. If floating is true, the value of this config is omitted as if it is true.

Specify as true to have this Component render to the document body upon first show.

Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.

true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content. This should not be combined with overflowX or overflowY.

true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content. This should not be combined with overflowX or overflowY.

true to automatically show the component upon creation. This config option may only be used for floating components or components that use autoRender.

Sizes this Column to fit the max content width. Note that group columns shrinkwrap around the size of leaf columns. Auto sizing a group column autosizes descendant leaf columns.

Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event if the width changes.

Turn on autoSize support which will set the bounding div's size to the natural size of the contents.

Sizes the passed header to fit the max content width. Note that group columns shrinkwrap around the size of leaf columns. Auto sizing a group column autosizes descendant leaf columns.

Specify true to defer trigger start by 1000 ms. Specify a Number for the number of milliseconds to defer trigger start.

True to immediately start processing the batch as soon as it is constructed (defaults to false)

True to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.

Fires when the autoSize function is triggered and the field is resized according to the grow/growMin/growMax configs as a result. This event provides a hook for the developer to apply additional logic at runtime to resize the field if needed.

The available property is false until the linked dom element is accessible.

Gets the average value in the store.

When store is filtered, only items within the filter are aggregated.

Array of Axis instances or config objects. For example:

axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data1'],
    title: 'Number of Hits',
    minimum: 0,
    //one minor tick between two major ticks
    minorTickSteps: 1
}, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Month of the Year'
}]

Event that fires prior to the onDrag event. Overrides Ext.dd.DragDrop.

overrides Ext.dd.DragDrop

Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.

Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.

The chart background. This can be a gradient object, image, or color. Defaults to false for no background. For example, if background were to be a color we could set the object as

background: {
    //color string
    fill: '#ccc'
}

You can specify an image by using:

background: {
    image: 'http://path.to.image/'
}

Also you can specify a gradient by using the gradient object syntax:

background: {
    gradient: {
        id: 'gradientId',
        angle: 45,
        stops: {
            0: {
                color: '#555'
            }
            100: {
                color: '#ddd'
            }
        }
    }
}

The CSS class to be applied to the body content element.

The base CSS class to apply to this panel's element.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to apply to this panel's element.

The base CSS class to apply to this panel's element.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

The base CSS class to add to all buttons.

The base CSS class to apply to this component's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.

Parameters are encoded as standard HTTP parameters using Ext.Object.toQueryString.

Params that will be attached to every request. These parameters will not be overridden by any params in the load options.

An object literal of parameters to pass to the url when the href property is specified.

Performs a batch of Operations, in the order specified by batchOrder. Used internally by Ext.data.Store's sync method. Example usage:

myProxy.batch({
    create : [myModel1, myModel2],
    update : [myModel3],
    destroy: [myModel4, myModel5]
});

Where the myModel* above are Model instances - in this case 1 and 2 are new instances and have not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been saved but should now be destroyed.

Note that the previous version of this method took 2 arguments (operations and listeners). While this is still supported for now, the current signature is now a single options argument that can contain both operations and listeners, in addition to other options. The multi-argument signature will likely be deprecated in a future release.

The batch that this Operation is a part of.

True to batch actions of a particular type when synchronizing the store. Defaults to true.

A utility for grouping a set of modifications which may trigger value changes into a single transaction, to prevent excessive firing of change events. This is useful for instance if the field has sub-fields which are being updated as a group; you don't want the container field to check its own changed state for each subfield change.

Utility wrapper that suspends layouts of all components for the duration of a given function.

Comma-separated ordering 'create', 'update' and 'destroy' actions when batching. Override this to set a different order for the batched CRUD actions to be executed in. Defaults to 'create,update,destroy'.

Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's internal representation of the data after each operation of the batch has completed, 'complete' will wait until the entire batch has been completed before updating the Store's data. 'complete' is a good choice for local storage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency.

Convenience config. Short for 'Bottom Bar'.

bbar: [
  { xtype: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

Template method to do any pre-blur processing.

An optional string or XTemplate configuration to insert in the field markup at the beginning of the input containing element. If an XTemplate is used, the component's render data serves as the context.

Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed.

Invoked before the Component is destroyed.

Invoked before the Component is destroyed.

Invoked before the Component is destroyed.

Invoked before the Component is destroyed.

Invoked before the Component is destroyed.

Invoked before the Component is destroyed.

Invoked before the Component is destroyed.

An empty function by default, but provided so that you can perform a custom action before the dragged item is dropped onto the target and optionally cancel the onDragDrop.

An empty function by default, but provided so that you can perform a custom action before the dragged item enters the drop target and optionally cancel the onDragEnter.

An empty function by default, but provided so that you can perform a custom action before the dragged item is dragged out of the target without dropping, and optionally cancel the onDragOut.

An empty function by default, but provided so that you can perform a custom action while the dragged item is over the drop target and optionally cancel the onDragOver.

private

Template method to do any pre-focus processing.

Template method to do any pre-focus processing.

An empty function by default, but provided so that you can perform a custom action after an invalid drop has occurred.

An optional string or XTemplate configuration to insert in the field markup before the label text. If an XTemplate is used, the component's render data serves as the context.

An optional string or XTemplate configuration to insert in the field markup before the label element. If an XTemplate is used, the component's render data serves as the context.

Occurs before componentLayout is run. In previous releases, this method could return false to prevent its layout but that is not supported in Ext JS 4.1 or higher. This method is simply a notification of the impending layout to give the component a chance to adjust the DOM. Ideally, DOM reads should be avoided at this time to reduce expensive document reflows.

Occurs before componentLayout is run. In previous releases, this method could return false to prevent its layout but that is not supported in Ext JS 4.1 or higher. This method is simply a notification of the impending layout to give the component a chance to adjust the DOM. Ideally, DOM reads should be avoided at this time to reduce expensive document reflows.

Template method before a field is reset.

Invoked before the Component is shown.

Invoked before the Component is shown.

An optional string or XTemplate configuration to insert in the field markup before the subTpl markup. If an XTemplate is used, the component's render data serves as the context.

Fires before any action is performed. Return false to cancel the action.

Fires before any action is performed. Return false to cancel the action.

Fires before a Component has been visually activated. Returning false from an event listener can prevent the activate from occurring.

Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.

Fired before the cell click is processed. Return false to cancel the default action.

Fired before the cell click is processed. Return false to cancel the default action.

Fired before the cell right click is processed. Return false to cancel the default action.

Fired before the cell right click is processed. Return false to cancel the default action.

Fired before the cell double click is processed. Return false to cancel the default action.

Fired before the cell double click is processed. Return false to cancel the default action.

Fired before the cell key down is processed. Return false to cancel the default action.

Fired before the cell key down is processed. Return false to cancel the default action.

Fired before the cell mouse down is processed. Return false to cancel the default action.

Fired before the cell mouse down is processed. Return false to cancel the default action.

Fired before the cell mouse up is processed. Return false to cancel the default action.

Fired before the cell mouse up is processed. Return false to cancel the default action.

Fires before the user closes the panel. Return false from any listener to stop the close event being fired

Fires before this panel is collapsed. Return false to prevent the collapse.

Fires before the click event on the container is processed. Returns false to cancel the default action.

Fires before the click event on the container is processed. Returns false to cancel the default action.

Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.

Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.

Fires before the dblclick event on the container is processed. Returns false to cancel the default action.

Fires before the dblclick event on the container is processed. Returns false to cancel the default action.

Fires before the keydown event on the container is processed. Returns false to cancel the default action.

Fires before the mousedown event on the container is processed. Returns false to cancel the default action.

Fires before the mousedown event on the container is processed. Returns false to cancel the default action.

Fires before the mouseout event on the container is processed. Returns false to cancel the default action.

Fires before the mouseout event on the container is processed. Returns false to cancel the default action.

Fires before the mouseover event on the container is processed. Returns false to cancel the default action.

Fires before the mouseover event on the container is processed. Returns false to cancel the default action.

Fires before the mouseup event on the container is processed. Returns false to cancel the default action.

Fires before the mouseup event on the container is processed. Returns false to cancel the default action.

Fires before a Component has been visually deactivated. Returning false from an event listener can prevent the deactivate from occurring.

Fired before a record is deselected. If any listener returns false, the deselection is cancelled.

Fired before a record is deselected. If any listener returns false, the deselection is cancelled.

Fired before a record is deselected. If any listener returns false, the deselection is cancelled.

Fired before a record is deselected. If any listener returns false, the deselection is cancelled.

Fires before the sprite is destroyed. Return false from an event handler to stop the destroy.

Fires before the component is destroyed. Return false from an event handler to stop the destroy.

Fires before editing is triggered. Return false from event handler to stop the editing.

Fires before this panel is expanded. Return false to prevent the expand.

Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hide.

Fires before the click event on an item is processed. Returns false to cancel the default action.

Fires before the click event on an item is processed. Returns false to cancel the default action.

Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.

Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.

Fires before the dblclick event on an item is processed. Returns false to cancel the default action.

Fires before the dblclick event on an item is processed. Returns false to cancel the default action.

Fires before the keydown event on an item is processed. Returns false to cancel the default action.

Fires before the mousedown event on an item is processed. Returns false to cancel the default action.

Fires before the mousedown event on an item is processed. Returns false to cancel the default action.

Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.

Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.

Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.

Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.

Fires before the mouseup event on an item is processed. Returns false to cancel the default action.

Fires before the mouseup event on an item is processed. Returns false to cancel the default action.

Fires before a load request is made to the server. Returning false from an event listener can prevent the load from occurring.

Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.

Fires before a prefetch occurs. Return false to cancel.

Fires before a reconfigure to enable modification of incoming Store and columns.

Fires before the view is refreshed

Fires before a refresh to the chart data is called. If the beforerefresh handler returns false the refresh action will be cancelled.

Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.

Fires before the component is rendered. Return false from an event handler to stop the render.

Fired before a record is selected. If any listener returns false, the selection is cancelled.

Fired before a record is selected. If any listener returns false, the selection is cancelled.

Fired before a record is selected. If any listener returns false, the selection is cancelled.

Fired before a record is selected. If any listener returns false, the selection is cancelled.

Fires before the component is shown when calling the show method. Return false from an event handler to stop the show.

Fires before the state of the object is restored. Return false from an event handler to stop the restore.

Fires before the state of the object is saved to the configured state provider. Return false to stop the save.

Fired before a call to sync is executed. Return false from any listener to cancel the sync

Begins an edit. While in edit mode, no events (e.g.. the update event) are relayed to the containing store. When an edit has begun, it must be followed by either endEdit or cancelEdit.

Called before any calculation cycles to prepare for layout.

This is a write phase and DOM reads should be strictly avoided when overridding this method.

Called before any calculation cycles to reset DOM values and prepare for calculation.

This is a write phase and DOM reads should be strictly avoided when overridding this method.

Called before any calculation cycles to reset DOM values and prepare for calculation.

This is a write phase and DOM reads should be strictly avoided when overridding this method.

In addition to work done by our base classes, containers benefit from some extra cached data. The following properties are added to the ownerContext:

• visibleItems: the result of getVisibleItems
• childItems: the ContextItem[] for each visible item
• targetContext: the ContextItem for the getTarget element

One or more BelongsTo associations for this model.

Checks if a date falls on or between the given start and end dates.

True to request binary data from the server. This feature requires the use of a binary reader such as AMF Reader

Create a new function from the provided fn, change this to the provided scope, optionally overrides arguments for the call. (Defaults to the arguments passed by the caller)

Ext.bind is alias for Ext.Function.bind

Binds a store to this instance.

binds the store to the selModel.

Binds a store to this instance.

Binds a store to this instance.

Binds listeners for this component to the store. By default it will add anything bound by the getStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.

Changes the data store bound to this LoadMask.

Changes the data store bound to this view and refreshes it.

Either a single object describing a handling function for s specified key (or set of keys), or an array of such objects.

The error text to display if the allowBlank validation fails

Registers a layout in the block list for the given property. Once the property is set in the Ext.layout.Context, the layout is unblocked.

Set this to true to ignore refresh events on the bound store. This is useful if you wish to provide custom transition animations via a plugin

Fires when an element loses focus either via the pointing device or by tabbing navigation.

Tries to blur the element. Any exceptions are caught and ignored.

Fires when this Component loses focus.

The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the loader config. Read-only.

If this is used to load visible HTML elements in either way, then the Panel may not be used as a Layout for hosting nested Panels.

If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout.

A shortcut to add or remove the border on the body of a panel. In the classic theme this only applies to a panel which has the frame configuration set to true.

A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element. The following examples are all valid:

bodyCls: 'foo'
bodyCls: 'foo bar'
bodyCls: ['foo', 'bar']

The div Element wrapping the component's contents. Only available after the component has been rendered.

A shortcut for setting a padding style on the body element. The value can either be a number to be applied to all sides, or a normal css string describing padding. Defaults to undefined.

Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string, an object containing style property name/value pairs or a function that returns such a string or object. For example, these two formats are interpreted to be equivalent:

bodyStyle: 'background:#ffc; padding:10px;'

bodyStyle: {
    background: '#ffc',
    padding: '10px'
}

Alias for Ext.grid.column.Boolean.

Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).

For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:

border: 5,
style: {
    borderColor: 'red',
    borderStyle: 'solid'
}

To turn off the border, use border: false.

Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).

For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:

border: 5,
style: {
    borderColor: 'red',
    borderStyle: 'solid'
}

To turn off the border, use border: false.

Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).

For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:

border: 5,
style: {
    borderColor: 'red',
    borderStyle: 'solid'
}

To turn off the border, use border: false.

Alias for Ext.view.BoundList.

Alias for Ext.Component.

Wraps the specified element with a special 9 element markup/CSS block that renders by default as a gray container with a gradient background, rounded corners and a 4-way shadow.

This special markup is used throughout Ext when box wrapping elements (Ext.button.Button, Ext.panel.Panel when frame=true, Ext.window.Window). The markup is of this form:

Ext.dom.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

Example usage:

// Basic box wrap
Ext.get("foo").boxWrap();

// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addCls("x-box-blue");

Defined in override Ext.dom.Element_style.

Fires one time - after the component has been laid out for the first time at its initial size.

Brings the specified Component to the front of any other active Components in this ZIndexManager.

Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped.

An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble.

Allows the Store to prefetch and cache in a page cache, pages of Records, and to then satisfy loading requirements from this page cache.

To use buffered Stores, initiate the process by loading the first page. The number of rows rendered are determined automatically, and the range of pages needed to keep the cache primed for scrolling is requested and cached. Example:

myStore.loadPage(1); // Load page 1

A BufferedRenderer is instantiated which will monitor the scrolling in the grid, and refresh the view's rows from the page cache as needed. It will also pull new data into the page cache when scrolling of the view draws upon data near either end of the prefetched data.

The margins which trigger view refreshing from the prefetched data are Ext.grid.plugin.BufferedRenderer.numFromEdge, Ext.grid.plugin.BufferedRenderer.leadingBufferZone and Ext.grid.plugin.BufferedRenderer.trailingBufferZone.

The margins which trigger loading more data into the page cache are, leadingBufferZone and trailingBufferZone.

By default, only 5 pages of data are cached in the page cache, with pages "scrolling" out of the buffer as the view moves down through the dataset. Setting this value to zero means that no pages are ever scrolled out of the page cache, and that eventually the whole dataset may become present in the page cache. This is sometimes desirable as long as datasets do not reach astronomical proportions.

Selection state may be maintained across page boundaries by configuring the SelectionModel not to discard records from its collection when those Records cycle out of the Store's primary collection. This is done by configuring the SelectionModel like this:

selModel: {
    pruneRemoved: false
}

Creates an Request object from Operation.

This gets called from doRequest methods in subclasses of Server proxy.

Generates a url based on a given Ext.data.Request object. By default, ServerProxy's buildUrl will add the cache-buster param to the end of the url. Subclasses may need to perform additional modifications to the url.

Fired at the end of the remove method when all records in the passed array have been removed.

If many records may be removed in one go, then it is more efficient to listen for this event and perform any processing for a bulk remove than to listen for many remove events.

Alias for Ext.button.Button.

The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).

NOTE: The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you would add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.

An object containing the default button text strings that can be overriden for localized language support. Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific resource file for handling language support across the framework. Customize the default text like so:

Ext.window.MessageBox.buttonText.yes = "oui"; //french

Alias for Ext.container.ButtonGroup.

Convenience config used for adding buttons docked to the bottom of the panel. This is a synonym for the fbar config.

buttons: [
  { text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        { xtype: 'component', flex: 1 },
        { xtype: 'button', text: 'Button 1' }
    ]
}]

The minButtonWidth is used as the default minWidth for each of the buttons in the buttons toolbar.

Saves the most recent position so that we can reset the constraints and tick marks on-demand. We need to know this so that we can calculate the number of pixels the element is offset from its original position.

When an element is moved around in the DOM, or is hidden using display:none, it loses layout, and therefore all scroll positions of all descendant elements are lost.

This function caches them, and returns a function, which when run will restore the cached positions. In the following example, the Panel is moved from one Container to another which will cause it to lose all scroll positions:

var restoreScroll = myPanel.el.cacheScrollValues();
myOtherContainer.add(myPanel);
restoreScroll();

The name of the cache param added to the url when using noCache. Defaults to "_dc".

Called to perform the calculations for this layout. This method will be called at least once and may be called repeatedly if the done property is cleared before return to indicate that this layout is not yet done. The done property is always set to true before entering this method.

This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

Calculates the new [x,y] position to move this Positionable into a constrain region.

By default, this Positionable is constrained to be within the container it was added to, or the element it was rendered to.

Priority is given to constraining the top and left within the constraint.

An alternative constraint may be passed.

Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

This can be used with an override as follows:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // calls original My.Derived constructor
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // now alerts 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // calls My.Base.method
         }
     }
 });

 alert(My.Base.method(10);     // alerts 10
 alert(My.Derived2.method(10); // alerts 20

Lastly, it also works with overridden static methods.

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // calls My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10); // now alerts 40

To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

Consider:

 Ext.define('Ext.some.Class', {
     method: function () {
         console.log('Good');
     }
 });

 Ext.define('Ext.some.DerivedClass', {
     method: function () {
         console.log('Bad');

         // ... logic but with a bug ...

         this.callParent();
     }
 });

To patch the bug in DerivedClass.method, the typical solution is to create an override:

 Ext.define('App.paches.DerivedClass', {
     override: 'Ext.some.DerivedClass',

     method: function () {
         console.log('Fixed');

         // ... logic but with bug fixed ...

         this.callSuper();
     }
 });

The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

A function to be called when a load request finishes. Will be called with the following config parameters:

• this - The ElementLoader instance.
• success - True if successful request.
• response - The response object.
• options - Ajax options.

Function to execute when operation completed.

Execute a callback function in a particular scope. If callback argument is a function reference, that is called. If it is a string, the string is assumed to be the name of a method on the given scope. If no function is passed the call is ignored.

For example, these calls are equivalent:

 var myFunc = this.myFunc;

 Ext.callback('myFunc', this, [arg1, arg2]);
 Ext.callback(myFunc, this, [arg1, arg2]);

 Ext.isFunction(myFunc) && this.myFunc(arg1, arg2);

Returns whether a menu item can be activated or not.

Cancels any active edit that is in progress.

Cancels all changes made in the current edit operation.

Cancel any deferred focus on this component

Cancels layout of a component.

Hides a visible tip or cancels an impending show for a particular element.

Fires when the user started editing but then cancelled the edit.

Alias for Ext.String.capitalize.

Capitalize the given string

Starts capture on the specified Observable. All events will be passed to the supplied function with the event name + standard signature of the event before the event is fired. If the supplied function returns false, the event will not fire.

Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with each component. The scope (this reference) of the function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the cascade is stopped on that branch.

True to make the regex case sensitive (adds 'i' switch to regex).

Fired when table cell is clicked.

Fired when table cell is clicked.

Fired when table cell is right clicked.

Fired when table cell is right clicked.

Fired when table cell is double clicked.

Fired when table cell is double clicked.

Fired when the keydown event is captured on the cell.

Fired when the keydown event is captured on the cell.

Fired when the mousedown event is captured on the cell.

Fired when the mousedown event is captured on the cell.

Fired when the mouseup event is captured on the cell.

Fired when the mouseup event is captured on the cell.

Center this Component in its container.

Centers the Element in either the viewport, or another Element.

Defined in override Ext.dom.Element_position.

By default the frame is positioned exactly where the drag element is, so we use the cursor offset provided by Ext.dd.DD. Another option that works only if you do not have constraints on the obj is to have the drag frame centered around the cursor. Set centerFrame to true for this effect.

Fires when the value of a field is changed via the setValue method.

Fires when a control loses the input focus and its value has been modified since gaining focus.

Alias for Ext.chart.Chart.

Forces each field within the form panel to check if its value has changed.

Checks whether the value of the field has changed since the last time it was checked. If the value has changed, it:

1. Fires the change event,
2. Performs validation if the validateOnChange config is enabled, firing the validitychange event if the validity has changed, and
3. Checks the dirty state of the field and fires the dirtychange event if it has changed.

Defines a timeout in milliseconds for buffering checkChangeEvents that fire in rapid succession. Defaults to 50 milliseconds.

A list of event names that will be listened for on the field's input element, which will cause the field's value to be checked for changes. If a change is detected, the change event will be fired, followed by validation if the validateOnChange option is enabled.

Defaults to ['change', 'propertychange', 'keyup'] in Internet Explorer, and ['change', 'input', 'textInput', 'keyup', 'dragdrop'] in other browsers. This catches all the ways that field values can be changed in most supported browsers; the only known exceptions at the time of writing are:

• Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas
• Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text fields and textareas
• Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas

If you need to guarantee on-the-fly change notifications including these edge cases, you can call the checkChange method on a repeating interval, e.g. using Ext.TaskManager, or if the field is within a Ext.form.Panel, you can use the FormPanel's Ext.form.Panel.pollForChanges configuration to set up such a task automatically.

Checks the isDirty state of the field and if it has changed since the last time it was checked, fires the dirtychange event.

Check whether the dirty state of the entire form has changed since it was last checked, and if so fire the dirtychange event. This is automatically invoked when an individual field's dirty state changes.

Check whether the validity of the entire form has changed since it was last checked, and if so fire the validitychange event. This is automatically invoked when an individual field's validity changes.

Alias for Ext.form.field.Checkbox.

Alias for Ext.form.field.Checkbox.

Alias for Ext.form.CheckboxGroup.

Alias for Ext.grid.column.CheckColumn.

Retrieves the first direct child of this container which matches the passed selector or component. The passed in selector must comply with an Ext.ComponentQuery selector, or it can be an actual Ext.Component.

Selects a single direct child based on the passed CSS selector (the selector should not contain an id).

Defined in override Ext.dom.AbstractElement_traversal.

An array describing the child elements of the Component. Each member of the array is an object with these properties:

• name - The property name on the Component for the child element.
• itemId - The id to combine with the Component's id that is the id of the child element.
• id - The id of the child element.

If the array member is a string, it is equivalent to { name: m, itemId: m }.

For example, a Component which renders a title and body text:

Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 id="{id}-title">{title}</h1>',
        '<p>{msg}</p>',
    ],
    renderData: {
        title: "Error",
        msg: "Something went wrong"
    },
    childEls: ["title"],
    listeners: {
        afterrender: function(cmp){
            // After rendering the component will have a title property
            cmp.title.setStyle({color: "red"});
        }
    }
});

A more flexible, but somewhat slower, approach is renderSelectors.

The current version of Chrome (0 if the browser is not Chrome).

Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.

Fires when the collection is cleared.

Removes all items from the collection. Fires the clear event when complete.

Clears a value from the state

Clears a value from the state

Removes all elements from this Composite.

Fired after the removeAll method is called.

The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to provide field clearing.

Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.

Reverts to a view of the Record cache with no filtering applied.

Clear any groupers in the store

Un-highlights the currently highlighted item, if any.

Clear any invalid styles/messages for this field. Components using this mixin should implement this method to update the components rendering to clear any existing messages.

Note: this method does not cause the Field's validate or isValid methods to return true if the value does not pass validation. So simply clearing a field's errors will not necessarily allow submission of forms submitted with the Ext.form.action.Submit.clientValidation option set.

Clear any invalid styles/messages for this field.

Note: this method does not cause the Field's validate or isValid methods to return true if the value does not pass validation. So simply clearing a field's errors will not necessarily allow submission of forms submitted with the Ext.form.action.Submit.clientValidation option set.

Clears all invalid field messages in this form.

Removes all listeners for this object including the managed listeners

Alias for removeAllListeners.

Removes all previous added listeners from this element

Removes all managed listeners for this object.

clears the margin cache so that marginInfo get re-read from the dom on the next call to getMarginInfo() This is needed in some special cases where the margins have changed since the last layout, making the cached values invalid. For example collapsed window headers have different margin than expanded ones.

True to empty the store when loading another page via loadPage, nextPage or previousPage. Setting to false keeps existing records, allowing large data sets to be loaded one page at a time but rendered all together.

Clears any opacity settings from this element. Required in some cases for IE.

Defined in override Ext.dom.Element_style.

Clears positioning back to the default when the document was loaded.

Defined in override Ext.dom.Element_position.

true to clear anything in the removed record collection when the store loads.

Clears any tick interval defined for this instance

Attempts to clear all time information from this Date by setting the time to midnight of the same day, automatically adjusting for Daylight Saving Time (DST) where applicable.

Note: DST timezone information for the browser's host operating system is assumed to be up-to-date.

Fires when this menu is clicked

Fires when a click is detected within the surface.

Fires when a mouse click is detected within the element.

Event forwarded from surface.

Fires when a click is detected within the surface.

Fires when a mouse click is detected within the element.

Fires when this button is clicked, before the configured handler is invoked. Execution of the handler may be vetoed by returning false to this event.

The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).

The number of clicks on a grid required to display the editor. The only accepted values are 1 and 2.

The name of a property that is used for submitting this Model's unique client-side identifier to the server when multiple phantom records are saved as part of the same Operation. In such a case, the server response should include the client id for each record so that the server response data can be used to update the client-side records if necessary. This property cannot have the same name as any of this Model's fields.

Store the current overflow setting and clip overflow on the element - use unclip to remove

Defined in override Ext.dom.Element_style.

Creates a shallow copy of this collection

Creates and returns a new Date instance with the exact same date value as the called instance. Dates are copied and passed by reference, so if a copied date variable is modified later, the original variable will also be changed. When the intention is to create a new variable that will not modify the original instance, you should create a clone.

Example of correctly cloning a date:

//wrong way:
var orig = new Date('10/1/2006');
var copy = orig;
copy.setDate(5);
console.log(orig);  // returns 'Thu Oct 05 2006'!

//correct way:
var orig = new Date('10/1/2006'),
    copy = Ext.Date.clone(orig);
copy.setDate(5);
console.log(orig);  // returns 'Thu Oct 01 2006'

Clone simple variables including array, {}-like objects, DOM nodes and Date without keeping the old reference. A reference for the object itself is returned if it's not a direct decendant of Object. For model cloning, see Model.copy.

Clone the current component using the original config values passed into this instance by default.

Creates clone of the plugin.

True to display the 'close' tool button and allow the user to close the window, false to hide the button and disallow closing the window.

By default, when close is requested by either clicking the close button in the header or pressing ESC when the Window has focus, the close method will be called. This will destroy the Window and its content meaning that it may not be reused.

To make closing a Window hide the Window so that it may be reused, set closeAction to 'hide'.

True to render a close tool button into the tooltip header.

True to display the 'close' tool button and allow the user to close the window, false to hide the button and disallow closing the window.

By default, when close is requested by clicking the close button in the header, the close method will be called. This will destroy the Panel and its content meaning that it may not be reused.

To make closing a Panel hide the Panel so that it may be reused, set closeAction to 'hide'.

Fires when the user closes the panel.

Closes the Panel. By default, this method, removes it from the DOM, destroys the Panel object and all its descendant Components. The beforeclose event is fired before the close happens and will cancel the close action if it returns false.

Note: This method is also affected by the closeAction setting. For more explicit control use destroy and hide methods.

The action to take when the close header tool is clicked:

• 'destroy' :

  remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.

• 'hide' :

  hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

Note: This behavior has changed! setting does affect the close method which will invoke the approriate closeAction.

The action to take when the close header tool is clicked:

• destroy : remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.

• hide : Default. hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

Note: This behavior has changed! setting does affect the close method which will invoke the approriate closeAction.

The action to take when the close header tool is clicked:

• 'destroy' :

  remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.

• 'hide' :

  hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

Note: This behavior has changed! setting does affect the close method which will invoke the approriate closeAction.

An optional extra CSS class that will be added to this component's Element. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.

A CSS class string to apply to the button's main element.

An optional extra CSS class that will be added to this component's Element. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.

Coerces the first value if possible so that it is comparable to the second value.

Coercion only works between the basic atomic data types String, Boolean, Number, Date, null and undefined.

Numbers and numeric strings are coerced to Dates using the value as the millisecond era value.

Strings are coerced to Dates by parsing using the defaultFormat.

For example

Ext.coerce('false', true);

returns the boolean value false because the second parameter is of type Boolean.

Fires after this Panel has collapsed.

Collapses the panel body so that the body becomes hidden. Docked Components parallel to the border towards which the collapse takes place will remain visible. Fires the beforecollapse event which will cancel the collapse action if it returns false.

The direction to collapse the Panel when the toggle button is clicked.

Defaults to the headerPosition

Important: This config is ignored for collapsible Panels which are direct child items of a border layout.

Specify as 'top', 'bottom', 'left' or 'right'.

true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the panel's title bar, false to render it last.

Important: this config is only effective for collapsible Panels which are direct child items of a border layout.

When not a direct child item of a border layout, then the Panel's header remains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header (orientated correctly depending on the collapseDirection) will be inserted to show a the title and a re- expand tool.

When a child item of a border layout, this config has three possible values:

• undefined - When collapsed, a placeholder Header is injected into the layout to represent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.

• "header" - The Panel collapses to leave its header visible as when not inside a border layout.

• "mini" - The Panel collapses without a visible header.

True to render the window collapsed, false to render it expanded. Note that if expandOnShow is true (the default) it will override the collapsed config and the window will always be expanded when shown.

true to render the panel collapsed, false to render it expanded.

A CSS class to add to the panel's element after it has been collapsed.

inherited docs, same default

True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool. When a panel is used in a border layout, the floatable option can influence the behavior of collapsing. See collapseMode and collapseDirection

True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool. When a panel is used in a border layout, the floatable option can influence the behavior of collapsing. See collapseMode and collapseDirection

Collects unique values of a particular property in this MixedCollection

Collects unique values for a particular dataIndex from this store.

Function which can be overridden which returns the data object passed to this DataView's template to render the whole DataView.

This is usually an Array of data objects, each element of which is processed by an XTemplate which uses '<tpl for=".">' to iterate over its supplied data object as an Array. However, named properties may be placed into the data object to provide non-repeating data such as headings, totals etc.

Function which can be overridden which returns the data object passed to this DataView's template to render the whole DataView.

This is usually an Array of data objects, each element of which is processed by an XTemplate which uses '<tpl for=".">' to iterate over its supplied data object as an Array. However, named properties may be placed into the data object to provide non-repeating data such as headings, totals etc.

Alias for Ext.menu.ColorPicker.

Alias for Ext.picker.Color.

Adds column line styling

Defines the column width inside column layout.

Can be specified as a number or as a percentage.

An array of column definition objects which define all columns that appear in this grid. Each column definition provides the header text for the column, and a definition of where the data for that column comes from.

This can also be a configuration object for a {Ext.grid.header.Container HeaderContainer} which may override certain default configurations if necessary. For example, the special layout may be overridden to use a simpler layout, or one can set default values shared by all columns:

columns: {
    items: [
        {
            text: "Column A"
            dataIndex: "field_A"
        },{
            text: "Column B",
            dataIndex: "field_B"
        }, 
        ...
    ],
    defaults: {
        flex: 1
    }
}

An array of column definition objects which define all columns that appear in this grid. Each column definition provides the header text for the column, and a definition of where the data for that column comes from.

This can also be a configuration object for a {Ext.grid.header.Container HeaderContainer} which may override certain default configurations if necessary. For example, the special layout may be overridden to use a simpler layout, or one can set default values shared by all columns:

columns: {
    items: [
        {
            text: "Column A"
            dataIndex: "field_A"
        },{
            text: "Column B",
            dataIndex: "field_B"
        }, 
        ...
    ],
    defaults: {
        flex: 1
    }
}

An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the columns config.

Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out of a group. Note that if all sub columns are dragged out of a group, the group is destroyed.

Fired after the columns change in any way, when a column has been hidden or shown, or when a column is added to or removed from this header container.

Fired after the columns change in any way, when a column has been hidden or shown, or when a column is added to or removed from this header container.

Alias for Ext.form.field.ComboBox.

Alias for Ext.form.field.ComboBox.

Usually called by the Ext.data.Store which owns the model instance. Commits all changes made to the instance since either creation or the last commit operation.

Developers should subscribe to the Ext.data.Store.update event to have their code notified of commit operations.

Commits all Records with outstanding changes. To handle updates for changes, subscribe to the Store's update event, and perform updating when the third parameter is Ext.data.Record.COMMIT.

This method is called to commit data to this instance's records given the records in the server response. This is followed by calling Ext.data.Model.commit on all those records (for 'create' and 'update' actions).

If this action is 'destroy', any server records are ignored and the Ext.data.Model.commit method is not called.

Compare 2 specified versions, starting from left to right. If a part contains special version strings, they are handled in the following order: 'dev' < 'alpha' = 'a' < 'beta' = 'b' < 'RC' = 'rc' < '#' < 'pl' = 'p' < 'anything else'

Compiles the template into an internal function, eliminating the RegEx overhead.

True to immediately compile the template. Defaults to false.

Fired when all operations of this batch have been completed

Completes the edit if there is an active edit in progress.

This method (if implemented) is called at the end of the cycle in which this layout completes (by not setting done to false in calculate). It is possible for the layout to complete and yet become invalid before the end of the cycle, in which case, this method will not be called. It is also possible for this method to be called and then later the layout becomes invalidated. This will result in calculate being called again, followed by another call to this method.

This is a read phase and DOM writes should be strictly avoided in derived classes. Instead, DOM writes need to be written to Ext.layout.ContextItem objects to be flushed at the next opportunity.

This method need not be implemented by derived classes and, in fact, should only be implemented when needed.

Alias for Ext.Component.

CSS Class to be added to a components root level element to give distinction to it via styling.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

Configuration attributes passed into the constructor

List of configuration options with their default values, for which automatically accessor methods are generated. For example:

Ext.define('SmartPhone', {
     config: {
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },
     constructor: function(cfg) {
         this.initConfig(cfg);
     }
});

var iPhone = new SmartPhone({
     hasTouchScreen: true,
     operatingSystem: 'iOS'
});

iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;

NOTE for when configs are reference types, the getter and setter methods do not make copies.

For example, when a config value is set, the reference is stored on the instance. All instances that set the same reference type will share it.

In the case of the getter, the value with either come from the prototype if the setter was never called or from the instance as the last value passed to the setter.

For some config properties, the value passed to the setter is transformed prior to being stored on the instance.

Called before an item is rendered to allow the layout to configure the item.

Adds layout's itemCls and owning Container's itemCls

Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button, which will always report as "cancel").

True to constrain the window within its containing element, false to allow it to fall outside of its containing element. By default the window will be rendered to document.body. To render and constrain the window within another element specify renderTo. Optionally the header only can be constrained using constrainHeader.

True to constrain the window within its containing element, false to allow it to fall outside of its containing element. By default the window will be rendered to document.body. To render and constrain the window within another element specify renderTo. Optionally the header only can be constrained using constrainHeader.

True to constrain this Components within its containing element, false to allow it to fall outside of its containing element. By default this Component will be rendered to document.body. To render and constrain this Component within another element specify renderTo.

Specify as true to constrain the Component to within the bounds of the constrainTo region.

True to constrain the panel within its containing element, false to allow it to fall outside of its containing element. By default floating components such as Windows will be rendered to document.body. To render and constrain the window within another element specify renderTo. Optionally the header only can be constrained using constrainHeader.

Specify as true to constrain the drag handles within the constrainTo region.

True to constrain the window header within its containing element (allowing the window body to fall outside of its containing element) or false to allow the header to fall outside its containing element. Optionally the entire window can be constrained using constrain.

True to constrain the panel header within its containing element (allowing the panel body to fall outside of its containing element) or false to allow the header to fall outside its containing element. Optionally the entire panel can be constrained using constrain.

If true, then the tooltip will be automatically constrained to stay within the browser viewport.

Modifies the current region to be constrained to the targetRegion.

A Region (Or an element from which a Region measurement will be read) which is used to constrain the result of the getOffset call.

This may be set any time during the DragTracker's lifecycle to set a dynamic constraining region.

Initializes the drag drop object's constraints to restrict movement to a certain element.

Usage:

var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
               { dragElId: "existingProxyDiv" });
dd.startDrag = function(){
    this.constrainTo("parent-id");
};

Or you can initalize it using the Ext.Element object:

Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
    startDrag : function(){
        this.constrainTo("parent-id");
    }
});

A Region (or an element from which a Region measurement will be read) which is used to constrain the component. Only applies when the component is floating.

An object or a string (in TRBL order) specifying insets from the configured constrain region within which this component must be constrained when positioning or sizing. example:

constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent

Alias for Ext.container.Container.

Fires when the container is clicked.

Fires when the container is clicked.

Fires when the container is right clicked.

Fires when the container is right clicked.

Fires when the container is double clicked.

Fires when the container is double clicked.

Fires when a key is pressed while the container is focused, and no item is currently selected.

Fires when you move the mouse out of the container.

Fires when you move the mouse out of the container.

Fires when you move the mouse over the container.

Fires when you move the mouse over the container.

Fires when there is a mouse up on the container

Fires when there is a mouse up on the container

Checks if this region completely contains the region that is passed in.

Returns true if the collection contains the passed Object as an item.

Returns true if this composite contains the passed element.

Returns true if this element is an ancestor of the passed element

Determines whether the passed Component is either an immediate child of this Container, or whether it is a descendant.

Returns true if the collection contains the passed Object as a key.

Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.

Notes:

The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.

The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.

Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

The name of the padding property that is used by the layout to manage padding. See managePadding

The name of the padding property that is used by the layout to manage padding. See managePadding

Fires when a right click is detected within the element.

Adds listeners to components selected via Ext.ComponentQuery. Accepts an object containing component paths mapped to a hash of listener functions.

In the following example the updateUser function is mapped to to the click event on a button component, which is a child of the useredit component.

 Ext.define('AM.controller.Users', {
     init: function() {
         this.control({
             'useredit button[action=save]': {
                 click: this.updateUser
             }
         });
     },

     updateUser: function(button) {
         console.log('clicked the Save button');
     }
 });

Or alternatively one call control with two arguments:

 this.control('useredit button[action=save]', {
     click: this.updateUser
 });

See Ext.ComponentQuery for more information on component selectors.

Names of controllers that the app uses.

A function which converts the value provided by the Reader into an object that will be stored in the Model.

If configured as null, then no conversion will be applied to the raw data property when this Field is read. This will increase performance. but you must ensure that the data is of the correct type and does not need converting.

It is passed the following parameters:

• v : Mixed

  The data value as read by the Reader, if undefined will use the configured defaultValue.

• rec : Ext.data.Model

  The data object containing the Model as read so far by the Reader. Note that the Model may not be fully populated at this point as the fields are read in the order that they are defined in your fields array.

Example of convert functions:

function fullName(v, record){
    return record.data.last + ', ' + record.data.first;
}

function location(v, record){
    return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);
}

Ext.define('Dude', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'fullname',  convert: fullName},
        {name: 'firstname', mapping: 'name.first'},
        {name: 'lastname',  mapping: 'name.last'},
        {name: 'city', defaultValue: 'homeless'},
        'state',
        {name: 'location',  convert: location}
    ]
});

// create the data store
var store = Ext.create('Ext.data.Store', {
    reader: {
        type: 'json',
        model: 'Dude',
        idProperty: 'key',
        root: 'daRoot',
        totalProperty: 'total'
    }
});

var myData = [
    { key: 1,
      name: { first: 'Fat',    last:  'Albert' }
      // notice no city, state provided in data object
    },
    { key: 2,
      name: { first: 'Barney', last:  'Rubble' },
      city: 'Bedrock', state: 'Stoneridge'
    },
    { key: 3,
      name: { first: 'Cliff',  last:  'Claven' },
      city: 'Boston',  state: 'MA'
    }
];

converts a collapsdDir into an anchor argument for Element.slideIn overridden in rtl mode to switch "l" and "r"

Create a copy of this Region.

Creates a copy (clone) of this Model instance.

Copy the values of another Region to this Region

Copies a set of named properties fom the source object to the destination object.

Example:

ImageComponent = Ext.extend(Ext.Component, {
    initComponent: function() {
        this.autoEl = { tag: 'img' };
        MyComponent.superclass.initComponent.apply(this, arguments);
        this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
    }
});

Important note: To borrow class prototype methods, use Ext.Base.borrow instead.

Correctly scales a given wheel delta.

Gets the count of items in the store.

When store is filtered, only items within the filter are counted.

The number of records in this ResultSet. Note that total may differ from this number.

in a ServerProxy all four CRUD operations are executed in the same manner, so we delegate to doRequest in each case

Performs the given create operation.

Performs the given create operation.

Create a new instance of this Class.

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

All parameters are passed to the constructor of the class.

Instantiate a class by either full name, alias or alternate name.

If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.

For example, all these three lines return the same result:

 // alias
 var window = Ext.create('widget.window', {
     width: 600,
     height: 800,
     ...
 });

 // alternate name
 var window = Ext.create('Ext.Window', {
     width: 600,
     height: 800,
     ...
 });

 // full class name
 var window = Ext.create('Ext.window.Window', {
     width: 600,
     height: 800,
     ...
 });

 // single object with xclass property:
 var window = Ext.create({
     xclass: 'Ext.window.Window', // any valid value for 'name' (above)
     width: 600,
     height: 800,
     ...
 });

Create aliases for existing prototype methods. Example:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Instantiate a class by its alias.

Ext.ClassManager.instantiateByAlias is usually invoked by the shorthand createByAlias.

If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.

var window = Ext.createByAlias('widget.window', { width: 600, height: 800, ... });

Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.

Defined in override Ext.dom.AbstractElement_insertion.

Creates a single comparator function which encapsulates the passed Sorter array.

Creates the proxy element if it does not yet exist

Creates a proxy element of this element

Creates an iframe shim for this element to keep selects and other windowed objects from showing through.

Creates a store from config object.

Creates and returns a new concrete Surface instance appropriate for the current environment.

True if the control key was down during the event. In Mac this will also be true when meta key was down.

Format a number as a currency.

This may be set to true to make the currency function append the currency sign to the formatted value.

This may be overridden in a locale file.

The number of decimal places that the currency function displays.

This may be overridden in a locale file.

The currency sign that the currency function displays.

This may be overridden in a locale file.

The index of the current operation being executed. Read only

The page that the Store has most recently loaded (see loadPage)

Alias for Ext.button.Cycle.

The size of the dash marker. Default's 3.

Array of Model instances or data objects to load locally. See "Inline data" above for details.

When this Store is not buffered, the data property is a MixedCollection which holds this store's local cache of records.

When this store is buffered, the data property is a cache of pages of records used to satisfy load requests from the Store when the associated view scrolls. Depending on how the buffer zone and purgePageCount are configured, pages which are scrolled out of view may be evicted from the cache, and need to be re-requested from the server when scrolled back into view. For this reason, if using buffered, it is recommended that you configure your Model definitions with a unique Ext.data.Model.idProperty so that records which return to the page cache may be matched against previously selected records.

Pages in the direction of scroll are prefetched from the remote server and loaded into this cache before they are needed based upon the buffer zone so that scrolling can proceed without visible pauses for data loading.

The initial set of data to apply to the tpl to update the content area of the Component.

The name of the field in the grid's Ext.data.Store's Ext.data.Model definition from which to draw the column's value. Required.

Fires whenever the records in the Store have changed in some way - this could include adding or removing records, or updating the data in existing records

Alias for Ext.view.View.

Formats the passed date using the specified format pattern.

This is used for each field of type date in the model to format the value before it is sent to the server.

Serves as a default for the dateReadFormat and dateWriteFormat config options. This will be used in place of those other configurations if not specified.

A format string for the Ext.Date.parse function, or "timestamp" if the value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a javascript millisecond timestamp. See Ext.Date.

It is quite important to note that while this config is optional, it will default to using the base JavaScript Date object's parse function if not specified, rather than Ext.Date.parse. This can cause unexpected issues, especially when converting between timezones, or when converting dates that do not have a timezone specified. The behavior of the native Date.parse is implementation-specific, and depending on the value of the date string, it might return the UTC date or the local date. For this reason it is strongly recommended that you always specify an explicit date format when parsing dates.

Used when converting received data into a Date when the type is specified as "date". This configuration takes precedence over dateFormat. See dateFormat for more information.

Returns a date rendering function that can be reused to apply a date format multiple times efficiently.

Used to provide a custom format when serializing dates with a Ext.data.writer.Writer. If this is not specified, the dateFormat will be used. See the Ext.data.writer.Writer docs for more information on writing dates.

Note that to use a JsonWriter to send Microsoft format "JSON" dates, which are in fact invalid JSON, it is not possible to use the standard date serialization pathway or native browser JSON production.

To use a JsonWriter to write dates in a JSON packet in the form "\/Date(1357372800000)\/" configure the field like this:

{ type: 'date', dateFormat: 'MS', // To parse incoming dates from server correctly serialize: Ext.identityFn // An ExtJS-supplied function which returns the arg unchanged }

Then override ExtJS's JSON date serialize function:

Ext.JSON.encodeDate = function (d) { return '"' + Ext.Date.format(d, 'MS') + '"'; };

Alias for Ext.grid.column.Date.

Alias for Ext.form.field.Date.

Alias for Ext.menu.DatePicker.

Alias for Ext.picker.Date.

An array of textual day names. Override these values for international dates.

Example:

Ext.Date.dayNames = [
    'SundayInYourLang',
    'MondayInYourLang'
    // ...
];

Fires when a dblclick is detected within the surface.

Event forwarded from surface.

Fires when a dblclick is detected within the surface.

Fires when a mouse double click is detected within the element.

Only present if this Panel has been configured with draggable true.

Simple dragging

If this Panel is configured simpleDrag true (the default is false), this property will reference an instance of Ext.util.ComponentDragger (A subclass of DragTracker) which handles moving the Panel's DOM Element, and constraining according to the constrain and constrainHeader .

This object fires various events during its lifecycle and during a drag operation.

Complex dragging interacting with other DragDrop instances

By default, this property in a draggable Panel will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.

If this Sprite is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Sprite.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.

A named drag drop group to which this object belongs. If a group is specified, then this object will only interact with other drag drop objects in the same group.

If this Window is configured draggable, this property will contain an instance of Ext.util.ComponentDragger (A subclass of DragTracker) which handles dragging the Window's DOM Element, and constraining according to the constrain and constrainHeader .

This has implementations of onBeforeStart, onDrag and onEnd which perform the dragging action. If extra logic is needed at these points, use createInterceptor or createSequence to augment the existing implementations.

Fires after a Component has been visually deactivated.

Deactivates the current active item on the menu, if one exists.

Fires after the window has been visually deactivated via setActive.

The character that the number function uses as a decimal point.

This may be overridden in a locale file.

Shorthand for Ext.JSON.decode

Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.

Decodes a string previously encoded with encodeValue.

Experimental. The default Ext.util.Positionable.alignTo anchor position value for this tip relative to its element of origin.

The default Ext.Element#getAlignToXY anchor position value for this menu relative to its element of origin. Used in conjunction with showBy.

This object holds the default weights applied to dockedItems that have no weight. These start with a weight of 1, to allow negative weights to insert before top items and are odd numbers so that even weights can be used to get between different dock orders.

To make default docking order match border layout, do this:

 Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };

Changing these defaults as above or individually on this object will effect all Panels. To change the defaults on a single panel, you should replace the entire object:

 initComponent: function () {
     // NOTE: Don't change members of defaultDockWeights since the object is shared.
     this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };

     this.callParent();
 }

To change only one of the default values, you do this:

 initComponent: function () {
     // NOTE: Don't change members of defaultDockWeights since the object is shared.
     this.defaultDockWeights = Ext.applyIf({ top: 10 }, this.defaultDockWeights);

     this.callParent();
 }

Specifies a Component to receive focus when this Window is focused.

This may be one of:

• The index of a footer Button.
• The id or Ext.AbstractComponent.itemId of a descendant Component.
• A Component.

The date format string that the Ext.util.Format.dateRenderer and Ext.util.Format.date functions use. See Ext.Date for details.

This may be overridden in a locale file.

Provides default constraint padding to "constrainTo" elements.

The string type of the default Model Proxy. Defaults to 'ajax'.

The string type of the Proxy to create if none is specified. This defaults to creating a memory proxy.

When defined this will take precedence over the renderer config. This is meant to be defined in subclasses that wish to supply their own renderer.

The default sort direction to use if one is not specified.

The default height in pixels of the message box's multiline textarea if displayed.

The default xtype of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.

The default xtype of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.

The default unit to append to CSS values where a unit isn't provided.

Overridden in Ext.dom.AbstractElement_static.

Checks a reference and converts it to the default value if it's empty.

The default value used when the creating an instance from a raw data object, and the property referenced by the mapping does not exist in that data object.

May be specified as undefined to prevent defaulting in a value.

Width of the header if no width or flex is specified.

An object hash containing default date values used during date parsing.

The following properties are available:

Override these properties to customize the default date values used by the parse method.

Note: In countries which experience Daylight Saving Time (i.e. DST), the h, i, s and ms properties may coincide with the exact time in which DST takes effect. It is the responsibility of the developer to account for this.

Example Usage:

// set default day value to the first day of the month
Ext.Date.defaults.d = 1;

// parse a February date string containing only year and month values.
// setting the default day value to 1 prevents weird date rollover issues
// when attempting to parse the following date string on, for example, March 31st 2009.
Ext.Date.parse('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009

This option is a means of applying default settings to all added items whether added through the items config or via the add or insert methods.

Defaults are applied to both config objects and instantiated components conditionally so as not to override existing properties in the item (see Ext.applyIf).

If the defaults option is specified as a function, then the function will be called using this Container as the scope (this reference) and passing the added item as the first parameter. Any resulting object from that call is then applied to the item as default properties.

For example, to automatically apply padding to the body of each of a set of contained Ext.panel.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Usage:

defaults: { // defaults are applied to items, not the container
    autoScroll: true
},
items: [
    // default will not be applied here, panel1 will be autoScroll: false
    {
        xtype: 'panel',
        id: 'panel1',
        autoScroll: false
    },
    // this component will have autoScroll: true
    new Ext.panel.Panel({
        id: 'panel2'
    })
]

Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:

var sayHi = function(name){
    alert('Hi, ' + name);
}

// executes immediately:
sayHi('Fred');

// executes after 2 seconds:
Ext.Function.defer(sayHi, 2000, this, ['Fred']);

// this syntax is sometimes useful for deferring
// execution of an anonymous function:
Ext.Function.defer(function(){
    alert('Anonymous');
}, 100);

Ext.defer is alias for Ext.Function.defer

True to defer emptyText being applied until the store's first load.

Defaults to true to defer the initial refresh of the view.

This allows the View to execute its render and initial layout more quickly because the process will not be encumbered by the expensive update of the view structure.

Important: Be aware that this will mean that the View's item elements will not be available immediately upon render, so selection may not take place at render time. To access a View's item elements as soon as possible, use the viewready event. Or set deferInitialrefresh to false, but this will be at the cost of slower rendering.

Defaults to true to enable deferred row rendering.

This allows the View to execute a refresh quickly, with the expensive update of the row structure deferred so that layouts with GridPanels appear, and lay out more quickly.

Defines a class or override. A basic class is defined like this:

 Ext.define('My.awesome.Class', {
     someProperty: 'something',

     someMethod: function(s) {
         alert(s + this.someProperty);
     }

     ...
 });

 var obj = new My.awesome.Class();

 obj.someMethod('Say '); // alerts 'Say something'

To create an anonymous class, pass null for the className:

 Ext.define(null, {
     constructor: function () {
         // ...
     }
 });

In some cases, it is helpful to create a nested scope to contain some private properties. The best way to do this is to pass a function instead of an object as the second parameter. This function will be called to produce the class body:

 Ext.define('MyApp.foo.Bar', function () {
     var id = 0;

     return {
         nextId: function () {
             return ++id;
         }
     };
 });

Note that when using override, the above syntax will not override successfully, because the passed function would need to be executed first to determine whether or not the result is an override or defining a new object. As such, an alternative syntax that immediately invokes the function can be used:

 Ext.define('MyApp.override.BaseOverride', function () {
     var counter = 0;

     return {
         override: 'Ext.Component',
         logId: function () {
             console.log(++counter, this.id);
         }
     };
 }());

When using this form of Ext.define, the function is passed a reference to its class. This can be used as an efficient way to access any static properties you may have:

 Ext.define('MyApp.foo.Bar', function (Bar) {
     return {
         statics: {
             staticMethod: function () {
                 // ...
             }
         },

         method: function () {
             return Bar.staticMethod();
         }
     };
 });

To define an override, include the override property. The content of an override is aggregated with the specified class in order to extend or modify that class. This can be as simple as setting default property values or it can extend and/or replace methods. This can also extend the statics of the class.

One use for an override is to break a large class into manageable pieces.

 // File: /src/app/Panel.js

 Ext.define('My.app.Panel', {
     extend: 'Ext.panel.Panel',
     requires: [
         'My.app.PanelPart2',
         'My.app.PanelPart3'
     ]

     constructor: function (config) {
         this.callParent(arguments); // calls Ext.panel.Panel's constructor
         //...
     },

     statics: {
         method: function () {
             return 'abc';
         }
     }
 });

 // File: /src/app/PanelPart2.js
 Ext.define('My.app.PanelPart2', {
     override: 'My.app.Panel',

     constructor: function (config) {
         this.callParent(arguments); // calls My.app.Panel's constructor
         //...
     }
 });

Another use of overrides is to provide optional parts of classes that can be independently required. In this case, the class may even be unaware of the override altogether.

 Ext.define('My.ux.CoolTip', {
     override: 'Ext.tip.ToolTip',

     constructor: function (config) {
         this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
         //...
     }
 });

The above override can now be required as normal.

 Ext.define('My.app.App', {
     requires: [
         'My.ux.CoolTip'
     ]
 });

Overrides can also contain statics:

 Ext.define('My.app.BarMod', {
     override: 'Ext.foo.Bar',

     statics: {
         method: function (x) {
             return this.callParent([x * 2]); // call Ext.foo.Bar.method
         }
     }
 });

IMPORTANT: An override is only included in a build if the class it overrides is required. Otherwise, the override, like the target class, is not included.

A DomQuery selector which allows selection of individual elements within the target element to trigger showing and hiding the ToolTip as the mouse moves within the target.

When specified, the child element of the target which caused a show event is placed into the triggerElement property before the ToolTip is shown.

This may be useful when a Component has regular, repeating elements in it, each of which need a ToolTip which contains information specific to that element.

See the delegate example in class documentation of Ext.tip.ToolTip.

A DomQuery selector which identifies child elements within the DragTracker's encapsulating Element which are the tracked elements. This limits tracking to only begin when the matching elements are mousedowned.

This may also be a specific child element within the DragTracker's encapsulating element to use as the tracked element.

A DomQuery selector which identifies child elements within the Component's encapsulating Element which are the drag handles. This limits dragging to only begin when the matching elements are mousedowned.

This may also be a specific child element within the Component's encapsulating element to use as the drag handle.

Create a closure for deprecated code.

// This means Ext.oldMethod is only supported in 4.0.0beta and older.
// If Ext.getVersion('extjs') returns a version that is later than '4.0.0beta', for example '4.0.0RC',
// the closure will not be invoked
Ext.deprecate('extjs', '4.0.0beta', function() {
    Ext.oldMethod = Ext.newMethod;

    ...
});

Fired after a record is deselected

Deselects a record instance by record instance or index.

Fired after a record is deselected

Deselects a record instance by record instance or index.

Fired after a record is deselected

Fired after a record is deselected

Deselects all records in the view.

Deselects a range of rows if the selection model is not locked.

Destroys the KeyMap instance and removes all handlers.

Destroys the QuickTips instance.

Destroys this stateful object.

Destroys this layout. This method removes a targetCls from the target element and calls onDestroy.

A derived class can override either this method or onDestroy but in all cases must call the base class versions of these methods to allow the base class to perform its cleanup.

This method (or onDestroy) are overridden by subclasses most often to purge event handlers or remove unmanged DOM nodes.

Destroys this object.

Destroys the loader. Any active requests will be aborted.

Destroys the surface. This is done by removing all components from it and also removing its reference to a DOM element.

For example:

 drawComponent.surface.destroy();

Fires after the sprite is destroyed.

Removes the sprite and clears all listeners.

Alias to remove.

Removes this element's dom reference. Note that event and cache removal is handled at Ext.removeNode

Destroy this DragDrop instance

Destroy this DragDrop instance

Performs the given destroy operation.

Performs the given destroy operation.

Destroys the model using the configured proxy.

The destroy method is invoked by the owning Component at the time the Component is being destroyed.

The supplied implementation is empty. Subclasses should perform plugin cleanup in their own implementation of this method.

Fires after the component is destroyed.

Destroys the Component.

Attempts to destroy any objects passed to it by removing all event listeners, removing them from the DOM (if applicable) and calling their destroy functions (if available). This method is primarily intended for arguments of type Ext.Element and Ext.Component, but any subclass of Ext.util.Observable can be passed in. Any number of elements and/or components can be passed into this function in a single call as separate arguments.

Attempts to destroy and then remove a set of named properties of the passed object.

Whether or not to destroy any associated menu when this button is destroyed. The menu will be destroyed unless this is explicitly set to false.

True to move any component to the detachedBody when the component is removed from this container. This option is only applicable when the component is not destroyed while being removed, see autoDestroy and remove. If this option is set to false, the DOM of the component will remain in the current place until it is explicitly moved.

So that when removing from group headers which are then empty and then get destroyed, there's no child DOM left

True to move any component to the detachedBody when the component is removed from this container. This option is only applicable when the component is not destroyed while being removed, see autoDestroy and remove. If this option is set to false, the DOM of the component will remain in the current place until it is explicitly moved.

True to move any component to the detachedBody when the component is removed from this container. This option is only applicable when the component is not destroyed while being removed, see autoDestroy and remove. If this option is set to false, the DOM of the component will remain in the current place until it is explicitly moved.

The direction to sort by.

The name of the direction parameter to send in a request. This is only used when simpleSortMode is set to true.

True if this Record has been modified.

The CSS class to use when the field value is dirty.

Fires when the dirty state of the entire form changes.

Fires when a change in the field's isDirty state is detected.

Fires when the dirty state of the entire form changes.

Disable this KeyMap

Disables quick tips globally.

Disables the feature.

inherit docs

Disable the component.

The base implementation just sets the plugin's disabled flag to true

Plugin subclasses which need more complex processing may implement an overriding implementation.

Fires after the component is disabled.

Disable the component.

Appends current timestamp to script files to prevent caching.

The get parameter name for the cache buster's timestamp.

True to disable format functions in the template. If the template doesn't contain format functions, setting disableFormats to true will reduce apply time. Defaults to false.

Specify true to disable input keystroke filtering

True to disable selection within the DataView. This configuration will lock the selection model that the DataView uses.

True to disable selection model.

Inherit docs Disable all immediate children that was previously disabled Override disable because onDisable only gets called when rendered

Disable the component.

Setting this property to true disables this individual Filter so that it no longer contributes to a Store's filter set

When disabled, the next time the store is filtered, the Filter plays no part in filtering and records eliminated by it may rejoin the dataset.

True when feature is disabled.

True to disable the field. Disabled Fields will not be submitted.

True to start disabled.

True if this button is disabled.

true to disable the component.