Loads a given set of .js files. Calls the callback function when all files have been loaded
Set preserveOrder to true to ensure non-parallel loading of files if load order is importantA custom drag proxy implementation specific to Ext.Panels. This class is primarily used internally
for the Panel's drag drop implementation, and should never need to be created directly.Gets the proxy's elementGets the proxy's ghost elementGets the proxy's elementHides the proxyMoves the proxy to a different position in the DOM. This is typically called while dragging the Panel
to keep the proxy sync'd to the Panel's location.Shows the proxyAs the amount of records increases, the time required for the browser to render
them increases. Paging is used to reduce the amount of data exchanged with the client.
Note: if there are more records/rows than can be viewed in the available screen area, vertical
scrollbars will be added.
Paging is typically handled on the server side (see exception below). The client sends
parameters to the server side, which the server needs to interpret and then respond with the
approprate data.
Ext.PagingToolbar is a specialized toolbar that is bound to a Ext.data.Store
and provides automatic paging control. This Component loads blocks
of data into the store by passing paramNames used for
paging criteria.
PagingToolbar is typically used as one of the Grid's toolbars:
Ext.QuickTips.init(); // to display button quicktips
var myStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
totalProperty: 'results',
...
}),
...
});
var myPageSize = 25; // server script should only send back 25 items at a time
var grid = new Ext.grid.GridPanel({
...
store: myStore,
bbar: new Ext.PagingToolbar({
store: myStore, // grid and PagingToolbar using same store
displayInfo: true,
pageSize: myPageSize,
prependButtons: true,
items: [
'text 1'
]
})
});
To use paging, pass the paging requirements to the server when the store is first loaded.
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: myPageSize,
// other params
foo: 'bar'
}
});
If using store's autoLoad configuration:
var myStore = new Ext.data.Store({
autoLoad: {params:{start: 0, limit: 25}},
...
});
The packet sent back from the server would have this form:
{
"success": true,
"results": 2000,
"rows": [ // *Note: this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}
Paging with Local Data
Paging can also be accomplished with local data using extensions:
Ext.ux.data.PagingStore
Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
Adds element(s) to the toolbar -- this function takes a variable number of
arguments of mixed type and adds them to the toolbar.
Note: See the notes within Ext.Container.add.Adds a button (or buttons). See Ext.Button for more info on the config.
Note: See the notes within Ext.Container.add.Adds a CSS class to the component's underlying element.Adds a new element to the toolbar from the passed Ext.DomHelper config
Note: See the notes within Ext.Container.add.Adds any standard HTML element to the toolbar
Note: See the notes within Ext.Container.add.Adds the specified events to the list of events which this Observable may fire.Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
been rendered yet. For a field that has already been rendered, use addElement.
Note: See the notes within Ext.Container.add.Forces subsequent additions into the float:right toolbar
Note: See the notes within Ext.Container.add.Adds any Toolbar.Item or subclass
Note: See the notes within Ext.Container.add.Appends an event handler to this object.Adds a separator
Note: See the notes within Ext.Container.add.Adds a spacer element
Note: See the notes within Ext.Container.add.Adds text to the toolbar
Note: See the notes within Ext.Container.add.Apply this component to existing markup that is valid. With this function, no call to render() is required.Binds the paging toolbar to the specified Ext.data.Store (deprecated)Binds the paging toolbar to the specified Ext.data.StoreBubbles 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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Change the active pageClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Refresh the current page, has the same effect as clicking the 'refresh' button.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Inserts any Ext.Toolbar.Item/Ext.Button at the specified index.
Note: See the notes within Ext.Container.add.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Move to the first page, has the same effect as clicking the 'first' button.Move to the last page, has the same effect as clicking the 'last' button.Move to the next page, has the same effect as clicking the 'next' button.Move to the previous page, has the same effect as clicking the 'previous' button.Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Unbinds the paging toolbar from the specified Ext.data.Store (deprecated)Update the content area of a component.Sets the current box measurements of the component's underlying element.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A DragDrop implementation that does not move, but can be a drop
target. You would get the same result by simply omitting implementation
for the event callbacks, but this way we reduce the processing cost of the
event listener and the callbacks.Add 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.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.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");
}
});Returns a reference to the linked elementSets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Lock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.Remove's this instance from the supplied interaction groupConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.toString methodUnlock this instaceRemove all drag and drop hooks for this elementProvides AJAX-style update capabilities for Element objects. Updater can be used to update
an Ext.Element once, or you can use startAutoRefresh to set up an auto-updating
Element on a specific interval.
Usage:
var el = Ext.get("foo"); // Get Ext.Element object
var mgr = el.getUpdater();
mgr.update({
url: "http://myserver.com/index.php",
params: {
param1: "foo",
param2: "bar"
}
});
...
mgr.formUpdate("myFormId", "http://myserver.com/index.php");
// or directly (returns the same Updater instance)
var mgr = new Ext.Updater("myElementId");
mgr.startAutoRefresh(60, "http://myserver.com/index.php");
mgr.on("update", myFcnNeedsToKnow);
// short handed call directly from the element object
Ext.get("foo").load({
url: "bar.php",
scripts: true,
params: "param1=foo¶m2=bar",
text: "Loading Foo..."
});Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
Usage:
Ext.Updater.updateElement("my-div", "stuff.php");Aborts the currently executing transaction, if any.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Performs an asynchronous form post, updating this element with the response. If the form has the attribute
enctype="multipart/form-data", it assumes it's a file upload.
Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
File uploads are not performed using normal "Ajax" techniques, that is they are not
performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
DOM <form> element temporarily modified to have its
target set to refer
to a dynamically generated, hidden <iframe> which is inserted into the document
but removed after the return data has been gathered.
Be aware that file upload packets, sent with the content type multipart/form-data
and some server technologies (notably JEE) may require some custom processing in order to
retrieve parameter names and parameter values from the packet content.This is an overrideable method which returns a reference to a default
renderer class if none is specified when creating the Ext.Updater.
Defaults to Ext.Updater.BasicRendererGet the Element this Updater is bound toReturns the current content renderer for this Updater. See Ext.Updater.BasicRenderer.render for more details.Checks to see if this object has any listeners for a specified eventReturns true if the Updater is currently set to auto refresh its content (see startAutoRefresh), otherwise false.Returns true if an update is in progress, otherwise false.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRefresh the element with the last used url or defaultUrl. If there is no url, it returns immediatelyRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the default URL used for updates.Sets the content renderer for this Updater. See Ext.Updater.BasicRenderer.render for more details.Display the element's "loading" state. By default, the element is updated with indicatorText. This
method may be overridden to perform a custom action while this Updater is actively updating its contents.Set this element to auto refresh. Can be canceled by calling stopAutoRefresh.Stop auto refresh on this element.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Performs an asynchronous request, updating this element with the response.
If params are specified it uses POST, otherwise it uses GET.
Note: Due to the asynchronous nature of remote server requests, the Element
will not have been fully updated when the function returns. To post-process the returned
data, use the callback option, or an update event handler.A class which handles submission of data from Forms
and processes the returned response.
Instances of this class are only created by a Form when
submitting.
Response Packet Criteria
A response packet may contain:
success property : Boolean
The success property is required.
errors property : Object
The errors property,
which is optional, contains error messages for invalid fields.
JSON Packets
By default, response packets are assumed to be JSON, so a typical response
packet may look like this:{
success: false,
errors: {
clientCode: "Client not found",
portOfLoading: "This field must not be null"
}
}
Other data may be placed into the response for processing by the Ext.form.BasicForm's callback
or event handler methods. The object decoded from this JSON is available in the
result property.
Alternatively, if an errorReader is specified as an XmlReader:errorReader: new Ext.data.XmlReader({
record : 'field',
success: '@success'
}, [
'id', 'msg'
]
)
then the results may be sent back in XML format:<?xml version="1.0" encoding="UTF-8"?>
<message success="false">
<errors>
<field>
<id>clientCode</id>
<msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>
</field>
<field>
<id>portOfLoading</id>
<msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>
</field>
</errors>
</message>
Other elements may be placed into the response XML for processing by the Ext.form.BasicForm's callback
or event handler methods. The XML document is available in the errorReader's xmlData property.This is a region of a BorderLayout that acts as a subcontainer
within the layout. Each region has its own layout that is
independent of other regions and the containing BorderLayout, and can be any of the
valid Ext layout types.
Region size is managed automatically and cannot be changed by the user -- for
resizable regions, see Ext.layout.BorderLayout.SplitRegion.Returns the current margins for this region. If the region is collapsed, the
cmargins (collapsed margins) value will be returned, otherwise the
margins value will be returned.Returns the minimum allowable height for this region.Returns the minimum allowable width for this region.Returns the current size of this region. If the region is collapsed, the size of the
collapsedEl will be returned, otherwise the size of the region's panel will be returned.True if this region is currently visible, else false.Sets the specified panel as the container element for this region.If this Region is floatable, and this Region has been slid into floating visibility, then this method slides
this region back into its collapsed state.If this Region is floatable, this method slides this Region into full visibility over the top
of the center Region where it floats until either slideIn is called, or other regions of the layout
are clicked, or the mouse exits the Region.The Ext.chart package provides the capability to visualize data with flash based charting.
Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
To change the look and feel of a chart, see the chartStyle and extraStyle config options.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Represents a single thumb element on a Slider. This would not usually be created manually and would instead
be created internally by an Ext.Slider.Disables the thumb if it is currently enabledEnables the thumb if it is currently disabledSets up an Ext.dd.DragTracker for this thumbRenders the thumb into a sliderA grouping container for Ext.form.Checkbox controls.
Sample usage:
var myCheckboxGroup = new Ext.form.CheckboxGroup({
id:'myGroup',
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
// Put all controls in a single column with width 100%
columns: 1,
items: [
{boxLabel: 'Item 1', name: 'cb-col-1'},
{boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3'}
]
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs CheckboxGroup's validations and returns an array of any errors. The only error by default
is if allowBlank is set to true and no items are checked.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets an array of the selected Ext.form.Checkbox in the group.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Set the value(s) of an item or items
in the group. Examples illustrating how this method may be called:
// call with name and value
myCheckboxGroup.setValue('cb-col-1', true);
// call with an array of boolean values
myCheckboxGroup.setValue([true, false, false]);
// call with an object literal specifying item:value pairs
myCheckboxGroup.setValue({
'cb-col-2': false,
'cb-col-3': true
});
// use comma separated string to set items with name to true (checked)
myCheckboxGroup.setValue('cb-col-1,cb-col-3');
See Ext.form.Checkbox.setValue for additional information.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
The trigger has no default action, so you must assign a function to implement the trigger click handler by
overriding onTriggerClick. You can create a TriggerField directly, as it renders exactly like a combobox
for which you can provide a custom implementation. For example:
var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');
However, in general you will most likely want to use TriggerField as the base class for a reusable component.
Ext.form.DateField and Ext.form.ComboBox are perfect examples of this.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Validates a value according to the field's validation rules and returns an array of errors
for any failing validations. Validation rules are processed in the following order:
1. Field specific validator
A validator offers a way to customize and reuse a validation specification.
If a field is configured with a validator
function, it will be passed the current field value. The validator
function is expected to return either:
Boolean true if the value is valid (validation continues).
a String to represent the invalid message if invalid (validation halts).
2. Basic Validation
If the validator has not halted validation,
basic validation proceeds as follows:
allowBlank : (Invalid message =
emptyText)
Depending on the configuration of allowBlank, a
blank field will cause validation to halt at this step and return
Boolean true or false accordingly.
minLength : (Invalid message =
minLengthText)
If the passed value does not satisfy the minLength
specified, validation halts.
maxLength : (Invalid message =
maxLengthText)
If the passed value does not satisfy the maxLength
specified, validation halts.
3. Preconfigured Validation Types (VTypes)
If none of the prior validation steps halts validation, a field
configured with a vtype will utilize the
corresponding VTypes validation function.
If invalid, either the field's vtypeText or
the VTypes vtype Text property will be used for the invalid message.
Keystrokes on the field will be filtered according to the VTypes
vtype Mask property.
4. Field specific regex test
If none of the prior validation steps halts validation, a field's
configured regex test will be processed.
The invalid message for this test is configured with
regexText.
Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)The function that should handle the trigger's click event. This method does nothing by default
until overridden by an implementing function. See Ext.form.ComboBox and Ext.form.DateField for
sample implementations.Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Allow or prevent the user from directly editing the field text. If false is passed,
the user will only be able to modify the field using the trigger. Will also add
a click event to the text field which will call the trigger. This method
is the runtime equivalent of setting the editable config option at config time.Sets the height of the component. This method fires the resize event.Changes the hidden status of the trigger.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Setting this to true will supersede settings editable and hideTrigger.
Setting this to false will defer back to editable and hideTrigger. This method
is the runtime equivalent of setting the readOnly config option at config time.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Used to provide a sizable space in a layout.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Provides editor functionality for inline tree node editing. Any valid Ext.form.Field subclass can be used
as the editor field.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cancels the editing process and hides the editor without persisting any changes. The field value will be
reverted to the original starting value.Clone the current component using the original config values passed into this instance by default.Ends the editing process, persists the changed value to the underlying field, and hides the editor.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the data value of the editorGets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRealigns the editor to the bound field based on the current alignment config value.Relays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Sets the height and width of this editor.Sets the data value of the editorConvenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Starts the editing process and shows the editor.Suspend the firing of all events. (see resumeEvents)Edit the text of the passed TreeNode.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Container for a group of buttons. Example usage:
var p = new Ext.Panel({
title: 'Panel with Button Group',
width: 300,
height:200,
renderTo: document.body,
html: 'whatever',
tbar: [{
xtype: 'buttongroup',
columns: 3,
title: 'Clipboard',
items: [{
text: 'Paste',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
},{
xtype:'splitbutton',
text: 'Menu Button',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{text: 'Menu Item 1'}]
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
}]
});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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.This is a multi-pane, application-oriented UI layout style that supports multiple
nested panels, automatic split bars between
regions and built-in
expanding and collapsing of regions.
This class is intended to be extended or created via the layout:'border'
Ext.Container.layout config, and should generally not need to be created directly
via the new keyword.
BorderLayout does not have any direct config options (other than inherited ones).
All configuration options available for customizing the BorderLayout are at the
Ext.layout.BorderLayout.Region and Ext.layout.BorderLayout.SplitRegion
levels.
Example usage:
var myBorderPanel = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
Notes:
Any container using the BorderLayout must have a child item with region:'center'.
The child item in the center region will always be resized to fill the remaining space not used by
the other regions in the layout.
Any child items with a region of west or east must have width defined
(an integer representing the number of pixels that the region should take up).
Any child items with a region of north or south must have height defined.
The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove
Components within a BorderLayout, have them wrapped by an additional Container which is directly
managed by the BorderLayout. If the region is to be collapsible, the Container used directly
by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel)
is added to the west region:
wrc = Ext.getCmp('west-region-container');
wrc.removeAll();
wrc.add({
title: 'Added Panel',
html: 'Some content'
});
wrc.doLayout();
To reference a Region:
wr = myBorderPanel.layout.west;
Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Just as Ext.Element wraps around a native DOM node, Ext.EventObject
wraps the browser's native event-object normalizing cross-browser differences,
such as which mouse button is clicked, keys pressed, mechanisms to stop
event-propagation along with a method to prevent default actions from taking place.
For example:
function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
e.preventDefault();
var target = e.getTarget(); // same as t (the target HTMLElement)
...
}
var myDiv = Ext.get("myDiv"); // get reference to an Ext.Element
myDiv.on( // 'on' is shorthand for addListener
"click", // perform an action on click of myDiv
handleClick // reference to the action handler
);
// other methods to do the same:
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);Gets the character code for the event.Returns a normalized keyCode for the event.Gets the x coordinate of the event.Gets the y coordinate of the event.Gets the related target.Gets the target for the event.Normalizes mouse wheel delta across browsersGets the page coordinates of the event.Prevents the browsers default handling of the event.Stop the event (preventDefault and stopPropagation)Cancels bubbling of the event.Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
Example usage:// Handle click on any child of an element
Ext.getBody().on('click', function(e){
if(e.within('some-el')){
alert('Clicked on a child of some-el!');
}
});
// Handle click directly on an element, ignoring clicks on child nodes
Ext.getBody().on('click', function(e,t){
if((t.id == 'some-el') && !e.within(t, true)){
alert('Clicked directly on some-el!');
}
});This class provides the default UI implementation for root Ext TreeNodes.
The RootTreeNode UI implementation allows customizing the appearance of the root tree node.
If you are customizing the Tree's user interface, you
may need to extend this class, but you should never need to instantiate this class.Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:
new Ext.Slider({
width: 214,
minValue: 0,
maxValue: 100,
plugins: new Ext.slider.Tip()
});
Optionally provide your own tip text by overriding getText:
new Ext.Slider({
width: 214,
minValue: 0,
maxValue: 100,
plugins: new Ext.slider.Tip({
getText: function(thumb){
return String.format('{0}% complete', thumb.value);
}
})
});
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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Used to create the text that appears in the Tip's body. By default this just returns
the value of the Slider Thumb that the Tip is attached to. Override to customize.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Shows this tip at the specified XY position. Example usage:
// Show the tip at x:50 and y:100
tip.showAt([50,100]);Experimental. Shows this tip at a position relative to another element using a standard Ext.Element.alignTo
anchor position value. Example usage:
// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');
// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A simple class that provides the basic implementation needed to make any element draggable.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.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.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 up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are calledSets the pointer offset to the distance between the linked element's top
left corner and the location the element was clickedEvent that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.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.An empty function by default, but provided so that you can perform a custom action after an invalid
drop has occurred.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Creates the proxy element if it does not yet existFired when we are done dragging the objectReturns the data object associated with this drag sourceReturns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementReturns the drag source's underlying Ext.dd.StatusProxyHides the drag source's Ext.dd.StatusProxySets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitialization for the drag frame element. Must be called in the
constructor of all subclassesInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.An empty function by default, but provided so that you can perform a custom action before the initial
drag event begins and optionally cancel it.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupAn empty function by default, but provided so that you can perform a custom action once the initial
drag event has begun. The drag cannot be canceled from this function.Remove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Sets the pointer offset. You can call this directly to force the
offset to be in a particular location (e.g., pass in 0,0 to set it
to the center of the object)Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragSets the drag 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.Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementExt.list.ListView is a fast and light-weight implentation of a
Grid like view with the following characteristics:
resizable columns
selectable
column widths are initially proportioned by percentage based on the container
width and number of columns
uses templates to render the data in any required format
no horizontal scrolling
no editing
Example usage:
// consume JSON of this form:
{
"images":[
{
"name":"dance_fever.jpg",
"size":2067,
"lastmod":1236974993000,
"url":"images\/thumbs\/dance_fever.jpg"
},
{
"name":"zack_sink.jpg",
"size":2303,
"lastmod":1236974993000,
"url":"images\/thumbs\/zack_sink.jpg"
}
]
}
var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: [
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
]
});
store.load();
var listView = new Ext.list.ListView({
store: store,
multiSelect: true,
emptyText: 'No images to display',
reserveScrollOffset: true,
columns: [{
header: 'File',
width: .5,
dataIndex: 'name'
},{
header: 'Last Modified',
width: .35,
dataIndex: 'lastmod',
tpl: '{lastmod:date("m-d h:i a")}'
},{
header: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
align: 'right'
}]
});
// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
id:'images-view',
width:425,
height:250,
collapsible:true,
layout:'fit',
title:'Simple ListView (0 items selected)',
items: listView
});
panel.render(document.body);
// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this view and refreshes it.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.Clears all selections.Clone the current component using the original config values passed into this instance by default.Function which can be overridden which returns the data object passed to this
view's template to render the whole ListView. The returned object
shall contain the following properties:
columns : StringSee columns
rows : StringSee
Ext.DataView.collectData
Deselects a node.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Returns the template node the passed child belongs to, or null if it doesn't belong to one.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets a template node.Gets a range nodes.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Gets a record from a nodeGets an array of the records from an array of nodesReturns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the indexes of the selected nodes.Gets the currently selected nodes.Gets an array of the selected recordsGets the number of selected nodes.Gets the current size of the component's underlying element.Returns the store associated with this DataView.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Finds the index of the passed node.Returns true if the passed node is selected, else false.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Function which can be overridden to provide custom formatting for each Record that is used by this
DataView's template to render each node.Returns the previous component in the owning containerRemoves all listeners for this objectRefreshes the view by reloading the data from the store and re-rendering the template.Refreshes an individual node's data from the store.Relays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects a set of nodes.Selects a range of nodes. All nodes between start and end are selected.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Changes the data store bound to this view and refreshes it. (deprecated in favor of bindStore)Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Provides the ability to execute one or more arbitrary tasks in a multithreaded
manner. Generally, you can use the singleton Ext.TaskMgr instead, but
if needed, you can create separate instances of TaskRunner. Any number of
separate tasks can be started at any time and will run independently of each
other. Example usage:
// Start a simple clock task that updates a div once per second
var updateClock = function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
}
var task = {
run: updateClock,
interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
// equivalent using TaskMgr
Ext.TaskMgr.start({
run: updateClock,
interval: 1000
});
See the start method for details about how to configure a task object.
Also see Ext.util.DelayedTask.Starts a new task.Stops an existing running task.Stops all tasks that are currently running.A simple class that adds a vertical separator bar between toolbar items
(css class:'xtb-sep'). Example usage:
new Ext.Panel({
tbar : [
'Item 1',
{xtype: 'tbseparator'}, // or '-'
'Item 2'
]
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and
should not contain any HTML, otherwise it may not be measured correctly.Only available on the instance returned from createInstance, not on the singleton.
Binds this TextMetrics instance to an element from which to copy existing CSS styles
that can affect the size of the rendered textReturn a unique TextMetrics instance that can be bound directly to an element and reused. This reduces
the overhead of multiple calls to initialize the style properties on each measurement.Only available on the instance returned from createInstance, not on the singleton.
Returns the measured height of the specified text. For multiline text, be sure to call
setFixedWidth if necessary.Only available on the instance returned from createInstance, not on the singleton.
Returns the size of the specified text based on the internal element's style and width propertiesOnly available on the instance returned from createInstance, not on the singleton.
Returns the measured width of the specified textMeasures the size of the specified textOnly available on the instance returned from createInstance, not on the singleton.
Sets a fixed width on the internal measurement element. If the text will be multiline, you have
to set a fixed width in order to accurately measure the text height.A Column definition class which renders a value by processing a Record's
data using a configured XTemplate.
See the xtype config option of Ext.grid.Column for more
details.Returns the editor defined for this column that was created to wrap the Field
used to edit the cell.Sets a new editor for this column.Small helper class to make creating Ext.data.Stores from XML data easier.
A XmlStore will be automatically configured with a Ext.data.XmlReader.
A store configuration would be something like:var store = new Ext.data.XmlStore({
// store configs
autoDestroy: true,
storeId: 'myStore',
url: 'sheldon.xml', // automatically configures a HttpProxy
// reader configs
record: 'Item', // records will have an "Item" tag
idPath: 'ASIN',
totalRecords: '@TotalResults'
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
This store is configured to consume a returned object of the form:<?xml version="1.0" encoding="UTF-8"?>
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2009-05-15">
<Items>
<Request>
<IsValid>True</IsValid>
<ItemSearchRequest>
<Author>Sidney Sheldon</Author>
<SearchIndex>Books</SearchIndex>
</ItemSearchRequest>
</Request>
<TotalResults>203</TotalResults>
<TotalPages>21</TotalPages>
<Item>
<ASIN>0446355453</ASIN>
<DetailPageURL>
http://www.amazon.com/
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Master of the Game</Title>
</ItemAttributes>
</Item>
</Items>
</ItemSearchResponse>
An object literal of this form could also be used as the data config option.
Note: Although not listed here, this class accepts all of the configuration options of
XmlReader.Add Records to the Store and fires the add event. To add Records
to the store from a remote source use load({add:true}).
See also recordType and insert.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.(Local sort only) Inserts the passed Record into the Store at the index where it
should go based on the current sort information.Revert to a view of the Record cache with no filtering applied.Collects unique values for a particular dataIndex from this store.Commit 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.Destroys the store.Calls the specified function for each of the Records in the cache.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the records by a specified property. Alternatively, pass an array of filter
options to filter by more than one property.
Single filter example:
store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
Multiple filter example:
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.Finds the index of the first matching Record in this store by a specific field value.Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.Finds the index of the first matching Record in this store by a specific field value.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the Record at the specified index.Get the Record with the specified id.Gets the number of cached records.
If using paging, this may not be the total size of the dataset. If the data object
used by the Reader contains the dataset size, then the getTotalCount function returns
the dataset size. Note: see the Important note in load.Gets all records modified since the last commit. Modified records are
persisted across load operations (e.g., during paging). Note: deleted records are not
included. See also pruneModifiedRecords and
Ext.data.RecordmarkDirty..Returns a range of Records between specified indices.Returns an object describing the current sort state of this Store.Gets the total number of records in the dataset as returned by the server.
If using paging, for this to be accurate, the data object used by the Reader
must contain the dataset size. For remote data sources, the value for this property
(totalProperty for JsonReader,
totalRecords for XmlReader) shall be returned by a query on the server.
Note: see the Important note in load.Checks to see if this object has any listeners for a specified eventGet the index within the cache of the passed Record.Get the index within the cache of the Record with the passed id.Inserts Records into the Store at the given index and fires the add event.
See also add and addSorted.Returns true if this store is currently filteredLoads the Record cache from the configured proxy using the configured reader.
Notes:
Important: loading is asynchronous! This call will return before the new data has been
loaded. To perform any post-processing where information from the load call is required, specify
the callback function to be called, or use a a 'load' event handler.
If using remote paging, the first load call must specify the start and limit
properties in the options.params property to establish the initial position within the
dataset, and the number of Records to cache on each read from the Proxy.
If using remote sorting, the configured sortInfo
will be automatically included with the posted parameters according to the specified
paramNames.
Loads data from a passed data block and fires the load event. A Reader
which understands the format of the data must have been configured in the constructor.Sorts the contents of this store by multiple field/direction sorters. This is called internally by sort
and would not usually be called manually.
Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
if remoteSort is used.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectQuery the records by a specified property.Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.Reject outstanding changes on all modified records.Relays selected events from the specified Observable as if the events were fired by this.Reloads the Record cache from the configured Proxy using the configured
Reader and the options from the last load operation
performed.
Note: see the Important note in load.Remove Records from the Store and fires the remove event.Remove all Records from the Store and fires the clear event.Remove a Record from the Store at the specified index. Fires the remove event.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Saves all pending changes to the store. If the commensurate Ext.data.Api.actions action is not configured, then
the configured url will be used.
change url
--------------- --------------------
removed records Ext.data.Api.actions.destroy
phantom records Ext.data.Api.actions.create
modified records Ext.data.Api.actions.update
Set the value for a property name in this store's baseParams. Usage:myStore.setBaseParam('foo', {bar:3});Sets the default sort column and order to be used by the next load operation.Sorts the store contents by a single field and direction. This is called internally by sort and would
not usually be called manuallySort the Records.
If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
sorting is used, the cache is sorted internally. See also remoteSort and paramNames.
This function accepts two call signatures - pass in a field name as the first argument to sort on a single
field, or pass in an array of sort configuration objects to sort by multiple fields.
Single sort example:
store.sort('name', 'ASC');
Multi sort example:
store.sort([
{
field : 'name',
direction: 'ASC'
},
{
field : 'salary',
direction: 'DESC'
}
], 'ASC');
In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
above. Any number of sort configs can be added.Sums the value of property for each record between start
and end and returns the result.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered
using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage:
{
xtype: 'compositefield',
labelWidth: 120
items: [
{
xtype : 'textfield',
fieldLabel: 'Title',
width : 20
},
{
xtype : 'textfield',
fieldLabel: 'First',
flex : 1
},
{
xtype : 'textfield',
fieldLabel: 'Last',
flex : 1
}
]
}
In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels
of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself:
{
xtype: 'compositefield',
fieldLabel: 'Custom label',
items: [...]
}
Any Ext.form.* component can be placed inside a composite field.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Takes an object containing error messages for contained fields, returning a combined error
string (defaults to just placing each item on a new line). This can be overridden to provide
custom combined error message handling.Builds a label string from an array of subfield labels.
By default this just joins the labels together with a commaClear any invalid styles/messages for this fieldCalls clearInvalid on all child fields. This is a convenience function and should not often need to be called
as fields usually take care of clearing themselvesClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Checks each field in the composite and returns true if any is dirtyReturns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Called if combineErrors is true and a subfield's clearInvalid method is called.
By default this just updates the internal fieldErrors MixedCollection.Called if combineErrors is true and a subfield's markInvalid method is called.
By default this just adds the subfield's error to the internal fieldErrors MixedCollectionReturns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets each field in the composite to their previous valueResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined.
This is called before displaying errors to ensure that the errors are presented in the expected order.
This function can be overridden to provide a custom sorting order if needed.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valuePerforms validation checks on each subfield and returns false if any of them fail validation.Modified version of Douglas Crockford"s json.js that doesn"t
mess with the Object prototype
http://www.json.org/js.htmlDecodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError unless the safe option is set.Encodes an Object, Array or other valueEncodes a Date. This returns the actual string which is inserted into the JSON string as the literal expression.
The returned value includes enclosing double quotation marks.
The default return format is "yyyy-mm-ddThh:mm:ss".
To override this:Ext.util.JSON.encodeDate = function(d) {
return d.format('"Y-m-d"');
};Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
Usage:
var split = new Ext.SplitBar("elementToDrag", "elementToSize",
Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
split.minSize = 100;
split.maxSize = 600;
split.animate = true;
split.on('moved', splitterMoved);Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroy this splitbar.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the adapter this SplitBar usesGets the maximum size for the resizing elementGets the minimum size for the resizing elementChecks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Set the adapter this SplitBar usesSets the initialize size for the resizing elementSets the maximum size for the resizing elementSets the minimum size for the resizing elementSuspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
to be extended by an implementing class. For an example of implementing this class, see the custom
SearchField implementation here:
http://extjs.com/deploy/ext/examples/form/custom.htmlAdds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Validates a value according to the field's validation rules and returns an array of errors
for any failing validations. Validation rules are processed in the following order:
1. Field specific validator
A validator offers a way to customize and reuse a validation specification.
If a field is configured with a validator
function, it will be passed the current field value. The validator
function is expected to return either:
Boolean true if the value is valid (validation continues).
a String to represent the invalid message if invalid (validation halts).
2. Basic Validation
If the validator has not halted validation,
basic validation proceeds as follows:
allowBlank : (Invalid message =
emptyText)
Depending on the configuration of allowBlank, a
blank field will cause validation to halt at this step and return
Boolean true or false accordingly.
minLength : (Invalid message =
minLengthText)
If the passed value does not satisfy the minLength
specified, validation halts.
maxLength : (Invalid message =
maxLengthText)
If the passed value does not satisfy the maxLength
specified, validation halts.
3. Preconfigured Validation Types (VTypes)
If none of the prior validation steps halts validation, a field
configured with a vtype will utilize the
corresponding VTypes validation function.
If invalid, either the field's vtypeText or
the VTypes vtype Text property will be used for the invalid message.
Keystrokes on the field will be filtered according to the VTypes
vtype Mask property.
4. Field specific regex test
If none of the prior validation steps halts validation, a field's
configured regex test will be processed.
The invalid message for this test is configured with
regexText.
Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)The function that should handle the trigger's click event. This method does nothing by default
until overridden by an implementing function. See Ext.form.TriggerField.onTriggerClick
for additional information.The function that should handle the trigger's click event. This method does nothing by default
until overridden by an implementing function. See Ext.form.TriggerField.onTriggerClick
for additional information.The function that should handle the trigger's click event. This method does nothing by default
until overridden by an implementing function. See Ext.form.ComboBox and Ext.form.DateField for
sample implementations.Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Allow or prevent the user from directly editing the field text. If false is passed,
the user will only be able to modify the field using the trigger. Will also add
a click event to the text field which will call the trigger. This method
is the runtime equivalent of setting the editable config option at config time.Sets the height of the component. This method fires the resize event.Changes the hidden status of the trigger.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Setting this to true will supersede settings editable and hideTrigger.
Setting this to false will defer back to editable and hideTrigger. This method
is the runtime equivalent of setting the readOnly config option at config time.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Formerly known as "SimpleStore".
Small helper class to make creating Ext.data.Stores from Array data easier.
An ArrayStore will be automatically configured with a Ext.data.ArrayReader.
A store configuration would be something like:var store = new Ext.data.ArrayStore({
// store configs
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields: [
'company',
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
This store is configured to consume a returned object of the form:var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
An object literal of this form could also be used as the data config option.
*Note: Although not listed here, this class accepts all of the configuration options of
ArrayReader.Add Records to the Store and fires the add event. To add Records
to the store from a remote source use load({add:true}).
See also recordType and insert.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.(Local sort only) Inserts the passed Record into the Store at the index where it
should go based on the current sort information.Revert to a view of the Record cache with no filtering applied.Collects unique values for a particular dataIndex from this store.Commit 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.Destroys the store.Calls the specified function for each of the Records in the cache.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the records by a specified property. Alternatively, pass an array of filter
options to filter by more than one property.
Single filter example:
store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
Multiple filter example:
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.Finds the index of the first matching Record in this store by a specific field value.Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.Finds the index of the first matching Record in this store by a specific field value.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the Record at the specified index.Get the Record with the specified id.Gets the number of cached records.
If using paging, this may not be the total size of the dataset. If the data object
used by the Reader contains the dataset size, then the getTotalCount function returns
the dataset size. Note: see the Important note in load.Gets all records modified since the last commit. Modified records are
persisted across load operations (e.g., during paging). Note: deleted records are not
included. See also pruneModifiedRecords and
Ext.data.RecordmarkDirty..Returns a range of Records between specified indices.Returns an object describing the current sort state of this Store.Gets the total number of records in the dataset as returned by the server.
If using paging, for this to be accurate, the data object used by the Reader
must contain the dataset size. For remote data sources, the value for this property
(totalProperty for JsonReader,
totalRecords for XmlReader) shall be returned by a query on the server.
Note: see the Important note in load.Checks to see if this object has any listeners for a specified eventGet the index within the cache of the passed Record.Get the index within the cache of the Record with the passed id.Inserts Records into the Store at the given index and fires the add event.
See also add and addSorted.Returns true if this store is currently filteredLoads the Record cache from the configured proxy using the configured reader.
Notes:
Important: loading is asynchronous! This call will return before the new data has been
loaded. To perform any post-processing where information from the load call is required, specify
the callback function to be called, or use a a 'load' event handler.
If using remote paging, the first load call must specify the start and limit
properties in the options.params property to establish the initial position within the
dataset, and the number of Records to cache on each read from the Proxy.
If using remote sorting, the configured sortInfo
will be automatically included with the posted parameters according to the specified
paramNames.
Loads data from a passed data block and fires the load event. A Reader
which understands the format of the data must have been configured in the constructor.Sorts the contents of this store by multiple field/direction sorters. This is called internally by sort
and would not usually be called manually.
Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
if remoteSort is used.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectQuery the records by a specified property.Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.Reject outstanding changes on all modified records.Relays selected events from the specified Observable as if the events were fired by this.Reloads the Record cache from the configured Proxy using the configured
Reader and the options from the last load operation
performed.
Note: see the Important note in load.Remove Records from the Store and fires the remove event.Remove all Records from the Store and fires the clear event.Remove a Record from the Store at the specified index. Fires the remove event.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Saves all pending changes to the store. If the commensurate Ext.data.Api.actions action is not configured, then
the configured url will be used.
change url
--------------- --------------------
removed records Ext.data.Api.actions.destroy
phantom records Ext.data.Api.actions.create
modified records Ext.data.Api.actions.update
Set the value for a property name in this store's baseParams. Usage:myStore.setBaseParam('foo', {bar:3});Sets the default sort column and order to be used by the next load operation.Sorts the store contents by a single field and direction. This is called internally by sort and would
not usually be called manuallySort the Records.
If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
sorting is used, the cache is sorted internally. See also remoteSort and paramNames.
This function accepts two call signatures - pass in a field name as the first argument to sort on a single
field, or pass in an array of sort configuration objects to sort by multiple fields.
Single sort example:
store.sort('name', 'ASC');
Multi sort example:
store.sort([
{
field : 'name',
direction: 'ASC'
},
{
field : 'salary',
direction: 'DESC'
}
], 'ASC');
In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
above. Any number of sort configs can be added.Sums the value of property for each record between start
and end and returns the result.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)A customized implementation of a DragZone which provides default implementations of two of the
template methods of DragZone to enable dragging of the selected rows of a GridPanel.
A cooperating DropZone must be created who's template method implementations of
onNodeEnter, onNodeOver,
onNodeOut and onNodeDrop are able
to process the data which is provided.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.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 empty immplementation. Implement this to provide behaviour after a repair of an invalid drop. An implementation might highlight
the selected rows to show that they have not been dragged.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 up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are calledSets the pointer offset to the distance between the linked element's top
left corner and the location the element was clickedEvent that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.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.An empty function by default, but provided so that you can perform a custom action after an invalid
drop has occurred.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Creates the proxy element if it does not yet existFired when we are done dragging the objectThe provided implementation of the getDragData method which collects the data to be dragged from the GridPanel on mousedown.
This data is available for processing in the onNodeEnter, onNodeOver,
onNodeOut and onNodeDrop methods of a cooperating DropZone.
The data object contains the following properties:
grid : Ext.Grid.GridPanelThe GridPanel from which the data is being dragged.
ddel : htmlElementAn htmlElement which provides the "picture" of the data being dragged.
rowIndex : NumberThe index of the row which receieved the mousedown gesture which triggered the drag.
selections : ArrayAn Array of the selected Records which are being dragged from the GridPanel.
Returns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementReturns the drag source's underlying Ext.dd.StatusProxyAn empty implementation. Implement this to provide coordinates for the drag proxy to slide back to after an invalid drop.
Called before a repair of an invalid drop to get the XY to animate to.Hides the drag source's Ext.dd.StatusProxySets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitialization for the drag frame element. Must be called in the
constructor of all subclassesInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.An empty function by default, but provided so that you can perform a custom action before the initial
drag event begins and optionally cancel it.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objThe provided implementation of the onInitDrag method. Sets the innerHTML of the drag proxy which provides the "picture"
of the data being dragged.
The innerHTML data is found by calling the owning GridPanel's getDragDropText.Abstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupAn empty function by default, but provided so that you can perform a custom action once the initial
drag event has begun. The drag cannot be canceled from this function.Remove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Sets the pointer offset. You can call this directly to force the
offset to be in a particular location (e.g., pass in 0,0 to set it
to the center of the object)Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragSets the drag 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.Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementDescriptionReturns the current scroll position of the innerCt elementScrolls to the given component.Multi selection for a TreePanel.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Clear all selectionsEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns an array of the selected nodesChecks to see if this object has any listeners for a specified eventReturns true if the node is selectedAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Select a node.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Deselect a node.Reusable data formatting functionsConverts the first character only of a string to upper caseParse a value into a formatted date using the specified format pattern.Returns a date rendering function that can be reused to apply a date format multiple times efficientlyChecks a reference and converts it to the default value if it's emptyTruncate a string and add an ellipsis ('...') to the end if it exceeds the specified lengthSimple format for a file size (xxx bytes, xxx KB, xxx MB)Convert certain characters (&, <, >, and ') from their HTML character equivalents.Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.Converts a string to all lower case lettersIt does simple math for use in a template, for example:var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');Converts newline characters to the HTML tag <br/>Formats the number according to the format string.
examples (123456.789):
0 - (123456) show only digits, no precision
0.00 - (123456.78) show only digits, 2 precision
0.0000 - (123456.7890) show only digits, 4 precision
0,000 - (123,456) show comma and digits, no precision
0,000.00 - (123,456.78) show comma and digits, 2 precision
0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision
To reverse the grouping (,) and decimal (.) for international numbers, add /i to the end.
For example: 0.000,00/i
Returns a number rendering function that can be reused to apply a number format multiple times efficientlySelectively do a plural form of a word based on a numeric value. For example, in a template,
{commentCount:plural("Comment")} would result in "1 Comment" if commentCount was 1 or would be "x Comments"
if the value is 0 or greater than 1.Rounds the passed number to the required decimal precision.Strips all script tagsStrips all HTML tagsReturns a substring from within an original stringTrims any whitespace from either side of a stringChecks a reference and converts it to empty string if it is undefinedConverts a string to all upper case lettersFormat a number as US currencyA base error class. Future implementations are intended to provide more
robust error handling throughout the framework (in the debug build only)
to check for common errors and problems. The messages issued by this class
will aid error checking. Error checks will be automatically removed in the
production build so that performance is not negatively impacted.
Some sample messages currently implemented:
"DataProxy attempted to execute an API-action but found an undefined
url / function. Please review your Proxy url/api-configuration."
"Could not locate your "root" property in your server response.
Please review your JsonReader config to ensure the config-property
"root" matches the property your server-response. See the JsonReader
docs for additional assistance."
An example of the code used for generating error messages:try {
generateError({
foo: 'bar'
});
}
catch (e) {
console.error(e);
}
function generateError(data) {
throw new Ext.Error('foo-error', data);
}getMessagegetNametoJsonThis is the global state manager. By default all components that are "state aware" check this class
for state information if you don't pass them a custom state provider. In order for this class
to be useful, it must be initialized with a provider when your application initializes. Example usage:
// in your initialization function
init : function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var win = new Window(...);
win.restoreState();
}Clears a value from the stateReturns the current value for a keyGets the currently configured state providerSets the value for a keyConfigures the default state provider for your applicationThese functions are available as static methods on the JavaScript String object.Escapes the passed string for ' and \Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens. Each
token must be unique, and must increment in the format {0}, {1}, etc. Example usage:
var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);
// s now contains the string: '<div class="my-class">Some text</div>'Pads the left side of a string with a specified character. This is especially useful
for normalizing number and date strings. Example usage:
var s = String.leftPad('123', 5, '0');
// s now contains the string: '00123'Utility function that allows you to easily switch a string between two alternating values. The passed value
is compared to the current string, and if they are equal, the other value that was passed in is returned. If
they are already different, the first value passed in is returned. Note that this method returns the new value
but does not change the current string.
// alternate sort directions
sort = sort.toggle('ASC', 'DESC');
// instead of conditional logic:
sort = (sort == 'ASC' ? 'DESC' : 'ASC');Trims whitespace from either end of a string, leaving spaces within the string intact. Example:
var s = ' foo bar ';
alert('-' + s + '-'); //alerts "- foo bar -"
alert('-' + s.trim() + '-'); //alerts "-foo bar-"A Column definition class which renders boolean data fields. See the xtype
config option of Ext.list.Column for more details.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.DataProxy Error extension.
constructorgetMessagegetNametoJsonProvides automatic scrolling of overflow regions in the page during drag operations.
The ScrollManager configs will be used as the defaults for any scroll container registered with it,
but you can also override most of the configs per scroll container by adding a
ddScrollConfig object to the target element that contains these properties: hthresh,
vthresh, increment and frequency. Example usage:
var el = Ext.get('scroll-ct');
el.ddScrollConfig = {
vthresh: 50,
hthresh: -1,
frequency: 100,
increment: 200
};
Ext.dd.ScrollManager.register(el);
Note: This class uses "Point Mode" and is untested in "Intersect Mode".Manually trigger a cache refresh.Registers new overflow element(s) to auto scrollUnregisters overflow element(s) so they are no longer scrolledAbstract base class for grid SelectionModels. It provides the interface that should be
implemented by descendant classes. This class should not be directly instantiated.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns true if the selections are locked.Locks the selections.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Unlocks the selections.Instances of this class encapsulate both Record definition information, and Record
value information for use in Ext.data.Store objects, or any code which needs
to access Records cached in an Ext.data.Store object.
Constructors for this class are generated by passing an Array of field definition objects to create.
Instances are usually only created by Ext.data.Reader implementations when processing unformatted data
objects.
Note that an instance of a Record class may only belong to one Store at a time.
In order to copy data from one Store to another, use the copy method to create an exact
copy of the Record, and insert the new instance into the other Store.
When serializing a Record for submission to the server, be aware that it contains many private
properties, and also a reference to its owning Store which in turn holds references to its Records.
This means that a whole Record may not be encoded using Ext.util.JSON.encode. Instead, use the
data and id properties.
Record objects generated by this constructor inherit all the methods of Ext.data.Record listed below.Generates a sequential id. This method is typically called when a record is created
and no id has been specified. The returned id takes the form:
{PREFIX}-{AUTO_ID}.
PREFIX : StringExt.data.Record.PREFIX
(defaults to 'ext-record')
AUTO_ID : StringExt.data.Record.AUTO_ID
(defaults to 1 initially)
Begin an edit. While in edit mode, no events (e.g.. the update event)
are relayed to the containing store.
See also: endEdit and cancelEdit.Cancels all changes made in the current edit operation.Usually called by the Ext.data.Store which owns the Record.
Commits all changes made to the Record 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.Creates a copy (clone) of this Record.Generate a constructor for a specific Record layout.End an edit. If any data was modified, the containing store is notified
(ie, the store's update event will fire).Get the value of the named field.Gets a hash of only the fields that have been modified since this Record was created or commited.Returns true if the passed field name has been modified
since the load or last commit.By default returns false if any field within the
record configured with Ext.data.Field.allowBlank = false returns
true from an Ext.isempty test.Marks this Record as dirty. This method
is used interally when adding phantom records to a
writer enabled store.
Marking a record dirty causes the phantom to
be returned by Ext.data.Store.getModifiedRecords where it will
have a create action composed for it during store save
operations.Usually called by the Ext.data.Store which owns the Record.
Rejects all changes made to the Record since either creation, or the last commit operation.
Modified fields are reverted to their original values.
Developers should subscribe to the Ext.data.Store.update event
to have their code notified of reject operations.Set the named field to the specified value. For example:
// record has a field named 'firstname'
var Employee = Ext.data.Record.create([
{name: 'firstname'},
...
]);
// update the 2nd record in the store:
var rec = myStore.getAt(1);
// set the value (shows dirty flag):
rec.set('firstname', 'Betty');
// commit the change (removes dirty flag):
rec.commit();
// update the record in the store, bypass setting dirty flag,
// and do not store the change in the modified records
rec.data['firstname'] = 'Wilma'; // updates record, but not the view
rec.commit(); // updates the view
Notes:
If the store has a writer and autoSave=true, each set()
will execute an XHR to the server.
Use beginEdit to prevent the store's update
event firing while using set().
Use endEdit to have the store's update
event fire.
A simple element that adds extra horizontal space between items in a toolbar.
By default a 2px wide space is added via css specification:.x-toolbar .xtb-spacer {
width:2px;
}
Example usage:
new Ext.Panel({
tbar : [
'Item 1',
{xtype: 'tbspacer'}, // or ' '
'Item 2',
// space width is also configurable via javascript
{xtype: 'tbspacer', width: 50}, // add a 50px space
'Item 3'
]
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.LineSeries class for the charts widget.This class provides a container DD instance that allows dragging of multiple child source nodes.
This class does not move the drag target nodes, but a proxy element which may contain
any DOM structure you wish. The DOM element to show in the proxy is provided by either a
provided implementation of getDragData, or by registered draggables registered with Ext.dd.Registry
If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some
application object (For example nodes in a DataView) then use of this class
is the most efficient way to "activate" those nodes.
By default, this class requires that draggable child nodes are registered with Ext.dd.Registry.
However a simpler way to allow a DragZone to manage any number of draggable elements is to configure
the DragZone with an implementation of the getDragData method which interrogates the passed
mouse event to see if it has taken place within an element, or class of elements. This is easily done
by using the event's getTarget method to identify a node based on a
Ext.DomQuery selector. For example, to make the nodes of a DataView draggable, use the following
technique. Knowledge of the use of the DataView is required:myDataView.on('render', function(v) {
myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
// On receipt of a mousedown event, see if it is within a DataView node.
// Return a drag data object if so.
getDragData: function(e) {
// Use the DataView's own itemSelector (a mandatory property) to
// test if the mousedown is within one of the DataView's nodes.
var sourceEl = e.getTarget(v.itemSelector, 10);
// If the mousedown is within a DataView node, clone the node to produce
// a ddel element for use by the drag proxy. Also add application data
// to the returned data object.
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return {
ddel: d,
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
sourceStore: v.store,
draggedRecord: v.getRecord(sourceEl)
}
}
},
// Provide coordinates for the proxy to slide back to on failed drag.
// This is the original XY coordinates of the draggable element captured
// in the getDragData method.
getRepairXY: function() {
return this.dragData.repairXY;
}
});
});
See the DropZone documentation for details about building a DropZone which
cooperates with this DragZone.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.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.Called after a repair of an invalid drop. By default, highlights this.dragData.ddelSets 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 up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are calledSets the pointer offset to the distance between the linked element's top
left corner and the location the element was clickedEvent that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.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.An empty function by default, but provided so that you can perform a custom action after an invalid
drop has occurred.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Creates the proxy element if it does not yet existFired when we are done dragging the objectCalled when a mousedown occurs in this container. Looks in Ext.dd.Registry
for a valid target to drag based on the mouse down. Override this method
to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
object has a "ddel" attribute (with an HTML Element) for other functions to work.Returns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementReturns the drag source's underlying Ext.dd.StatusProxyCalled before a repair of an invalid drop to get the XY to animate to. By default returns
the XY of this.dragData.ddelHides the drag source's Ext.dd.StatusProxySets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitialization for the drag frame element. Must be called in the
constructor of all subclassesInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.An empty function by default, but provided so that you can perform a custom action before the initial
drag event begins and optionally cancel it.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objCalled once drag threshold has been reached to initialize the proxy element. By default, it clones the
this.dragData.ddelAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupAn empty function by default, but provided so that you can perform a custom action once the initial
drag event has begun. The drag cannot be canceled from this function.Remove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Sets the pointer offset. You can call this directly to force the
offset to be in a particular location (e.g., pass in 0,0 to set it
to the center of the object)Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragSets the drag 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.Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementLets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.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.Called after a repair of an invalid drop. By default, highlights this.dragData.ddelSets 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 up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are calledSets the pointer offset to the distance between the linked element's top
left corner and the location the element was clickedEvent that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.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.An empty function by default, but provided so that you can perform a custom action after an invalid
drop has occurred.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Creates the proxy element if it does not yet existFired when we are done dragging the objectCalled when a mousedown occurs in this container. Looks in Ext.dd.Registry
for a valid target to drag based on the mouse down. Override this method
to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
object has a "ddel" attribute (with an HTML Element) for other functions to work.Returns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementReturns the drag source's underlying Ext.dd.StatusProxyCalled before a repair of an invalid drop to get the XY to animate to. By default returns
the XY of this.dragData.ddelHides the drag source's Ext.dd.StatusProxySets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitialization for the drag frame element. Must be called in the
constructor of all subclassesInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.An empty function by default, but provided so that you can perform a custom action before the initial
drag event begins and optionally cancel it.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objCalled once drag threshold has been reached to initialize the proxy element. By default, it clones the
this.dragData.ddelAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupAn empty function by default, but provided so that you can perform a custom action once the initial
drag event has begun. The drag cannot be canceled from this function.Remove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Sets the pointer offset. You can call this directly to force the
offset to be in a particular location (e.g., pass in 0,0 to set it
to the center of the object)Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragSets the drag 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.Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementAdds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Defines a CartesianChart's vertical or horizontal axis.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Shows this tip at the specified XY position. Example usage:
// Show the tip at x:50 and y:100
tip.showAt([50,100]);Experimental. Shows this tip at a position relative to another element using a standard Ext.Element.alignTo
anchor position value. Example usage:
// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');
// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cancels the editing process and hides the editor without persisting any changes. The field value will be
reverted to the original starting value.Clone the current component using the original config values passed into this instance by default.Ends the editing process, persists the changed value to the underlying field, and hides the editor.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the data value of the editorGets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRealigns the editor to the bound field based on the current alignment config value.Relays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Sets the height and width of this editor.Sets the data value of the editorConvenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Starts the editing process and shows the editor.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
from your DOM building code.
DomHelper element specification object
A specification object is used when creating elements. Attributes of this object
are assumed to be element attributes, except for 4 special attributes:
tag : The tag name of the element
children : or cnAn array of the
same kind of element definition objects to be created and appended. These can be nested
as deep as you want.
cls : The class attribute of the element.
This will end up being either the "class" attribute on a HTML fragment or className
for a DOM node, depending on whether DomHelper is using fragments or DOM.
html : The innerHTML for the element
Insertion methods
Commonly used insertion methods:
append :
insertBefore :
insertAfter :
overwrite :
createTemplate :
insertHtml :
Example
This is an example, where an unordered list with 3 children items is appended to an existing
element with id 'my-div':
var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
// append children after creating
children: [ // may also specify 'cn' instead of 'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
var list = dh.append(
'my-div', // the context element 'my-div' can either be the id or the actual node
spec // the specification object
);
Element creation specification parameters in this class may also be passed as an Array of
specification objects. This can be used to insert multiple sibling nodes into an existing
container very efficiently. For example, to add more list items to the example above:dh.append('my-ul', [
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]);
Templating
The real power is in the built-in templating. Instead of creating or appending any elements,
createTemplate returns a Template object which can be used over and over to
insert new elements. Revisiting the example above, we could utilize templating this time:
// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
for(var i = 0; i < 5, i++){
tpl.append(list, [i]); // use template to append to the actual node
}
An example using a template:var html = '"{0}" href="{1}" class="nav">{2}';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
The same example using named parameters:var html = '"{id}" href="{url}" class="nav">{text}';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.jackslocum.com/',
text: "Jack's Site"
});
tpl.append('blog-roll', {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});
Compiling Templates
Templates are applied using regular expressions. The performance is great, but if
you are adding a bunch of DOM elements using the same template, you can increase
performance even further by "compiling" the template.
The way "compile()" works is the template is parsed and
broken up at the different variable points and a dynamic function is created and eval'ed.
The generated function performs string concatenation of these parts and the passed
variables instead of using regular expressions.
var html = '"{id}" href="{url}" class="nav">{text}';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.compile();
//... use template like normal
Performance Boost
DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
of DOM can significantly boost performance.
Element creation specification parameters may also be strings. If useDom is false,
then the string is used as innerHTML. If useDom is true, a string specification
results in the creation of a text node. Usage:
Ext.DomHelper.useDom = true; // force it to use DOM; reduces performanceCreates new DOM element(s) and appends them to el.Applies a style specification to an element.Creates new DOM element(s) without inserting them to the document.Creates a new Ext.Template from the DOM object spec.Creates new DOM element(s) and inserts them after el.Creates new DOM element(s) and inserts them before el.Creates new DOM element(s) and inserts them as the first child of el.Inserts an HTML fragment into the DOM.Returns the markup for the passed Element(s) config.Creates new DOM element(s) and overwrites the contents of el with them.DescriptionOverview
Ext.Direct aims to streamline communication between the client and server
by providing a single interface that reduces the amount of common code
typically required to validate data and handle returned data packets
(reading data, error conditions, etc).
The Ext.direct namespace includes several classes for a closer integration
with the server-side. The Ext.data namespace also includes classes for working
with Ext.data.Stores which are backed by data from an Ext.Direct method.
Specification
For additional information consult the
Ext.Direct Specification.
Providers
Ext.Direct uses a provider architecture, where one or more providers are
used to transport data to and from the server. There are several providers
that exist in the core at the moment:
JsonProvider for simple JSON operations
PollingProvider for repeated requests
RemotingProvider exposes server side
on the client.
A provider does not need to be invoked directly, providers are added via
Ext.Direct.add.
Router
Ext.Direct utilizes a "router" on the server to direct requests from the client
to the appropriate server-side method. Because the Ext.Direct API is completely
platform-agnostic, you could completely swap out a Java based server solution
and replace it with one that uses C# without changing the client side JavaScript
at all.
Server side events
Custom events from the server may be handled by the client by adding
listeners, for example:
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
out.append(String.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
If the provider is not already connected, it will auto-connect.
var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.Direct.addProvider(
{
"type":"remoting", // create a Ext.direct.RemotingProvider
"url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a Ext.direct.PollingProvider
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Retrieve a provider by the
id specified when the provider is
added.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)DescriptionScrolls to the given component.A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
space between child items containing a numeric flex configuration.
This layout may also be used to set the heights of child items by configuring it with the align option.Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Resizes and repositions each child componentBase class for any Ext.BoxComponent that may contain other Components. Containers handle the
basic behavior of containing items, namely adding, inserting and removing items.
The most commonly used Container classes are Ext.Panel, Ext.Window and Ext.TabPanel.
If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
Container to be encapsulated by an HTML element to your specifications by using the
autoEl config option. This is a useful technique when creating
embedded column layouts inside FormPanels
for example.
The code below illustrates both how to explicitly create a Container, and how to implicitly
create one using the 'container' xtype:// explicitly create a Container
var embeddedColumns = new Ext.Container({
autoEl: 'div', // This is the default
layout: 'column',
defaults: {
// implicitly create Container by specifying xtype
xtype: 'container',
autoEl: 'div', // This is the default.
layout: 'form',
columnWidth: 0.5,
style: {
padding: '10px'
}
},
// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
items: [{
items: {
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'Start date'
}
}, {
items: {
xtype: 'datefield',
name: 'endDate',
fieldLabel: 'End date'
}
}]
});
Layout
Container classes delegate the rendering of child Components to a layout
manager class which must be configured into the Container using the
layout configuration property.
When either specifying child items of a Container,
or dynamically adding Components to a Container, remember to
consider how you wish the Container to arrange those child elements, and
whether those child elements need to be sized using one of Ext's built-in
layout schemes. By default, Containers use the
ContainerLayout scheme which only
renders child components, appending them one after the other inside the
Container, and does not apply any sizing at all.
A common mistake is when a developer neglects to specify a
layout (e.g. widgets like GridPanels or
TreePanels are added to Containers for which no layout
has been specified). If a Container is left to use the default
ContainerLayout scheme, none of its
child components will be resized, or changed in any way when the Container
is resized.
Certain layout managers allow dynamic addition of child components.
Those that do include Ext.layout.CardLayout,
Ext.layout.AnchorLayout, Ext.layout.FormLayout, and
Ext.layout.TableLayout. For example:// Create the GridPanel.
var myNewGrid = new Ext.grid.GridPanel({
store: myStore,
columns: myColumnModel,
title: 'Results', // the title becomes the title of the tab
});
myTabPanel.add(myNewGrid); // Ext.TabPanel implicitly uses CardLayout
myTabPanel.setActiveTab(myNewGrid);
The example above adds a newly created GridPanel to a TabPanel. Note that
a TabPanel uses Ext.layout.CardLayout as its layout manager which
means all its child items are sized to fit
exactly into its client area.
Overnesting is a common problem.
An example of overnesting occurs when a GridPanel is added to a TabPanel
by wrapping the GridPanel inside a wrapping Panel (that has no
layout specified) and then add that wrapping Panel
to the TabPanel. The point to realize is that a GridPanel is a
Component which can be added directly to a Container. If the wrapping Panel
has no layout configuration, then the overnested
GridPanel will not be sized as expected.
Adding via remote configuration
A server side script can be used to add Components which are generated dynamically on the server.
An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server
based on certain parameters:
// execute an Ajax request to invoke server side script:
Ext.Ajax.request({
url: 'gen-invoice-grid.php',
// send additional parameters to instruct server script
params: {
startDate: Ext.getCmp('start-date').getValue(),
endDate: Ext.getCmp('end-date').getValue()
},
// process the response object to add it to the TabPanel:
success: function(xhr) {
var newComponent = eval(xhr.responseText); // see discussion below
myTabPanel.add(newComponent); // add the component to the TabPanel
myTabPanel.setActiveTab(newComponent);
},
failure: function() {
Ext.Msg.alert("Grid create failed", "Server communication failure");
}
});
The server script needs to return an executable Javascript statement which, when processed
using eval(), will return either a config object with an xtype,
or an instantiated Component. The server might return this for example:(function() {
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
var store = new Ext.data.Store({
url: 'get-invoice-data.php',
baseParams: {
startDate: '01/01/2008',
endDate: '01/31/2008'
},
reader: new Ext.data.JsonReader({
record: 'transaction',
idProperty: 'id',
totalRecords: 'total'
}, [
'customer',
'invNo',
{name: 'date', type: 'date', dateFormat: 'm/d/Y'},
{name: 'value', type: 'float'}
])
});
var grid = new Ext.grid.GridPanel({
title: 'Invoice Report',
bbar: new Ext.PagingToolbar(store),
store: store,
columns: [
{header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
{header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
{header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
{header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
],
});
store.load();
return grid; // return instantiated component
})();
When the above code fragment is passed through the eval function in the success handler
of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
runs, and returns the instantiated grid component.
Note: since the code above is generated by a server script, the baseParams for
the Store, the metadata to allow generation of the Record layout, and the ColumnModel
can all be generated into the code since these are all known on the server.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.This class provides the basic implementation for single cell selection in a grid.
The object stored as the selection contains the following properties:
cell : see getSelectedCell
record : Ext.data.record The Record
which provides the data for the row containing the selection
Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.If anything is selected, clears all selections and fires the selectionchange event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns an array containing the row and column indexes of the currently selected cell
(e.g., [0, 0]), or null if none selected. The array has elements:
rowIndex : NumberThe index of the selected row
cellIndex : NumberThe index of the selected cell.
Due to possible column reordering, the cellIndex should not be used as an
index into the Record's data. Instead, use the cellIndex to determine the name
of the selected cell and use the field name to retrieve the data value from the record:// get name
var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
// get data value based on name
var data = record.get(fieldName);
Checks to see if this object has any listeners for a specified eventReturns true if there is a selection.Returns true if the selections are locked.Locks the selections.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects a cell. Before selecting a cell, fires the
beforecellselect event. If this check is satisfied the cell
will be selected and followed up by firing the cellselect and
selectionchange events.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Unlocks the selections.The global Ajax request class that provides a simple way to make Ajax requests
with maximum flexibility.
Since Ext.Ajax is a singleton, you can set common properties/events for it once
and override them at the request function level only if necessary.
Common Properties you may want to set are:
method
extraParams
url
// Default headers to pass in every request
Ext.Ajax.defaultHeaders = {
'Powered-By': 'Ext'
};
Common Events you may want to set are:
beforerequest
requestcomplete
requestexception
// Example: show a spinner during all Ajax requests
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);
An example request:
// Basic request
Ext.Ajax.request({
url: 'foo.php',
success: someFn,
failure: otherFn,
headers: {
'my-header': 'foo'
},
params: { foo: 'bar' }
});
// Simple ajax form submission
Ext.Ajax.request({
form: 'some-form',
params: 'foo=bar'
});
Aborts any outstanding request.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventDetermine whether this object has a request outstanding.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Sends an HTTP request to a remote server.
Important: Ajax server requests are asynchronous, and this call will
return before the response has been received. Process any returned data
in a callback function.
Ext.Ajax.request({
url: 'ajax_demo/sample.json',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
To execute a callback function in the correct scope, use the scope option.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Serialize the passed form into a url encoded stringSuspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)ColumnSeries class for the charts widget.The default SelectionModel used by Ext.grid.GridPanel.
It supports multiple selections and keyboard selection/navigation. The objects stored
as selections and returned by getSelected, and getSelections are
the Records which provide the data for the selected rows.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Clears all selections if the selection model
is not locked.Deselects a range of rows if the selection model
is not locked.
All rows in between startRow and endRow are also deselected.Deselects a row. Before deselecting a row, checks if the selection model
is locked.
If this check is satisfied the row will be deselected and followed up by
firing the rowdeselect and selectionchange events.Calls the passed function with each selection. If the function returns
false, iteration is stopped and this function returns
false. Otherwise it returns true.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Gets the number of selected rows.Returns the first selected record.Returns the selected recordsChecks to see if this object has any listeners for a specified eventReturns true if there is a next record to selectReturns true if there is a previous record to selectReturns true if there is a selection.Returns true if the specified record id is selected.Returns true if the selections are locked.Returns true if the specified row is selected.Locks the selections.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects all rows if the selection model
is not locked.Selects the first row in the grid.Select the last row.Selects the row immediately following the last selected row.Selects the row that precedes the last selected row.Selects a range of rows if the selection model
is not locked.
All rows in between startRow and endRow are also selected.Select records.Selects a row. Before selecting a row, checks if the selection model
is locked and fires the
beforerowselect event. If these checks are satisfied the row
will be selected and followed up by firing the rowselect and
selectionchange events.Selects multiple rows.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Unlocks the selections.Defines the interface and base operation of items that that can be
dragged or can be drop targets. It was designed to be extended, overriding
the event handlers for startDrag, onDrag, onDragOver and onDragOut.
Up to three html elements can be associated with a DragDrop instance:
linked element: the element that is passed into the constructor.
This is the element which defines the boundaries for interaction with
other DragDrop objects.
handle element(s): The drag operation only occurs if the element that
was clicked matches a handle element. By default this is the linked
element, but there are times that you will want only a portion of the
linked element to initiate the drag operation, and the setHandleElId()
method provides a way to define this.
drag element: this represents the element that would be moved along
with the cursor during a drag operation. By default, this is the linked
element itself as in Ext.dd.DD. setDragElId() lets you define
a separate element that would be moved, as in Ext.dd.DDProxy.
This class should not be instantiated until the onload event to ensure that
the associated elements are available.
The following would define a DragDrop obj that would interact with any
other DragDrop obj in the "group1" group:
dd = new Ext.dd.DragDrop("div1", "group1");
Since none of the event handlers have been implemented, nothing would
actually happen if you were to run the code above. Normally you would
override this class or one of the default implementations, but you can
also override the methods you want on an instance of the class...
dd.onDragDrop = function(e, id) {
alert("dd was dropped on " + id);
}
Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Fired when we are done dragging the objectReturns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementSets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupRemove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragAllows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementPivotAxis is a class that supports a Ext.grid.PivotGrid. Each PivotGrid contains two PivotAxis instances - the left
axis and the top axis. Each PivotAxis defines an ordered set of dimensions, each of which should correspond to a field in a
Store's Record (see Ext.grid.PivotGrid documentation for further explanation).
Developers should have little interaction with the PivotAxis instances directly as most of their management is performed by
the PivotGrid. An exception is the dynamic reconfiguration of axes at run time - to achieve this we use PivotAxis's
setDimensions function and refresh the grid:
var pivotGrid = new Ext.grid.PivotGrid({
//some PivotGrid config here
});
//change the left axis dimensions
pivotGrid.leftAxis.setDimensions([
{
dataIndex: 'person',
direction: 'DESC',
width : 100
},
{
dataIndex: 'product',
direction: 'ASC',
width : 80
}
]);
pivotGrid.view.refresh(true);
This clears the previous dimensions on the axis and redraws the grid with the new dimensions.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Updates the dimensions used by this axisConvenience function for setting disabled/enabled by boolean.Convenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.The RemotingProvider exposes access to
server side methods on the client (a remote procedure call (RPC) type of
connection where the client can initiate a procedure on the server).
This allows for code to be organized in a fashion that is maintainable,
while providing a clear path between client and server, something that is
not always apparent when using URLs.
To accomplish this the server-side needs to describe what classes and methods
are available on the client-side. This configuration will typically be
outputted by the server-side Ext.Direct stack when the API description is built.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns whether or not the server-side is currently connected.
Abstract method for subclasses to implement.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Slider which supports vertical or horizontal orientation, keyboard adjustments,
configurable snapping, axis clicking and animation. Can be added as an item to
any container. Example usage:
new Ext.slider.SingleSlider({
renderTo: Ext.getBody(),
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100
});
The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Creates a new thumb and adds it to the sliderApply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the current value of the sliderReturns an array of values - one for the location of each thumbGets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the maximum value for the slider instance. If the current value is more than the
maximum value, the current value will be changed.Sets the minimum value for the slider instance. If the current value is less than the
minimum value, the current value will be changed.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Programmatically sets the value of the Slider. Ensures that the value is constrained within
the minValue and maxValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Synchronizes the thumb position to the proper proportion of the total component width based
on the current slider value. This will be called automatically when the Slider
is resized by a layout, but if it is rendered auto width, this method can be called from
another resize handler to sync the Slider if necessary.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Insert node(s) as the last child node of this node.Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the bubble is stopped.Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the cascade is stopped on that branch.Returns true if this node is an ancestor (at any point) of the passed node.Destroys the node.Interates the child nodes of this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the iteration stops.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Finds the first child that has the attribute with the specified value.Finds the first child by a custom function. The child matches if the function passed returns true.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns depth of this node (the root node has a depth of 0)Returns the tree this node is in.Returns the path for this node. The path can be used to expand or select this node programmatically.Returns true if this node has one or more child nodes, else false.Checks to see if this object has any listeners for a specified eventReturns the index of a child nodeInserts the first node before the second node in this nodes childNodes collection.Returns true if the passed node is an ancestor (at any point) of this node.Returns true if this node has one or more child nodes, or if the expandable
node attribute is explicitly specified as true (see attributes), otherwise returns false.Returns true if this node is the first child of its parentReturns true if this node is the last child of its parentReturns true if this node is a leafReturns the child node at the specified index.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes this node from its parentRemoves all child nodes from this node.Removes a child node from this node.Removes an event handler.Replaces one child node in this node with another.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Changes the id of this node.Sorts this nodes children using the supplied sort function.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)DragDropMgr is a singleton that tracks the element interaction for
all DragDrop items in the window. Generally, you will not call
this class directly, but it does have helper methods that could
be useful in your DragDrop implementations.Helper function for getting the best match from the list of drag
and drop objects returned by the drag and drop events when we are
in INTERSECT mode. It returns either the first object that the
cursor is over, or the object that has the greatest overlap with
the dragged element.Returns the style property for the DOM element (i.e.,
document.getElById(id).style)Returns the DragDrop instance for a given idReturns the actual DOM elementReturns a Region object containing the drag and drop element's position
and size, including the padding configured for itReturns the drag and drop instances that are in all groups the
passed in instance belongs to.Utility function to determine if a given element has been
registered as a drag drop item.Utility function to determine if a given element has been
registered as a drag drop handle for the given Drag Drop object.Returns true if the specified dd target is a legal target for
the specifice drag objIs drag and drop locked?My goal is to be able to transparently determine if an object is
typeof DragDrop, and the exact subclass of DragDrop. typeof
returns "object", oDD.constructor.toString() always returns
"DragDrop" and not the name of the subclass. So for now it just
evaluates a well-known variable in DragDrop.Lock all drag and drop functionalityRefreshes the cache of the top-left and bottom-right points of the
drag and drop objects in the specified group(s). This is in the
format that is stored in the drag and drop instance, so typical
usage is:
Ext.dd.DragDropMgr.refreshCache(ddinstance.groups);
Alternatively:
Ext.dd.DragDropMgr.refreshCache({group1:true, group2:true});
Each DragDrop instance must be registered with the DragDropMgr.
This is executed in DragDrop.init()Each DragDrop handle element must be registered. This is done
automatically when executing DragDrop.setHandleElId()Fired when either the drag pixel threshol or the mousedown hold
time threshold has been met.Utility to stop event propagation and event default, if these
features are turned on.Unlock all drag and drop functionalityThis checks to make sure an element exists and is in the DOM. The
main purpose is to handle cases where innerHTML is used to remove
drag and drop objects from the DOM. IE provides an 'unspecified
error' when trying to access the offsetParent of such an elementThis is a layout that inherits the anchoring of Ext.layout.AnchorLayout and adds the
ability for x/y positioning using the standard x and y component config options.
This class is intended to be extended or created via the layout
configuration property. See Ext.Container.layout for additional details.
Example usage:
var form = new Ext.form.FormPanel({
title: 'Absolute Layout',
layout:'absolute',
layoutConfig: {
// layout-specific configs go here
extraCls: 'x-abs-layout-item',
},
baseCls: 'x-plain',
url:'save-form.php',
defaultType: 'textfield',
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'Send To:'
},{
x: 60,
y: 0,
name: 'to',
anchor:'100%' // anchor width by percentage
},{
x: 0,
y: 35,
xtype:'label',
text: 'Subject:'
},{
x: 60,
y: 30,
name: 'subject',
anchor: '100%' // anchor width by percentage
},{
x:0,
y: 60,
xtype: 'textarea',
name: 'msg',
anchor: '100% 100%' // anchor width and height
}]
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Provides attractive and customizable tooltips for any element. The QuickTips
singleton is used to configure and manage tooltips globally for multiple elements
in a generic manner. To create individual tooltips with maximum customizability,
you should consider either Ext.Tip or Ext.ToolTip.
Quicktips can be configured via tag attributes directly in markup, or by
registering quick tips programmatically via the register method.
The singleton's instance of Ext.QuickTip is available via
getQuickTip, and supports all the methods, and all the all the
configuration properties of Ext.QuickTip. These settings will apply to all
tooltips shown by the singleton.
Below is the summary of the configuration properties which can be used.
For detailed descriptions see the config options for the QuickTip class
QuickTips singleton configs (all are optional)
dismissDelay
hideDelay
maxWidth
minWidth
showDelay
trackMouse
Target element configs (optional unless otherwise noted)
autoHide
cls
dismissDelay (overrides singleton value)
target (required)
text (required)
title
width
Here is an example showing how some of these config options could be used:
// Init the singleton. Any tag-based quick tips will start working.
Ext.QuickTips.init();
// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
maxWidth: 200,
minWidth: 100,
showDelay: 50, // Show 50ms after entering target
trackMouse: true
});
// Manually register a quick tip for a specific element
Ext.QuickTips.register({
target: 'my-div',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});
To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
the ext: namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary
of supported attributes (optional unless otherwise noted):
hide: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the
same as autoHide = true.
qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).
qtip (required): The quick tip text (equivalent to the 'text' target element config).
qtitle: The quick tip title (equivalent to the 'title' target element config).
qwidth: The quick tip width (equivalent to the 'width' target element config).
Here is an example of configuring an HTML element to display a tooltip from markup:
// Add a quick tip to an HTML button
<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
ext:qtip="This is a quick tip from markup!"></input>Disable quick tips globally.Enable quick tips globally.Gets the single QuickTip instance used to show tips from all registered elements.Initialize the global QuickTips instance and prepare any quick tips.Returns true if quick tips are enabled, else false.Configures a new quick tip instance and assigns it to a target element. See
Ext.QuickTip.register for details.Alias of register.Removes any registered quick tip from the target element and destroys it.This class provides the default UI implementation for Ext TreeNodes.
The TreeNode UI implementation is separate from the
tree implementation, and allows customizing of the appearance of
tree nodes.
If you are customizing the Tree's user interface, you
may need to extend this class, but you should never need to instantiate this class.
This class provides access to the user interface components of an Ext TreeNode, through
Ext.tree.TreeNode.getUIAdds one or more CSS classes to the node's UI element.
Duplicate classes are automatically filtered out.Returns the <a> element that provides focus for the node's UI.Returns the element which encapsulates this node.Returns the icon <img> element.Returns the text node.Hides this node.Returns the checked status of the node. If the node was rendered with no
checkbox, it returns false.Removes one or more CSS classes from the node's UI element.Shows this node.Sets the checked status of the tree node to the passed value, or, if no value was passed,
toggles the checked status. If the node was rendered with no checkbox, this has no effect.A Column definition class which renders boolean data fields. See the xtype
config option of Ext.grid.Column for more details.Returns the editor defined for this column that was created to wrap the Field
used to edit the cell.Sets a new editor for this column.A Collection class that maintains both numeric indexes and keys and exposes events.Adds an item to the collection. Fires the add event when complete.Adds all elements of an Array or an Object to the collection.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Removes all items from the collection. Fires the clear event when complete.Creates a shallow copy of this collectionReturns true if the collection contains the passed Object as an item.Returns true if the collection contains the passed Object as a key.Executes the specified function once for every item in the collection, passing the following arguments:
item : MixedThe collection item
index : NumberThe item's index
length : NumberThe total number of items in the collection
The function should return a boolean value. Returning false from the function will stop the iteration.Executes the specified function once for every key in the collection, passing each
key, and its associated item as the first two parameters.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the objects in this collection by a specific property.
Returns a new collection that has been filtered.Filter by a function. Returns a new collection that has been filtered.
The passed function will be called with each object in the collection.
If the function returns true, the value is included otherwise it is filtered.Returns the first item in the collection which elicits a true return value from the
passed selection function.Finds the index of the first matching object in this collection by a specific property/value.Find the index of the first matching object in this collection by a function.
If the function returns true it is considered a match.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns the first item in the collection.This method calls item().
Returns the item associated with the passed key OR index. Key has priority
over index. This is the equivalent of calling key first, then if
nothing matched calling itemAt.Returns the number of items in the collection.MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation
simply returns item.id but you can provide your own implementation
to return a different value as in the following examples:// normal way
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//and so on
// using getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);
// or via the constructor
var mc = new Ext.util.MixedCollection(false, function(el){
return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);Returns a range of items in this collectionChecks to see if this object has any listeners for a specified eventReturns index within the collection of the passed Object.Returns index within the collection of the passed key.Inserts an item at the specified index in the collection. Fires the add event when complete.Returns the item associated with the passed key OR index.
Key has priority over index. This is the equivalent
of calling key first, then if nothing matched calling itemAt.Returns the item at the specified index.Returns the item associated with the passed key.Sorts this collection by keys.Returns the last item in the collection.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Remove an item from the collection.Remove an item from a specified index in the collection. Fires the remove event when complete.Removed an item associated with the passed key fom the collection.Removes an event handler.Reorders each of the items based on a mapping from old index to new index. Internally this
just translates into a sort. The 'sort' event is fired whenever reordering has occured.Replaces an item in the collection. Fires the replace event when complete.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sorts this collection by item value with the passed comparison function.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Data reader class to create an Array of Ext.data.Record objects from an XML document
based on mappings in a provided Ext.data.Record constructor.
Note: that in order for the browser to parse a returned XML document, the Content-Type
header in the HTTP response must be set to "text/xml" or "application/xml".
Example code:
var Employee = Ext.data.Record.create([
{name: 'name', mapping: 'name'}, // "mapping" property not needed if it is the same as "name"
{name: 'occupation'} // This field will use "occupation" as the mapping.
]);
var myReader = new Ext.data.XmlReader({
totalProperty: "results", // The element which contains the total dataset size (optional)
record: "row", // The repeated element which contains row information
idProperty: "id" // The element within the row that provides an ID for the record (optional)
messageProperty: "msg" // The element within the response that provides a user-feedback message (optional)
}, Employee);
This would consume an XML file like this:
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<results>2</results>
<row>
<id>1</id>
<name>Bill</name>
<occupation>Gardener</occupation>
</row>
<row>
<id>2</id>
<name>Ben</name>
<occupation>Horticulturalist</occupation>
</row>
</dataset>Returns true if the supplied data-hash looks and quacks like data. Checks to see if it has a key
corresponding to idProperty defined in your DataReader config containing non-empty pk.This method is only used by a DataProxy which has retrieved data from a remote server.Create a data block containing Ext.data.Records from an XML document.Decode an XML response from server.Used for un-phantoming a record after a successful database insert. Sets the records pk along with new data from server.
You must return at least the database pk using the idProperty defined in your DataReader configuration. The incoming
data from server will be merged with the data in the local record.
In addition, you must return record-data from the server in the same order received.
Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be suppressed.Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
If returning data from multiple-records after a batch-update, you must return record-data from the server in
the same order received. Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be
suppressed as the record receives fresh new data-hashA popup date picker. This class is used by the DateField class
to allow browsing and selection of valid dates.
All the string values documented below may be overridden by including an Ext locale file in
your page.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current selected value of the date fieldGets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Replaces any existing disabled dates with new values and refreshes the DatePicker.Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.Replaces any existing maxDate with the new value and refreshes the DatePicker.Replaces any existing minDate with the new value and refreshes the DatePicker.Sets the value of the date fieldConvenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.Encapsulates the DOM <form> element at the heart of the FormPanel class, and provides
input field management, validation, submission, and form loading services.
By default, Ext Forms are submitted through Ajax, using an instance of Ext.form.Action.Submit.
To enable normal browser submission of an Ext Form, use the standardSubmit config option.
File Uploads
File uploads are not performed using Ajax submission, that
is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard
manner with the DOM <form> element temporarily modified to have its
target set to refer
to a dynamically generated, hidden <iframe> which is inserted into the document
but removed after the return data has been gathered.
The server response is parsed by the browser to create the document for the IFRAME. If the
server is using JSON to send the return object, then the
Content-Type header
must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
Characters which are significant to an HTML parser must be sent as HTML entities, so encode
"<" as "<", "&" as "&" etc.
The response text is retrieved from the document, and a fake XMLHttpRequest object
is created containing a responseText property in order to conform to the
requirements of event handlers and callbacks.
Be aware that file upload packets are sent with the content type multipart/form
and some server technologies (notably JEE) may require some custom processing in order to
retrieve parameter names and parameter values from the packet content.Add Ext.form Components to this form's Collection. This does not result in rendering of
the passed Component, it just enables the form to validate Fields, and distribute values to
Fields.
You will not usually call this function. In order to be rendered, a Field must be added
to a Container, usually an FormPanel.
The FormPanel to which the field is added takes care of adding the Field to the BasicForm's
collection.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Calls Ext.applyIf for all field in this form with the passed object.Calls Ext.apply for all fields in this form with the passed object.Removes all fields from the collection that have been destroyed.Clears all invalid messages in this form.Performs a predefined action (Ext.form.Action.Submit or
Ext.form.Action.Load) or a custom extension of Ext.form.Action
to perform application-specific processing.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a Ext.form.Field in this form.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the HTML form ElementRetrieves the fields in the form as a set of key/value pairs, using the getValue() method.
If multiple fields exist with the same name they are returned as an array.Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit.
If multiple fields exist with the same name they are returned as an array.
Note: The values are collected from all enabled HTML input elements within the form, not from
the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the
value can potentially be the emptyText of a field.Checks to see if this object has any listeners for a specified eventReturns true if any fields in this form have changed from their original values.
Note that if this BasicForm was configured with trackResetOnLoad then the
Fields' original values are updated when the values are loaded by setValues
or loadRecord.Returns true if client-side validation on the form is successful.Shortcut to do a load action.Loads an Ext.data.Record into this form by calling setValues with the
record data.
See also trackResetOnLoad.Mark fields in this form invalid in bulk.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a field from the items collection (does NOT remove its markup).Removes an event handler.Iterates through the Fields which have been added to this BasicForm,
checks them for an id attribute, and calls Ext.form.Field.applyToMarkup on the existing dom element with that id.Resets this form.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Set values for fields in this form in bulk.Shortcut to do a submit action.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Persists the values in this form into the passed Ext.data.Record object in a beginEdit/endEdit block. The DelayedTask class provides a convenient way to "buffer" the execution of a method,
performing setTimeout where a new timeout cancels the old timeout. When called, the
task will wait the specified time period before executing. If durng that time period,
the task is called again, the original call will be cancelled. This continues so that
the function is only called a single time for each iteration.
This method is especially useful for things like detecting whether a user has finished
typing in a text field. An example would be performing validation on a keypress. You can
use this class to buffer the keypress events for a certain number of milliseconds, and
perform only if they stop for that amount of time. Usage:var task = new Ext.util.DelayedTask(function(){
alert(Ext.getDom('myInputField').value.length);
});
// Wait 500ms before calling our function. If the user presses another key
// during that 500ms, it will be cancelled and we'll wait another 500ms.
Ext.get('myInputField').on('keypress', function(){
task.delay(500);
});
Note that we are using a DelayedTask here to illustrate a point. The configuration
option buffer for addListener/on will
also setup a delayed task for you to buffer events.Cancel the last queued timeoutCancels any pending timeout and queues a new oneSupporting Class for Ext.list.ListViewAdds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Insert node(s) as the last child node of this node.Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the bubble is stopped.Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the cascade is stopped on that branch.Collapse this node.Collapse all child nodesReturns true if this node is an ancestor (at any point) of the passed node.Destroys the node.Disables this nodeInterates the child nodes of this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the iteration stops.Enables this nodeEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Ensures all parent nodes are expanded, and if necessary, scrolls
the node into view.Expand this node.Expand all child nodesFinds the first child that has the attribute with the specified value.Finds the first child by a custom function. The child matches if the function passed returns true.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns depth of this node (the root node has a depth of 0)Returns the tree this node is in.Returns the path for this node. The path can be used to expand or select this node programmatically.Returns the UI object for this node.Returns true if this node has one or more child nodes, else false.Checks to see if this object has any listeners for a specified eventReturns the index of a child nodeInserts the first node before the second node in this nodes childNodes collection.Returns true if the passed node is an ancestor (at any point) of this node.Returns true if this node has one or more child nodes, or if the expandable
node attribute is explicitly specified as true (see attributes), otherwise returns false.Returns true if this node is expandedReturns true if this node is the first child of its parentReturns true if this node is the last child of its parentReturns true if this node is a leafReturns true if this node is selectedReturns the child node at the specified index.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes this node from its parentRemoves all child nodes from this node.Removes a child node from this node.Removes an event handler.Replaces one child node in this node with another.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Triggers selection of this nodeSets the class on this node.Sets the href for the node.Sets the icon for this node.Sets the icon class for this node.Changes the id of this node.Sets the text for this nodeSets the tooltip for this node.Sorts this nodes children using the supplied sort function.Suspend the firing of all events. (see resumeEvents)Toggles expanded/collapsed state of the nodeRemoves an event handler (shorthand for removeListener.)Triggers deselection of this nodeThe default global group of stores.Adds an item to the collection. Fires the add event when complete.Adds all elements of an Array or an Object to the collection.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Removes all items from the collection. Fires the clear event when complete.Creates a shallow copy of this collectionReturns true if the collection contains the passed Object as an item.Returns true if the collection contains the passed Object as a key.Executes the specified function once for every item in the collection, passing the following arguments:
item : MixedThe collection item
index : NumberThe item's index
length : NumberThe total number of items in the collection
The function should return a boolean value. Returning false from the function will stop the iteration.Executes the specified function once for every key in the collection, passing each
key, and its associated item as the first two parameters.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the objects in this collection by a specific property.
Returns a new collection that has been filtered.Filter by a function. Returns a new collection that has been filtered.
The passed function will be called with each object in the collection.
If the function returns true, the value is included otherwise it is filtered.Returns the first item in the collection which elicits a true return value from the
passed selection function.Finds the index of the first matching object in this collection by a specific property/value.Find the index of the first matching object in this collection by a function.
If the function returns true it is considered a match.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns the first item in the collection.This method calls item().
Returns the item associated with the passed key OR index. Key has priority
over index. This is the equivalent of calling key first, then if
nothing matched calling itemAt.Returns the number of items in the collection.MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation
simply returns item.id but you can provide your own implementation
to return a different value as in the following examples:// normal way
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//and so on
// using getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);
// or via the constructor
var mc = new Ext.util.MixedCollection(false, function(el){
return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);Returns a range of items in this collectionChecks to see if this object has any listeners for a specified eventReturns index within the collection of the passed Object.Returns index within the collection of the passed key.Inserts an item at the specified index in the collection. Fires the add event when complete.Returns the item associated with the passed key OR index.
Key has priority over index. This is the equivalent
of calling key first, then if nothing matched calling itemAt.Returns the item at the specified index.Returns the item associated with the passed key.Sorts this collection by keys.Returns the last item in the collection.Gets a registered Store by idAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRegisters one or more Stores with the StoreMgr. You do not normally need to register stores
manually. Any store initialized with a Ext.data.Store.storeId will be auto-registered.Relays selected events from the specified Observable as if the events were fired by this.Remove an item from the collection.Remove an item from a specified index in the collection. Fires the remove event when complete.Removed an item associated with the passed key fom the collection.Removes an event handler.Reorders each of the items based on a mapping from old index to new index. Internally this
just translates into a sort. The 'sort' event is fired whenever reordering has occured.Replaces an item in the collection. Fires the replace event when complete.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sorts this collection by item value with the passed comparison function.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Unregisters one or more Stores with the StoreMgrBase class for any Component that is to be sized as a box, using width and height.
BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly
within the Component rendering model.
A BoxComponent may be created as a custom Component which encapsulates any HTML element, either a pre-existing
element, or one that is created to your specifications at render time. Usually, to participate in layouts,
a Component will need to be a BoxComponent in order to have its width and height managed.
To use a pre-existing element as a BoxComponent, configure it so that you preset the el property to the
element to reference:var pageHeader = new Ext.BoxComponent({
el: 'my-header-div'
});
This may then be added to a Container as a child item.
To create a BoxComponent based around a HTML element to be created at render time, use the
autoEl config option which takes the form of a
DomHelper specification:var myImage = new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: '/images/my-image.jpg'
}
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
DomQuery supports most of the CSS3 selectors spec, along with some custom selectors and basic XPath.
All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
Element Selectors:
* any element
E an element with the tag E
E F All descendent elements of E that have the tag F
E > F or E/F all direct children elements of E that have the tag F
E + F all elements with the tag F that are immediately preceded by an element with the tag E
E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
Attribute Selectors:
The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.
E[foo] has an attribute "foo"
E[foo=bar] has an attribute "foo" that equals "bar"
E[foo^=bar] has an attribute "foo" that starts with "bar"
E[foo$=bar] has an attribute "foo" that ends with "bar"
E[foo*=bar] has an attribute "foo" that contains the substring "bar"
E[foo%=2] has an attribute "foo" that is evenly divisible by 2
E[foo!=bar] attribute "foo" does not equal "bar"
Pseudo Classes:
E:first-child E is the first child of its parent
E:last-child E is the last child of its parent
E:nth-child(n) E is the nth child of its parent (1 based as per the spec)
E:nth-child(odd) E is an odd child of its parent
E:nth-child(even) E is an even child of its parent
E:only-child E is the only child of its parent
E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
E:first the first E in the resultset
E:last the last E in the resultset
E:nth(n) the nth E in the resultset (1 based)
E:odd shortcut for :nth-child(odd)
E:even shortcut for :nth-child(even)
E:contains(foo) E's innerHTML contains the substring "foo"
E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
E:not(S) an E element that does not match simple selector S
E:has(S) an E element that has a descendent that matches simple selector S
E:next(S) an E element whose next sibling matches simple selector S
E:prev(S) an E element whose previous sibling matches simple selector S
E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3//\\
CSS Value Selectors:
E{display=none} css value "display" that equals "none"
E{display^=none} css value "display" that starts with "none"
E{display$=none} css value "display" that ends with "none"
E{display*=none} css value "display" that contains the substring "none"
E{display%=2} css value "display" that is evenly divisible by 2
E{display!=none} css value "display" that does not equal "none"
Compiles a selector/xpath query into a reusable function. The returned function
takes one parameter "root" (optional), which is the context node from where the query should start.Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)Selects a group of elements.Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
New operators can be added as long as the match the format c= where c is any character other than space, > <.Selects a single element.Selects the value of a node, parsing integers and floats. Returns the defaultValue, or 0 if none is specified.Selects the value of a node, optionally replacing null with the defaultValue.A basic tab container. TabPanels can be used exactly like a standard Ext.Panel
for layout purposes, but also have special support for containing child Components
(items) that are managed using a
CardLayout layout manager, and displayed as separate tabs.
Note: By default, a tab's close tool destroys the child tab Component
and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable
re-use of a tab, configure the TabPanel with autoDestroy: false.
TabPanel header/footer elements
TabPanels use their header or footer element
(depending on the tabPosition configuration) to accommodate the tab selector buttons.
This means that a TabPanel will not display any configured title, and will not display any
configured header tools.
To display a header, embed the TabPanel in a Panel which uses
layout:'fit'.
Tab Events
There is no actual tab class — each tab is simply a Component
such as a Panel. However, when rendered in a TabPanel, each child Component
can fire additional events that only exist for tabs and are not available from other Components.
These events are:
activate : Fires when this Component becomes
the active tab.
deactivate : Fires when the Component that
was the active tab becomes deactivated.
beforeclose : Fires when the user clicks on the close tool of a closeable tab.
May be vetoed by returning false from a handler.
close : Fires a closeable tab has been closed by the user.
Creating TabPanels from Code
TabPanels can be created and rendered completely in code, as in this example:
var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]
});
Creating TabPanels from Existing Markup
TabPanels can also be rendered from pre-existing markup in a couple of ways.
Pre-Structured Markup
A container div with one or more nested tab divs with class 'x-tab' can be rendered entirely
from existing markup (See the autoTabs example).
Un-Structured Markup
A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
which elements should be the container and the tabs. Using this method tab content can be pulled from different
elements within the page by id regardless of page structure. For example:
var tabs = new Ext.TabPanel({
renderTo: 'my-tabs',
activeTab: 0,
items:[
{contentEl:'tab1', title:'Tab 1'},
{contentEl:'tab2', title:'Tab 2'}
]
});
// Note that the tabs do not have to be nested within the container (although they can be)
<div id="my-tabs"></div>
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>
Note that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered
deferred without displaying outside the tabs. You could alternately set deferredRender = false
to render all content tabs on page load.
See setActiveTab. Sets the specified tab as the active tab. This method fires
the beforetabchange event which can return false to cancel the tab change.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Suspends any internal calculations or scrolling while doing a bulk operation. See endUpdateBubbles 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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Resumes calculations and scrolling at the end of a bulk operation. See beginUpdateExpands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the Component which is the currently active tab. Note that before the TabPanel
first activates a child Component, this method will return whatever was configured in the
activeTab config option.Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Gets the specified tab by id.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the DOM element for the tab strip item which activates the child panel with the specified
ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.Provides template arguments for rendering a tab selector item in the tab strip.
This method returns an object hash containing properties used by the TabPanel's itemTpl
to create a formatted, clickable tab selector element. The properties which must be returned
are:
id : StringA unique identifier which links to the item
text : StringThe text to display
cls : StringThe CSS class name
iconCls : StringA CSS class to provide appearance for an icon.
Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Hides the tab strip item for the passed tabInserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectTrue to scan the markup in this tab panel for autoTabs using the
autoTabSelectorRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Scrolls to a particular tab if tab scrolling is enabledSets the specified tab as the active tab. This method fires the beforetabchange event which
can return false to cancel the tab change.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Unhides the tab strip item for the passed tabUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Ext core utilities and functions.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
}
});Copies all the properties of config to obj.Copies all the properties of config to obj if they don't already exist.Creates a copy of the passed Array with falsy values removed.Copies a set of named properties fom the source object to the destination object.
example:ImageComponent = Ext.extend(Ext.BoxComponent, {
initComponent: function() {
this.autoEl = { tag: 'img' };
MyComponent.superclass.initComponent.apply(this, arguments);
this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
}
});Shorthand for Ext.ComponentMgr.create
Creates a new Component from the specified config object using the
config object's xtype to determine the class to instantiate.Shorthand for Ext.util.JSON.decodeShorthand for Ext.util.Functions.createDelegateAttempts 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.Iterates an array calling the supplied function.Shorthand for Ext.util.JSON.encodeEscapes the passed string for use in a regular expressionExtends one class to create a subclass and optionally overrides members with the passed literal. This method
also adds the function "override()" to the subclass that can be used to override members of the class.
For example, to create a subclass of Ext GridPanel:
MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
constructor: function(config) {
// Create configuration for this Grid.
var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({...});
// Create a new config object containing our computed properties
// *plus* whatever was in the config parameter.
config = Ext.apply({
store: store,
colModel: colModel
}, config);
MyGridPanel.superclass.constructor.call(this, config);
// Your postprocessing here
},
yourMethod: function() {
// etc.
}
});
This function also supports a 3-argument call in which the subclass's constructor is
passed as an argument. In this form, the parameters are as follows:
subclass : Function The subclass constructor.
superclass : Function The constructor of class being extended
overrides : Object A literal with members which are copied into the subclass's
prototype, and are therefore shared among all instances of the new class.
Recursively flattens into 1-d Array. Injects Arrays inline.Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
the dom node can be overwritten by other code. Shorthand of Ext.Element.fly
Use this to make one-time references to DOM elements which are not going to be accessed again either by
application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get
will be more appropriate to take advantage of the caching provided by the Ext.Element class.Retrieves Ext.Element objects.
This method does not retrieve Components. This method
retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
its ID, use Ext.ComponentMgr.get.
Uses simple caching to consistently return the same object. Automatically fixes if an
object was recreated with the same id via AJAX or DOM.
Shorthand of Ext.Element.getReturns the current document body as an Ext.Element.This is shorthand reference to Ext.ComponentMgr.get.
Looks up an existing Component by idReturns the current HTML document object as an Ext.Element.Return the dom node for the passed String (id), dom node, or Ext.Element.
Optional 'strict' flag is needed for IE since it can return 'name' and
'id' elements by using getElementById.
Here are some examples:
// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);
// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
var dom = Ext.getDom(el);
// do something with the dom node
}
Note: the dom node to be found actually needs to exist (be rendered, etc)
when this method is called to be successful.Returns the current document body as an Ext.Element.Utility method for getting the width of the browser scrollbar. This can differ depending on
operating system settings, such as the theme or font size.Generates unique ids. If the element already has an id, it is unchangedInvokes a method on each item in an Array.
// Example:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]Returns true if the passed value is a JavaScript array, otherwise false.Returns true if the passed value is a boolean.Returns true if the passed object is a JavaScript date object, otherwise false.Returns true if the passed value is not undefined.Returns true if the passed value is an HTMLElementReturns true if the passed value is empty.
The value is deemed to be empty if it is
null
undefined
an empty array
a zero length string (Unless the allowBlank parameter is true)
Returns true if the passed value is a JavaScript Function, otherwise false.Returns true if the passed value is a number. Returns false for non-finite numbers.Returns true if the passed value is a JavaScript Object, otherwise false.Returns true if the passed value is a JavaScript 'primitive', a string, number or boolean.Returns true if the passed value is a string.Iterates either the elements in an array, or each of the properties in an object.
Note: If you are only iterating arrays, it is better to call each.Returns the maximum value in the ArrayCalculates the mean of the ArrayReturns the minimum value in the Array.Creates namespaces to be used for scoping variables and classes so that they are not global.
Specifying the last node of a namespace implicitly creates all other nodes. Usage:
Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // equivalent and preferable to above syntax
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }Creates namespaces to be used for scoping variables and classes so that they are not global.
Specifying the last node of a namespace implicitly creates all other nodes. Usage:
Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // equivalent and preferable to above syntax
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }Utility method for validating that a value is numeric, returning the specified default value if it is not.Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of Ext.EventManager.onDocumentReady.Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
Usage:Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});Partitions the set into two sets: a true set and a false set.
Example:
Example2:
// Example 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
// Example 2:
Ext.partition(
Ext.query("p"),
function(val){
return val.className == "class1"
}
);
// true are those paragraph elements with a className of "class1",
// false set are those that do not have that className.Plucks the value of a property from each item in the Array
// Example:
Ext.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]Shorthand for Ext.ComponentMgr.registerPluginSelects an array of DOM nodes by CSS/XPath selector. Shorthand of Ext.DomQuery.selectShorthand for Ext.ComponentMgr.registerTypeRemoves this element from the document, removes all DOM event listeners, and deletes the cache reference.
All DOM event listeners are removed from this element. If Ext.enableNestedListenerRemoval is
true, then DOM event listeners are also removed from all child nodes. The body node
will be ignored if passed in.Selects elements based on the passed CSS selector to enable Element methods
to be applied to many related elements in one statement through the returned CompositeElement or
CompositeElementLite object.Calculates the sum of the ArrayConverts any iterable (numeric indices and a length property) into a true array
Don't use this on strings. IE doesn't support "abc"[0] which this implementation depends on.
For strings, use this instead: "abc".match(/./g) => [a,b,c];Returns the type of object that is passed in. If the object passed in is null or undefined it
return false otherwise it returns one of the following values:
string: If the object passed is a string
number: If the object passed is a number
boolean: If the object passed is a boolean value
date: If the object passed is a Date object
function: If the object passed is a function reference
object: If the object passed is an object
array: If the object passed is an array
regexp: If the object passed is a regular expression
element: If the object passed is a DOM Element
nodelist: If the object passed is a DOM NodeList
textnode: If the object passed is a DOM text node and contains something other than whitespace
whitespace: If the object passed is a DOM text node and contains only whitespace
Creates a copy of the passed Array, filtered to contain only unique values.Appends content to the query string of a URL, handling logic for whether to place
a question mark or ampersand.Takes an encoded URL and and converts it to an object. Example: Ext.urlDecode("foo=1&bar=2"); // returns {foo: "1", bar: "2"}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false); // returns {foo: "1", bar: ["2", "3", "4"]}Takes an object and converts it to an encoded URL. e.g. Ext.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2". Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.Utility method for returning a default value if the passed value is empty.
The value is deemed to be empty if it is
null
undefined
an empty array
a zero length string (Unless the allowBlank parameter is true)
Zips N sets together.
// Example 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
// Example 2:
Ext.zip(
[ "+", "-", "+"],
[ 12, 10, 22],
[ 43, 15, 96],
function(a, b, c){
return "$" + a + "" + b + "." + c
}
); // ["$+12.43", "$-10.15", "$+22.96"]An implementation of Ext.data.DataProxy that simply passes the data specified in its constructor
to the Reader when its load method is called.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys the proxy by purging any event listeners and cancelling any active requests.MemoryProxy implementation of DataProxy#doRequestEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns true if the specified action is defined as a unique action in the api-config.
request. If all API-actions are routed to unique urls, the xaction parameter is unecessary. However, if no api is defined
and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
the corresponding code for CRUD action.Deprecated load method using old method signature. See {@doRequest} for preferred method.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.All proxy actions are executed through this method. Automatically fires the "before" + action eventResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
If called with an object as the only parameter, the object should redefine the entire API, e.g.:proxy.setApi({
read : '/users/read',
create : '/users/create',
update : '/users/update',
destroy : '/users/destroy'
});
If called with two parameters, the first parameter should be a string specifying the API action to
redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Simple Button classAdds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Gets the pressed button in the passed group or nullReturns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.This method returns an Array which provides substitution parameters for the Template used
to create this Button's DOM structure.
Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
own implementation of this method.
The default implementation which provides data for the default template returns an Array containing the
following items:
The <button>'s type
A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
The cls CSS class name applied to the button's wrapping <table> element.
The Component id which is applied to the button's wrapping <table> element.
Gets the text for this ButtonGets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventReturns true if the button has a menu and it is visibleHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Hide this button's menu (if it has one)Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Assigns this Button's click handlerSets the height of the component. This method fires the resize event.Sets the background image (inline style) of the button. This method also changes
the value of the icon config internally.Sets the CSS class that provides a background image to use as the button's icon. This method also changes
the value of the iconCls config internally.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets this Button's textSets the tooltip for this Button.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Show this button's menu (if it has one)Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.If a state it passed, it becomes the pressed state otherwise the current state is toggled.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A specialized drag proxy that supports a drop status icon, Ext.Layer styles and auto-repair. This is the
default drag proxy used by all Ext.dd components.Returns the underlying proxy Ext.LayerReturns the ghost elementHides the proxyCauses the proxy to return to its position of origin via an animation. Should be called after an
invalid drop operation by the item being dragged.Resets the status indicator to the default dropNotAllowed valueUpdates the proxy's visual element to indicate the status of whether or not drop is allowed
over the current target element.Displays this proxyStops the repair animation if it's currently runningForce the Layer to sync its shadow and shim positions to the elementUpdates the contents of the ghost elementA specialized grid implementation intended to mimic the traditional property grid as typically seen in
development IDEs. Each row in the grid represents a property of some object, and the data is stored
as a set of name/value pairs in Ext.grid.PropertyRecords. Example usage:
var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 300,
renderTo: 'grid-ct',
source: {
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
}
});Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.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.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the grid's ColumnModel.Called to get grid's drag proxy text, by default returns this.ddText.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Returns the grid's underlying element.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Returns the grid's selection model configured by the selModel
configuration option. If no selection model was configured, this will create
and return a RowSelectionModel.Gets the current size of the component's underlying element.Gets the source data object containing the property data. See setSource for details regarding the
format of the data object.Returns the grid's data store.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Returns the grid's GridView object.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectReconfigures the grid to use a different Store and Column Model
and fires the 'reconfigure' event. The View will be bound to the new
objects and refreshed.
Be aware that upon reconfiguring a GridPanel, certain existing settings may become
invalidated. For example the configured autoExpandColumn may no longer exist in the
new ColumnModel. Also, an existing PagingToolbar will still be bound
to the old Store, and will need rebinding. Any plugins might also need reconfiguring
with the new data.Relays selected events from the specified Observable as if the events were fired by this.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Removes a property from the grid.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the value of a property.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the source data object containing the property data. The data object can contain one or more name/value
pairs representing all of the properties of an object to display in the grid, and this data will automatically
be loaded into the grid's store. The values should be supplied in the proper data type if needed,
otherwise string type will be assumed. If the grid already contains data, this method will replace any
existing data. See also the source config value. Example usage:
grid.setSource({
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')), // date type
"Available": false, // boolean type
"Version": .01, // decimal type
"Description": "A test object"
});Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Starts editing the specified for the specified row/columnStops any active editingSuspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Provides Ext.direct support for loading form data.
This example illustrates usage of Ext.Direct to load a form through Ext.Direct.
var myFormPanel = new Ext.form.FormPanel({
// configs for FormPanel
title: 'Basic Information',
renderTo: document.body,
width: 300, height: 160,
padding: 10,
// configs apply to child items
defaults: {anchor: '100%'},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email',
name: 'email'
},{
fieldLabel: 'Company',
name: 'company'
}],
// configs for BasicForm
api: {
// The server-side method to call for load() requests
load: Profile.getBasicInfo,
// The server-side must mark the submit handler as a 'formHandler'
submit: Profile.updateBasicInfo
},
// specify the order for the passed params
paramOrder: ['uid', 'foo']
});
// load the form
myFormPanel.getForm().load({
// pass 2 arguments to server side getBasicInfo method (len=2)
params: {
foo: 'bar',
uid: 34
}
});
The data packet sent to the server will resemble something like:
[
{
"action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
"data":[34,"bar"] // note the order of the params
}
]
The form will process a data packet returned by the server that is similar
to the following format:
[
{
"action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
"result":{
"success":true,
"data":{
"name":"Fred Flintstone",
"company":"Slate Rock and Gravel",
"email":"fred.flintstone@slaterg.com"
}
}
}
]An implementation of Ext.data.DataProxy that reads a data object from a URL which may be in a domain
other than the originating domain of the running page.
Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
of the running page, you must use this class, rather than HttpProxy.
The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript
source code because it is used as the source inside a <script> tag.
In order for the browser to process the returned data, the server must wrap the data object
with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
depending on whether the callback name was passed:
boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
out.write(");");
}
Below is a PHP example to do the same thing:$callback = $_REQUEST['callback'];
// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');
//start output
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
Below is the ASP.Net code to do the same thing:String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
responseString = cb + "(" + jsonString + ")";
} else {
responseString = jsonString;
}
Response.Write(responseString);Abort the current server request.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys the proxy by purging any event listeners and cancelling any active requests.HttpProxy implementation of DataProxy#doRequestEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns true if the specified action is defined as a unique action in the api-config.
request. If all API-actions are routed to unique urls, the xaction parameter is unecessary. However, if no api is defined
and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
the corresponding code for CRUD action.Deprecated load method using old method signature. See {@doRequest} for preferred method.Appends an event handler to this object (shorthand for addListener.)Callback for read actionsCallback for write actionsRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.All proxy actions are executed through this method. Automatically fires the "before" + action eventResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
If called with an object as the only parameter, the object should redefine the entire API, e.g.:proxy.setApi({
read : '/users/read',
create : '/users/create',
update : '/users/update',
destroy : '/users/destroy'
});
If called with two parameters, the first parameter should be a string specifying the API action to
redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)This is a base class for layouts that contain a single item that automatically expands to fill the layout's
container. This class is intended to be extended or created via the layout:'fit' Ext.Container.layout
config, and should generally not need to be created directly via the new keyword.
FitLayout does not have any direct config options (other than inherited ones). To fit a panel to a container
using FitLayout, simply set layout:'fit' on the container and add a single panel to it. If the container has
multiple panels, only the first one will be displayed. Example usage:
var p = new Ext.Panel({
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)The base class for all items that render into menus. BaseItem provides default rendering, activated state
management and base configuration options shared by all menu components.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Sets the function that will handle click events for this item (equivalent to passing in the handler
config property). If an existing handler is already registered, it will be unregistered for you.Convenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Data reader class to create an Array of Ext.data.Record objects
from a JSON packet based on mappings in a provided Ext.data.Record
constructor.
Example code:
var myReader = new Ext.data.JsonReader({
// metadata configuration options:
idProperty: 'id'
root: 'rows',
totalProperty: 'results',
Ext.data.DataReader.messageProperty: "msg" // The element within the response that provides a user-feedback message (optional)
// the fields config option will internally create an Ext.data.Record
// constructor that provides mapping for reading the record data objects
fields: [
// map Record's 'firstname' field to data object's key of same name
{name: 'name', mapping: 'firstname'},
// map Record's 'job' field to data object's 'occupation' key
{name: 'job', mapping: 'occupation'}
]
});
This would consume a JSON data object of the form:{
results: 2000, // Reader's configured totalProperty
rows: [ // Reader's configured root
// record data objects:
{ id: 1, firstname: 'Bill', occupation: 'Gardener' },
{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
...
]
}
Automatic configuration using metaData
It is possible to change a JsonReader's metadata at any time by including
a metaData property in the JSON data object. If the JSON data
object has a metaData property, a Store
object using this Reader will reconfigure itself to use the newly provided
field definition and fire its metachange
event. The metachange event handler may interrogate the metaData
property to perform any configuration required.
Note that reconfiguring a Store potentially invalidates objects which may
refer to Fields or Records which no longer exist.
To use this facility you would create the JsonReader like this:var myReader = new Ext.data.JsonReader();
The first data packet from the server would configure the reader by
containing a metaData property and the data. For
example, the JSON data object might take the form:{
metaData: {
"idProperty": "id",
"root": "rows",
"totalProperty": "results"
"successProperty": "success",
"fields": [
{"name": "name"},
{"name": "job", "mapping": "occupation"}
],
// used by store to set its sortInfo
"sortInfo":{
"field": "name",
"direction": "ASC"
},
// paging data (if applicable)
"start": 0,
"limit": 2,
// custom property
"foo": "bar"
},
// Reader's configured successProperty
"success": true,
// Reader's configured totalProperty
"results": 2000,
// Reader's configured root
// (this data simulates 2 results per page)
"rows": [ // *Note: this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" }
]
}
The metaData property in the JSON data object should contain:
any of the configuration options for this class
a fields property which
the JsonReader will use as an argument to the
data Record create method in order to
configure the layout of the Records it will produce.
a sortInfo property
which the JsonReader will use to set the Ext.data.Store's
sortInfo property
any custom properties needed
Returns true if the supplied data-hash looks and quacks like data. Checks to see if it has a key
corresponding to idProperty defined in your DataReader config containing non-empty pk.This method is only used by a DataProxy which has retrieved data from a remote server.Create a data block containing Ext.data.Records from a JSON object.Decode a JSON response from server.Used for un-phantoming a record after a successful database insert. Sets the records pk along with new data from server.
You must return at least the database pk using the idProperty defined in your DataReader configuration. The incoming
data from server will be merged with the data in the local record.
In addition, you must return record-data from the server in the same order received.
Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be suppressed.Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
If returning data from multiple-records after a batch-update, you must return record-data from the server in
the same order received. Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be
suppressed as the record receives fresh new data-hashBase class that provides a common interface for publishing events. Subclasses are expected to
to have a property "events" with all the events defined, and, optionally, a property "listeners"
with configured listeners defined.
For example:
Employee = Ext.extend(Ext.util.Observable, {
constructor: function(config){
this.name = config.name;
this.addEvents({
"fired" : true,
"quit" : true
});
// Copy configured listeners into *this* object so that the base class's
// constructor will add them.
this.listeners = config.listeners;
// Call our superclass constructor to complete construction process.
Employee.superclass.constructor.call(this, config)
}
});
This could then be used like this:var newEmployee = new Employee({
name: employeeName,
listeners: {
quit: function() {
// By default, "this" will be the object that fired the event.
alert(this.name + " has quit!");
}
}
});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.Sets observability on the passed class constructor.
This makes any event fired on any instance of the passed class also fire a single event through
the class allowing for central handling of events on many instances at once.
Usage:Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
console.log('Ajax request made to ' + options.url);
});Removes all added captures from the Observable.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)This class encapsulates column configuration data to be used in the initialization of a
ListView.
While subclasses are provided to render data in different ways, this class renders a passed
data field unchanged and is usually used for textual columns.The TreePanel provides tree-structured UI representation of tree-structured data.
TreeNodes added to the TreePanel may each contain metadata
used by your application in their attributes property.
A TreePanel must have a root node before it is rendered. This may either be
specified using the root config option, or using the setRootNode method.
An example of tree rendered to an existing div:var tree = new Ext.tree.TreePanel({
renderTo: 'tree-div',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'get-nodes.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable: false,
id: 'source'
}
});
tree.getRootNode().expand();
The example above would work with a data packet similar to this:[{
"text": "adapter",
"id": "source\/adapter",
"cls": "folder"
}, {
"text": "dd",
"id": "source\/dd",
"cls": "folder"
}, {
"text": "debug.js",
"id": "source\/debug.js",
"leaf": true,
"cls": "file"
}]
An example of tree within a Viewport:new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
// remaining code not shown ...
}]
});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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.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.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Collapse all nodesDestroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Expand all nodesExpands a specified path in this TreePanel. A path can be retrieved from a node with Ext.data.Node.getPathFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. 'id')Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Returns the default Ext.tree.TreeLoader for this TreePanel.Gets a node in this tree by its idGets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Returns this root node for this treeReturns the selection model used by this TreePanel.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Returns the underlying Element for this treeGets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects the node in this tree at the specified path. A path can be retrieved from a node with Ext.data.Node.getPathSets the overflow on the content element of the component.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the root node for this tree. If the TreePanel has already rendered a root node, the
previous root node (and all of its descendants) are destroyed before the new root node is rendered.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.This class encapsulates column configuration data to be used in the initialization of a
ColumnModel.
While subclasses are provided to render data in different ways, this class renders a passed
data field unchanged and is usually used for textual columns.Returns the editor defined for this column that was created to wrap the Field
used to edit the cell.Sets a new editor for this column.A menu object. This is the container to which you may add menu items. Menu can also serve as a base class
when you want a specialized menu based off of another component (like Ext.menu.DateMenu for example).
Menus may contain either menu items, or general Components.
To make a contained general Component line up with other menu items
specify iconCls: 'no-icon'. This reserves a space for an icon, and indents the Component in line
with the other menu items. See Ext.form.ComboBox.getListParent
for an example.
By default, Menus are absolutely positioned, floating Components. By configuring a Menu with
floating:false, a Menu may be used as child of a Container.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a CSS class to the component's underlying element.Adds an Ext.Element object to the menuAdds the specified events to the list of events which this Observable may fire.Adds an existing object based on Ext.menu.BaseItem to the menuAppends an event handler to this object.Creates a new Ext.menu.Item based an the supplied config object and adds it to the menuAdds a separator bar to the menuCreates a new Ext.menu.TextItem with the supplied text and adds it to the menuApply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHides this menu and optionally all parent menusInserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.If floating=true, shows this menu relative to
another element using showat, otherwise uses Ext.Component.show.Displays this menu at a specific xy position and fires the 'show' event if a
handler for the 'beforeshow' event does not return false cancelling the operation.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Layout manager used by Ext.menu.Menu. Generally this class should not need to be used directly.Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)A Column definition class which renders a passed date according to the default locale, or a configured
format. See the xtype config option of Ext.grid.Column
for more details.Returns the editor defined for this column that was created to wrap the Field
used to edit the cell.Sets a new editor for this column.The PivotGrid component enables rapid summarization of large data sets. It provides a way to reduce a large set of
data down into a format where trends and insights become more apparent. A classic example is in sales data; a company
will often have a record of all sales it makes for a given period - this will often encompass thousands of rows of
data. The PivotGrid allows you to see how well each salesperson performed, which cities generate the most revenue,
how products perform between cities and so on.
A PivotGrid is composed of two axes (left and top), one measure and one aggregation
function. Each axis can contain one or more dimension, which are ordered into a hierarchy. Dimensions on the
left axis can also specify a width. Each dimension in each axis can specify its sort ordering, defaulting to "ASC",
and must specify one of the fields in the Record used by the PivotGrid's
Store.
// This is the record representing a single sale
var SaleRecord = Ext.data.Record.create([
{name: 'person', type: 'string'},
{name: 'product', type: 'string'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'year', type: 'int'},
{name: 'value', type: 'int'}
]);
// A simple store that loads SaleRecord data from a url
var myStore = new Ext.data.Store({
url: 'data.json',
autoLoad: true,
reader: new Ext.data.JsonReader({
root: 'rows',
idProperty: 'id'
}, SaleRecord)
});
// Create the PivotGrid itself, referencing the store
var pivot = new Ext.grid.PivotGrid({
store : myStore,
aggregator: 'sum',
measure : 'value',
leftAxis: [
{
width: 60,
dataIndex: 'product'
},
{
width: 120,
dataIndex: 'person',
direction: 'DESC'
}
],
topAxis: [
{
dataIndex: 'year'
}
]
});
The specified measure is the field from SaleRecord that is extracted from each combination
of product and person (on the left axis) and year on the top axis. There may be several SaleRecords in the
data set that share this combination, so an array of measure fields is produced. This array is then
aggregated using the aggregator function.
The default aggregator function is sum, which simply adds up all of the extracted measure values. Other
built-in aggregator functions are count, avg, min and max. In addition, you can specify your own function.
In this example we show the code used to sum the measures, but you can return any value you like. See
aggregator for more details.
new Ext.grid.PivotGrid({
aggregator: function(records, measure) {
var length = records.length,
total = 0,
i;
for (i = 0; i return total;
},
renderer: function(value) {
return Math.round(value);
},
//your normal config here
});
Renderers
PivotGrid optionally accepts a renderer function which can modify the data in each cell before it
is rendered. The renderer is passed the value that would usually be placed in the cell and is expected to return
the new value. For example let's imagine we had height data expressed as a decimal - here's how we might use a
renderer to display the data in feet and inches notation:
new Ext.grid.PivotGrid({
//in each case the value is a decimal number of feet
renderer : function(value) {
var feet = Math.floor(value),
inches = Math.round((value - feet) * 12);
return String.format("{0}' {1}\"", feet, inches);
},
//normal config here
});
Reconfiguring
All aspects PivotGrid's configuration can be updated at runtime. It is easy to change the measure,
aggregation function, left and top axes and refresh the grid.
In this case we reconfigure the PivotGrid to have city and year as the top axis dimensions, rendering the average sale
value into the cells:
//the left axis can also be changed
pivot.topAxis.setDimensions([
{dataIndex: 'city', direction: 'DESC'},
{dataIndex: 'year', direction: 'ASC'}
]);
pivot.setMeasure('value');
pivot.setAggregator('avg');
pivot.view.refresh(true);
See the PivotAxis documentation for further detail on reconfiguring axes.Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.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.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the function currently used to aggregate the records in each Pivot cellReturns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the grid's ColumnModel.Called to get grid's drag proxy text, by default returns this.ddText.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Returns the grid's underlying element.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Returns the grid's selection model configured by the selModel
configuration option. If no selection model was configured, this will create
and return a RowSelectionModel.Gets the current size of the component's underlying element.Returns the grid's data store.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Returns the grid's GridView object.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectReconfigures the grid to use a different Store and Column Model
and fires the 'reconfigure' event. The View will be bound to the new
objects and refreshed.
Be aware that upon reconfiguring a GridPanel, certain existing settings may become
invalidated. For example the configured autoExpandColumn may no longer exist in the
new ColumnModel. Also, an existing PagingToolbar will still be bound
to the old Store, and will need rebinding. Any plugins might also need reconfiguring
with the new data.Relays selected events from the specified Observable as if the events were fired by this.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the function to use when aggregating data for each cell.Sets the overflow on the content element of the component.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the left axis of this pivot grid. Optionally refreshes the grid afterwards.Sets the field name to use as the Measure in this Pivot GridSets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Sets the top axis of this pivot grid. Optionally refreshes the grid afterwards.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Small helper class to create an Ext.data.Store configured with an
Ext.data.DirectProxy and Ext.data.JsonReader to make interacting
with an Ext.Direct Server-side Provider easier.
To create a different proxy/reader combination create a basic Ext.data.Store
configured as needed.
*Note: Although they are not listed, this class inherits all of the config options of:
Store
JsonReader
root
idProperty
totalProperty
DirectProxy
directFn
paramOrder
paramsAsHash
Add Records to the Store and fires the add event. To add Records
to the store from a remote source use load({add:true}).
See also recordType and insert.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.(Local sort only) Inserts the passed Record into the Store at the index where it
should go based on the current sort information.Revert to a view of the Record cache with no filtering applied.Collects unique values for a particular dataIndex from this store.Commit 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.Destroys the store.Calls the specified function for each of the Records in the cache.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the records by a specified property. Alternatively, pass an array of filter
options to filter by more than one property.
Single filter example:
store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
Multiple filter example:
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.Finds the index of the first matching Record in this store by a specific field value.Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.Finds the index of the first matching Record in this store by a specific field value.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the Record at the specified index.Get the Record with the specified id.Gets the number of cached records.
If using paging, this may not be the total size of the dataset. If the data object
used by the Reader contains the dataset size, then the getTotalCount function returns
the dataset size. Note: see the Important note in load.Gets all records modified since the last commit. Modified records are
persisted across load operations (e.g., during paging). Note: deleted records are not
included. See also pruneModifiedRecords and
Ext.data.RecordmarkDirty..Returns a range of Records between specified indices.Returns an object describing the current sort state of this Store.Gets the total number of records in the dataset as returned by the server.
If using paging, for this to be accurate, the data object used by the Reader
must contain the dataset size. For remote data sources, the value for this property
(totalProperty for JsonReader,
totalRecords for XmlReader) shall be returned by a query on the server.
Note: see the Important note in load.Checks to see if this object has any listeners for a specified eventGet the index within the cache of the passed Record.Get the index within the cache of the Record with the passed id.Inserts Records into the Store at the given index and fires the add event.
See also add and addSorted.Returns true if this store is currently filteredLoads the Record cache from the configured proxy using the configured reader.
Notes:
Important: loading is asynchronous! This call will return before the new data has been
loaded. To perform any post-processing where information from the load call is required, specify
the callback function to be called, or use a a 'load' event handler.
If using remote paging, the first load call must specify the start and limit
properties in the options.params property to establish the initial position within the
dataset, and the number of Records to cache on each read from the Proxy.
If using remote sorting, the configured sortInfo
will be automatically included with the posted parameters according to the specified
paramNames.
Loads data from a passed data block and fires the load event. A Reader
which understands the format of the data must have been configured in the constructor.Sorts the contents of this store by multiple field/direction sorters. This is called internally by sort
and would not usually be called manually.
Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
if remoteSort is used.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectQuery the records by a specified property.Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.Reject outstanding changes on all modified records.Relays selected events from the specified Observable as if the events were fired by this.Reloads the Record cache from the configured Proxy using the configured
Reader and the options from the last load operation
performed.
Note: see the Important note in load.Remove Records from the Store and fires the remove event.Remove all Records from the Store and fires the clear event.Remove a Record from the Store at the specified index. Fires the remove event.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Saves all pending changes to the store. If the commensurate Ext.data.Api.actions action is not configured, then
the configured url will be used.
change url
--------------- --------------------
removed records Ext.data.Api.actions.destroy
phantom records Ext.data.Api.actions.create
modified records Ext.data.Api.actions.update
Set the value for a property name in this store's baseParams. Usage:myStore.setBaseParam('foo', {bar:3});Sets the default sort column and order to be used by the next load operation.Sorts the store contents by a single field and direction. This is called internally by sort and would
not usually be called manuallySort the Records.
If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
sorting is used, the cache is sorted internally. See also remoteSort and paramNames.
This function accepts two call signatures - pass in a field name as the first argument to sort on a single
field, or pass in an array of sort configuration objects to sort by multiple fields.
Single sort example:
store.sort('name', 'ASC');
Multi sort example:
store.sort([
{
field : 'name',
direction: 'ASC'
},
{
field : 'salary',
direction: 'DESC'
}
], 'ASC');
In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
above. Any number of sort configs can be added.Sums the value of property for each record between start
and end and returns the result.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Provides sorting of nodes in a Ext.tree.TreePanel. The TreeSorter automatically monitors events on the
associated TreePanel that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
Example usage:
new Ext.tree.TreeSorter(myTree, {
folderSort: true,
dir: "desc",
sortType: function(node) {
// sort by a custom, typed attribute:
return parseInt(node.id, 10);
}
});A type of axis that displays items in categories.Provides a time input field with a time dropdown and automatic time validation. Example usage:
new Ext.form.TimeField({
minValue: '9:00 AM',
maxValue: '6:00 PM',
increment: 30
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClears any text/value currently set in the fieldClone the current component using the original config values passed into this instance by default.Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
query allowing the query action to be canceled if needed.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the dropdown list if it is currently hidden. Fires the expand event on completion.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Validates a value according to the field's validation rules and returns an array of errors
for any failing validations. Validation rules are processed in the following order:
1. Field specific validator
A validator offers a way to customize and reuse a validation specification.
If a field is configured with a validator
function, it will be passed the current field value. The validator
function is expected to return either:
Boolean true if the value is valid (validation continues).
a String to represent the invalid message if invalid (validation halts).
2. Basic Validation
If the validator has not halted validation,
basic validation proceeds as follows:
allowBlank : (Invalid message =
emptyText)
Depending on the configuration of allowBlank, a
blank field will cause validation to halt at this step and return
Boolean true or false accordingly.
minLength : (Invalid message =
minLengthText)
If the passed value does not satisfy the minLength
specified, validation halts.
maxLength : (Invalid message =
maxLengthText)
If the passed value does not satisfy the maxLength
specified, validation halts.
3. Preconfigured Validation Types (VTypes)
If none of the prior validation steps halts validation, a field
configured with a vtype will utilize the
corresponding VTypes validation function.
If invalid, either the field's vtypeText or
the VTypes vtype Text property will be used for the invalid message.
Keystrokes on the field will be filtered according to the VTypes
vtype Mask property.
4. Field specific regex test
If none of the prior validation steps halts validation, a field's
configured regex test will be processed.
The invalid message for this test is configured with
regexText.
Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.
A custom implementation may be provided as a configuration option if the floating list needs to be rendered
to a different Element. An example might be rendering the list inside a Menu so that clicking
the list does not hide the Menu:var store = new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['initials', 'fullname'],
data : [
['FF', 'Fred Flintstone'],
['BR', 'Barney Rubble']
]
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'fullname',
emptyText: 'Select a name...',
forceSelection: true,
getListParent: function() {
return this.el.up('.x-menu');
},
iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
mode: 'local',
selectOnFocus: true,
triggerAction: 'all',
typeAhead: true,
width: 135
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
combo // A Field in a Menu
]
});Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the store associated with this combo.Returns the currently selected field value or empty string if no value is set.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns true if the dropdown list is expanded, else false.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
The store must be loaded and the list expanded for this function to work, otherwise use setValue.Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
The store must be loaded and the list expanded for this function to work, otherwise use setValue.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Allow or prevent the user from directly editing the field text. If false is passed,
the user will only be able to modify the field using the trigger. Will also add
a click event to the text field which will call the trigger. This method
is the runtime equivalent of setting the editable config option at config time.Sets the height of the component. This method fires the resize event.Changes the hidden status of the trigger.Replaces any existing maxValue with the new time and refreshes the store.Replaces any existing minValue with the new time and refreshes the store.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Setting this to true will supersede settings editable and hideTrigger.
Setting this to false will defer back to editable and hideTrigger. This method
is the runtime equivalent of setting the readOnly config option at config time.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the specified value into the field. If the value finds a match, the corresponding record text
will be displayed in the field. If the value does not match the data value of an existing item,
and the valueNotFoundText config option is defined, it will be displayed as the default field text.
Otherwise the field will be blank (although the value will still be set).Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI
updates across any components that support the Action interface (primarily Ext.Toolbar, Ext.Button
and Ext.menu.Menu components).
Aside from supporting the config object interface, any component that needs to use Actions must also support
the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string),
setDisabled(boolean), setVisible(boolean) and setHandler(function).
Example usage:
// Define the shared action. Each component below will have the same
// display text and icon, and will display the same message on click.
var action = new Ext.Action({
text: 'Do something',
handler: function(){
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something',
itemId: 'myAction'
});
var panel = new Ext.Panel({
title: 'Actions',
width: 500,
height: 300,
tbar: [
// Add the action directly to a toolbar as a menu button
action,
{
text: 'Action Menu',
// Add the action to a menu as a text item
menu: [action]
}
],
items: [
// Add the action to the panel body as a standard button
new Ext.Button(action)
],
renderTo: Ext.getBody()
});
// Change the text for all components using the action
action.setText('Something else');
// Reference an action through a container using the itemId
var btn = panel.getComponent('myAction');
var aRef = btn.baseAction;
aRef.setText('New text');Disables all components using this action.Executes the specified function once for each Component currently tied to this action. The function passed
in should accept a single argument that will be an object that supports the basic Action config/method interface.Enables all components using this action.Executes this action manually using the handler function specified in the original config object
or the handler function set with setHandler. Any arguments passed to this
function will be passed on to the handler function.Gets the icon CSS class currently used by all components using this action.Gets the text currently displayed by all components using this action.Hides all components using this action.Returns true if the components using this action are currently disabled, else returns false.Returns true if the components using this action are currently hidden, else returns false.Sets the disabled state of all components using this action. Shortcut method
for enable and disable.Sets the function that will be called by each Component using this action when its primary event is triggered.Sets the hidden state of all components using this action. Shortcut method
for hide and show.Sets the icon CSS class for all components using this action. The class should supply
a background image that will be used as the icon image.Sets the text to be displayed by all components using this action.Shows all components using this action.This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
This class is intended to be extended or created via the layout:'card' Ext.Container.layout config,
and should generally not need to be created directly via the new keyword.
The CardLayout's focal method is setActiveItem. Since only one panel is displayed at a time,
the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
the next panel to display. The layout itself does not provide a user interface for handling this navigation,
so that functionality must be provided by the developer.
In the following example, a simplistic wizard setup is demonstrated. A button bar is added
to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a
common navigation routine -- for this example, the implementation of that routine has been ommitted since
it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a
completely different implementation. For serious implementations, a better approach would be to extend
CardLayout to provide the custom functionality needed. Example usage:
var navHandler = function(direction){
// This routine could contain business logic required to manage the navigation steps.
// It would call setActiveItem as needed, manage navigation button state, handle any
// branching logic that might be required, handle alternate actions like cancellation
// or finalization, etc. A complete wizard implementation could get pretty
// sophisticated depending on the complexity required, and should probably be
// done as a subclass of CardLayout in a real-world implementation.
};
var card = new Ext.Panel({
title: 'Example Wizard',
layout:'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
// applied to each contained panel
border:false
},
// just an example of one possible navigation scheme, using buttons
bbar: [
{
id: 'move-prev',
text: 'Back',
handler: navHandler.createDelegate(this, [-1]),
disabled: true
},
'->', // greedy spacer so that the buttons are aligned to each side
{
id: 'move-next',
text: 'Next',
handler: navHandler.createDelegate(this, [1])
}
],
// the panels (or "cards") within the layout
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Sets the active (visible) item in the layout.The AutoLayout is the default layout manager delegated by Ext.Container to
render any child Components when no layout is configured into
a Container.. AutoLayout provides only a passthrough of any layout calls
to any child containers.Specialised GridView for rendering Pivot Grid components. Config can be passed to the PivotGridView via the PivotGrid constructor's
viewConfig option:
new Ext.grid.PivotGrid({
viewConfig: {
title: 'My Pivot Grid',
getCellCls: function(value) {
return value > 10 'red' : 'green';
}
}
});
Currently title and getCellCls are the only configuration options accepted by PivotGridView. All other
interaction is performed via the PivotGrid class.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Return the index of the grid column which contains the passed HTMLElement.
See also findRowIndexReturn the HtmlElement representing the grid row which contains the passed element.Return the HtmlElement representing the grid row body which contains the passed element.Return the index of the grid row which contains the passed HTMLElement.
See also findCellIndexFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Focuses the specified cell.Focuses the specified row.Returns the grid's <td> HtmlElement at the specified coordinates.Returns the headers to be rendered at the top of the grid. Should be a 2-dimensional array, where each item specifies the number
of columns it groups (column in this case refers to normal grid columns). In the example below we have 5 city groups, which are
each part of a continent supergroup. The colspan for each city group refers to the number of normal grid columns that group spans,
so in this case the grid would be expected to have a total of 12 columns:
[
{
items: [
{header: 'England', colspan: 5},
{header: 'USA', colspan: 3}
]
},
{
items: [
{header: 'London', colspan: 2},
{header: 'Cambridge', colspan: 3},
{header: 'Palo Alto', colspan: 3}
]
}
]
In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country ->
State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure.Returns the total internal width available to the grid, taking the scrollbar into accountReturn the <td> HtmlElement which represents the Grid's header cell for the specified column index.Return the <div> HtmlElement which represents a Grid row for the specified index.Override this function to apply custom CSS classes to rows during rendering. You can also supply custom
parameters to the row template for the current row to customize how it is rendered using the rowParams
parameter. This function should return the CSS class name (or empty string '' for none) that will be added
to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string
(e.g., 'my-class another-class'). Example usage:
viewConfig: {
forceFit: true,
showPreview: true, // custom property
enableRowBody: true, // required to create a second, full-width row to show expanded Record data
getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
if(this.showPreview){
rp.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},Returns the headers to be rendered on the left of the grid. Should be a 2-dimensional array, where each item specifies the number
of rows it groups. In the example below we have 5 city groups, which are each part of a continent supergroup. The rowspan for each
city group refers to the number of normal grid columns that group spans, so in this case the grid would be expected to have a
total of 12 rows:
[
{
width: 90,
items: [
{header: 'England', rowspan: 5},
{header: 'USA', rowspan: 3}
]
},
{
width: 50,
items: [
{header: 'London', rowspan: 2},
{header: 'Cambridge', rowspan: 3},
{header: 'Palo Alto', rowspan: 3}
]
}
]
In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country ->
State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure.Returns the total width of all row headers as specified by getRowHeadersCalled by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provides
the column hide/show functionality based on the check state of the menu item. A different implementation can be provided
if needed.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRefreshs the grid UIRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Scrolls the grid to the topSets the title text in the top left segment of the PivotGridViewSuspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)A grouping container for Ext.form.Radio controls.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs CheckboxGroup's validations and returns an array of any errors. The only error by default
is if allowBlank is set to true and no items are checked.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the selected Ext.form.Radio in the group, if it exists.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Sets the checked radio in the group.Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Set the value(s) of an item or items
in the group. Examples illustrating how this method may be called:
// call with name and value
myCheckboxGroup.setValue('cb-col-1', true);
// call with an array of boolean values
myCheckboxGroup.setValue([true, false, false]);
// call with an object literal specifying item:value pairs
myCheckboxGroup.setValue({
'cb-col-2': false,
'cb-col-3': true
});
// use comma separated string to set items with name to true (checked)
myCheckboxGroup.setValue('cb-col-1,cb-col-3');
See Ext.form.Checkbox.setValue for additional information.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt
browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
that should only run after some user feedback from the MessageBox, you must use a callback function
(see the function parameter for show for more details).
Example usage:
// Basic alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');
// Prompt for user data and process the result using a callback:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
if (btn == 'ok'){
// process text value and close...
}
});
// Show a dialog using config options:
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
fn: processResult,
animEl: 'elId',
icon: Ext.MessageBox.QUESTION
});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).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).Returns a reference to the underlying Ext.Window elementHides the message box if it is displayedReturns true if the message box is currently displayedDisplays a message box with a progress bar. This message box has no buttons and is not closeable by
the user. You are responsible for updating the progress bar as needed via Ext.MessageBox.updateProgress
and closing the message box when the process is complete.Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
The prompt can be a single-line or multi-line textbox. 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 (could also be the top-right
close button) and the text that was entered will be passed as the two parameters to the callback.Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default
styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
to clear any existing icon. This method must be called before the MessageBox is shown.
The following built-in icon classes are supported, but you can also pass in a custom class name:
Ext.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
Ext.MessageBox.ERROR
Displays a new message box, or reinitializes an existing message box, based on the config options
passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
although those calls are basic shortcuts and do not support all of the config options allowed here.Updates a progress-style message box's text and progress bar. Only relevant on message boxes
initiated via Ext.MessageBox.progress or Ext.MessageBox.wait,
or by calling Ext.MessageBox.show with progress: true.Updates the message box body textDisplays a message box with an infinitely auto-updating progress bar. This can be used to block user
interaction while waiting for a long-running process to complete that does not have defined intervals.
You are responsible for closing the message box when the process is complete.A standard tooltip implementation for providing additional information when hovering over a target element.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHides this tooltip if visible.Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Shows this tooltip at the current event target XY position.Shows this tip at the specified XY position. Example usage:
// Show the tip at x:50 and y:100
tip.showAt([50,100]);Experimental. Shows this tip at a position relative to another element using a standard Ext.Element.alignTo
anchor position value. Example usage:
// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');
// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A wrapper class which can be applied to any element. Fires a "click" event while the
mouse is pressed. The interval between firings may be specified in the config but
defaults to 20 milliseconds.
Optionally, a CSS class may be applied to the element during the time it is pressed.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Disables the repeater and stops events from firing.Enables the repeater and allows events to fire.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Adds a menu item that contains a checkbox by default, but can also be part of a radio group.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.A function that handles the checkchange event. The function is undefined by default, but if an implementation
is provided, it will be called automatically when the checkchange event fires.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Set the checked state of this itemConvenience function for setting disabled/enabled by boolean.Sets the function that will handle click events for this item (equivalent to passing in the handler
config property). If an existing handler is already registered, it will be unregistered for you.Sets the CSS class to apply to the item's icon elementSets the text to display in this menu itemConvenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.Panel is a container that has specific functionality and structural components that make
it the perfect building block for application-oriented user interfaces.
Panels are, by virtue of their inheritance from Ext.Container, capable
of being configured with a layout, and containing child Components.
When either specifying child items of a Panel, or dynamically adding Components
to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
those child elements need to be sized using one of Ext's built-in layout schemes. By
default, Panels use the ContainerLayout scheme. This simply renders
child components, appending them one after the other inside the Container, and does not apply any sizing
at all.
A Panel may also contain bottom and top toolbars, along with separate
header, footer and body sections (see frame for additional
information).
Panel also provides built-in expandable and collapsible behavior, along with
a variety of prebuilt tool buttons that can be wired up to provide other customized
behavior. Panels can be easily dropped into any Container or layout, and the
layout and rendering pipeline is completely managed by the framework.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Supporting Class for Ext.Direct (not intended to be used directly).Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodesClears the current filter. Note: with the "remove" option
set a filter cannot be cleared.Filter the data by a specific attribute.Filter by a function. The passed function will be called with each
node in the tree (or from the startNode). If the function returns true, the node is kept
otherwise it is filtered. If a node is filtered, its children are also filtered.Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage:
new Ext.Slider({
renderTo: Ext.getBody(),
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100
});
Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
new Ext.Slider({
renderTo: Ext.getBody(),
width: 200,
values: [25, 50, 75],
minValue: 0,
maxValue: 100,
//this defaults to true, setting to false allows the thumbs to pass each other
constrainThumbs: false
});
Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Creates a new thumb and adds it to the sliderApply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the current value of the sliderReturns an array of values - one for the location of each thumbGets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the maximum value for the slider instance. If the current value is more than the
maximum value, the current value will be changed.Sets the minimum value for the slider instance. If the current value is less than the
minimum value, the current value will be changed.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Programmatically sets the value of the Slider. Ensures that the value is constrained within
the minValue and maxValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Synchronizes the thumb position to the proper proportion of the total component width based
on the current slider value. This will be called automatically when the Slider
is resized by a layout, but if it is rendered auto width, this method can be called from
another resize handler to sync the Slider if necessary.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A Column definition class which renders a passed date according to the default locale, or a configured
format. See the xtype config option of Ext.list.Column
for more details.Utility class for managing and interacting with cookies.Removes a cookie with the provided name from the browser
if found by setting its expiration date to sometime in the past.Retrieves cookies that are accessible by the current page. If a cookie
does not exist, get() returns null. The following
example retrieves the cookie called "valid" and stores the String value
in the variable validStatus.
var validStatus = Ext.util.Cookies.get("valid");Create a cookie with the specified name and value. Additional settings
for the cookie may be optionally specified (for example: expiration,
access restriction, SSL).A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
handler for each icon. Example usage:
new Ext.grid.GridPanel({
store: myStore,
columns: [
{
xtype: 'actioncolumn',
width: 50,
items: [
{
icon : 'sell.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
},
{
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
}
}
]
}
//any other columns here
]
});
The action column can be at any index in the columns array, and a grid can have any number of
action columns. Returns the editor defined for this column that was created to wrap the Field
used to edit the cell.Sets a new editor for this column.A Column definition class which renders a numeric data field according to a format string. See the
xtype config option of Ext.list.Column for more details.A specialized panel intended for use as an application window. Windows are floated, resizable, and
draggable by default. Windows can be maximized to fill the viewport,
restored to their prior size, and can be minimized.
Windows can also be linked to a Ext.WindowGroup or managed by the Ext.WindowMgr to provide
grouping, activation, to front, to back and other application-specific behavior.
By default, Windows will be rendered to document.body. To constrain a Window to another element
specify renderTo.
Note: By default, the close header tool destroys the Window resulting in
destruction of any child Components. This makes the Window object, and all its descendants unusable. To enable
re-use of a Window, use closeAction: 'hide'.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Aligns the window to the specified elementAnchors this window to another element and realigns it when the window is resized or scrolled.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Centers this window in the viewportRemoves any existing anchor from this window. See anchorTo.Clone the current component using the original config values passed into this instance by default.Closes the Window, removes it from the DOM, destroys
the Window 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 not affected by the closeAction setting which
only affects the action triggered when clicking the 'close' tool in the header.
To hide the Window without destroying it, call hide.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Focuses the window. If a defaultButton is set, it will receive focus, otherwise the
window itself will receive focus.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHides the window, setting it to invisible and applying negative offsets.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Fits the window within its current container and automatically replaces
the 'maximize' tool button with the 'restore' tool button.
Also see toggleMaximize.Placeholder method for minimizing the window. By default, this method simply fires the minimize event
since the behavior of minimizing a window is application-specific. To implement custom minimize behavior,
either the minimize event can be handled or this method can be overridden.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Restores a maximized window back to its original
size and position prior to being maximized and also replaces
the 'restore' tool button with the 'maximize' tool button.
Also see toggleMaximize.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also
fires the activate or deactivate event depending on which action occurred. This method is
called internally by Ext.WindowMgr.Sets the target element from which the window should animate while opening.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Sends this window to the back of (lower z-index than) any other visible windowsBrings this window to the front of any other visible windowsShortcut for performing an expand or collapse based on the current state of the panel.A shortcut method for toggling between maximize and restore based on the current maximized
state of the window.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A class which handles loading of data from a server into the Fields of an Ext.form.BasicForm.
Instances of this class are only created by a Form when
loading.
Response Packet Criteria
A response packet must contain:
success property : Boolean
data property : Object
The data property contains the values of Fields to load.
The individual value object for each Field is passed to the Field's
setValue method.
JSON Packets
By default, response packets are assumed to be JSON, so for the following form load call:var myFormPanel = new Ext.form.FormPanel({
title: 'Client and routing info',
items: [{
fieldLabel: 'Client',
name: 'clientName'
}, {
fieldLabel: 'Port of loading',
name: 'portOfLoading'
}, {
fieldLabel: 'Port of discharge',
name: 'portOfDischarge'
}]
});
myFormPanel.getForm().load({
url: '/getRoutingInfo.php',
params: {
consignmentRef: myConsignmentRef
},
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
a success response packet may look like this:{
success: true,
data: {
clientName: "Fred. Olsen Lines",
portOfLoading: "FXT",
portOfDischarge: "OSL"
}
}
while a failure response packet may look like this:{
success: false,
errorMessage: "Consignment reference not found"
}
Other data may be placed into the response for processing the Form's
callback or event handler methods. The object decoded from this JSON is available in the
result property.Abstract base class for state provider implementations. This class provides methods
for encoding and decoding typed variables including dates and defines the
Provider interface.Clears a value from the stateDecodes a string previously encoded with encodeValue.Encodes a value including type information. Decode with decodeValue.Returns the current value for a keySets the value for a keySupporting Class for Ext.list.ListViewAdds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)A specialized store implementation that provides for grouping records by one of the available fields. This
is usually used in conjunction with an Ext.grid.GroupingView to provide the data model for
a grouped GridPanel.
Internally, GroupingStore is simply a normal Store with multi sorting enabled from the start. The grouping field
and direction are always injected as the first sorter pair. GroupingView picks up on the configured groupField and
builds grid rows appropriately.Add Records to the Store and fires the add event. To add Records
to the store from a remote source use load({add:true}).
See also recordType and insert.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.(Local sort only) Inserts the passed Record into the Store at the index where it
should go based on the current sort information.Revert to a view of the Record cache with no filtering applied.Clears any existing grouping and refreshes the data using the default sort.Collects unique values for a particular dataIndex from this store.Commit 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.Destroys the store.Calls the specified function for each of the Records in the cache.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the records by a specified property. Alternatively, pass an array of filter
options to filter by more than one property.
Single filter example:
store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
Multiple filter example:
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.Finds the index of the first matching Record in this store by a specific field value.Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.Finds the index of the first matching Record in this store by a specific field value.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the Record at the specified index.Get the Record with the specified id.Gets the number of cached records.
If using paging, this may not be the total size of the dataset. If the data object
used by the Reader contains the dataset size, then the getTotalCount function returns
the dataset size. Note: see the Important note in load.Gets all records modified since the last commit. Modified records are
persisted across load operations (e.g., during paging). Note: deleted records are not
included. See also pruneModifiedRecords and
Ext.data.RecordmarkDirty..Returns a range of Records between specified indices.Returns an object describing the current sort state of this Store.Gets the total number of records in the dataset as returned by the server.
If using paging, for this to be accurate, the data object used by the Reader
must contain the dataset size. For remote data sources, the value for this property
(totalProperty for JsonReader,
totalRecords for XmlReader) shall be returned by a query on the server.
Note: see the Important note in load.Groups the data by the specified field.Checks to see if this object has any listeners for a specified eventGet the index within the cache of the passed Record.Get the index within the cache of the Record with the passed id.Inserts Records into the Store at the given index and fires the add event.
See also add and addSorted.Returns true if this store is currently filteredLoads the Record cache from the configured proxy using the configured reader.
Notes:
Important: loading is asynchronous! This call will return before the new data has been
loaded. To perform any post-processing where information from the load call is required, specify
the callback function to be called, or use a a 'load' event handler.
If using remote paging, the first load call must specify the start and limit
properties in the options.params property to establish the initial position within the
dataset, and the number of Records to cache on each read from the Proxy.
If using remote sorting, the configured sortInfo
will be automatically included with the posted parameters according to the specified
paramNames.
Loads data from a passed data block and fires the load event. A Reader
which understands the format of the data must have been configured in the constructor.Sorts the contents of this store by multiple field/direction sorters. This is called internally by sort
and would not usually be called manually.
Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
if remoteSort is used.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectQuery the records by a specified property.Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.Reject outstanding changes on all modified records.Relays selected events from the specified Observable as if the events were fired by this.Reloads the Record cache from the configured Proxy using the configured
Reader and the options from the last load operation
performed.
Note: see the Important note in load.Remove Records from the Store and fires the remove event.Remove all Records from the Store and fires the clear event.Remove a Record from the Store at the specified index. Fires the remove event.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Saves all pending changes to the store. If the commensurate Ext.data.Api.actions action is not configured, then
the configured url will be used.
change url
--------------- --------------------
removed records Ext.data.Api.actions.destroy
phantom records Ext.data.Api.actions.create
modified records Ext.data.Api.actions.update
Set the value for a property name in this store's baseParams. Usage:myStore.setBaseParam('foo', {bar:3});Sets the default sort column and order to be used by the next load operation.Sorts the store contents by a single field and direction. This is called internally by sort and would
not usually be called manuallySort the Records.
If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
sorting is used, the cache is sorted internally. See also remoteSort and paramNames.
This function accepts two call signatures - pass in a field name as the first argument to sort on a single
field, or pass in an array of sort configuration objects to sort by multiple fields.
Single sort example:
store.sort('name', 'ASC');
Multi sort example:
store.sort([
{
field : 'name',
direction: 'ASC'
},
{
field : 'salary',
direction: 'DESC'
}
], 'ASC');
In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
above. Any number of sort configs can be added.Sums the value of property for each record between start
and end and returns the result.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)DescriptionChecks whether or not the current number is within a desired range. If the number is already within the
range it is returned, otherwise the min or max value is returned depending on which side of the range is
exceeded. Note that this method returns the constrained value but does not change the current number.The default global window group that is available automatically. To have more than one group of windows
with separate z-order stacks, create additional instances of Ext.WindowGroup as needed.Brings the specified window to the front of any other active windows in this WindowGroup.Executes the specified function once for every window in this WindowGroup, passing each
window as the only parameter. Returning false from the function will stop the iteration.Gets a registered window by id.Gets the currently-active window in this WindowGroup.Returns zero or more windows in this WindowGroup using the custom search function passed to this method.
The function should accept a single Ext.Window reference as its only argument and should
return true if the window matches the search criteria, otherwise it should return false.Hides all windows in this WindowGroup.Registers a Window with this WindowManager. This should not
need to be called under normal circumstances. Windows are automatically registered
with a manager at construction time.
Where this may be useful is moving Windows between two WindowManagers. For example,
to bring the Ext.MessageBox dialog under the same manager as the Desktop's
WindowManager in the desktop sample app:
var msgWin = Ext.MessageBox.getDialog();
MyDesktop.getDesktop().getManager().register(msgWin);
Sends the specified window to the back of other active windows in this WindowGroup.Unregisters a Window from this WindowManager. This should not
need to be called. Windows are automatically unregistered upon destruction.
See register.BarSeries class for the charts widget.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Ext.data.DataWriter facilitates create, update, and destroy actions between
an Ext.data.Store and a server-side framework. A Writer enabled Store will
automatically manage the Ajax requests to perform CRUD actions on a Store.
Ext.data.DataWriter is an abstract base class which is intended to be extended
and should not be created directly. For existing implementations, see
Ext.data.JsonWriter.
Creating a writer is simple:
var writer = new Ext.data.JsonWriter({
encode: false // <--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust
});
Same old JsonReader as Ext-2.x:
var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]);
The proxy for a writer enabled store can be configured with a simple url:
// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'app.php/users' // <--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb)
});
For finer grained control, the proxy may also be configured with an API:
// Maximum flexibility with the API-configuration
var proxy = new Ext.data.HttpProxy({
api: {
read : 'app.php/users/read',
create : 'app.php/users/create',
update : 'app.php/users/update',
destroy : { // <--- Supports object-syntax as well
url: 'app.php/users/destroy',
method: "DELETE"
}
}
});
Pulling it all together into a Writer-enabled Store:
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
writer: writer,
autoLoad: true,
autoSave: true // -- Cell-level updates.
});
Initiating write-actions automatically, using the existing Ext2.0 Store/Record API:
var rec = store.getAt(0);
rec.set('email', 'foo@bar.com'); // <--- Immediately initiates an UPDATE action through configured proxy.
store.remove(rec); // <---- Immediately initiates a DESTROY action through configured proxy.
For record/batch updates, use the Store-configuration autoSave:false
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
writer: writer,
autoLoad: true,
autoSave: false // -- disable cell-updates
});
var urec = store.getAt(0);
urec.set('email', 'foo@bar.com');
var drec = store.getAt(1);
store.remove(drec);
// Push the button!
store.save();Compiles a Store recordset into a data-format defined by an extension such as Ext.data.JsonWriter or Ext.data.XmlWriter in preparation for a server-write action. The first two params are similar similar in nature to Ext.apply,
Where the first parameter is the receiver of paramaters and the second, baseParams, the source.abstract method meant to be overridden by all DataWriter extensions. It's the extension's job to apply the "data" to the "params".
The data-object provided to render is populated with data according to the meta-info defined in the user's DataReader config,Converts a Hashed Ext.data.Record to fields-array array suitable
for encoding to xml via XTemplate, eg:
<tpl for="."><{name}>{value}</{name}</tpl>
eg, non-phantom:
{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]
Phantom records will have had their idProperty omitted in toHash if determined to be auto-generated.
Non AUTOINCREMENT pks should have been protected.Converts a Record to a hash, taking into account the state of the Ext.data.Record along with configuration properties
related to its rendering, such as writeAllFields, phantom, getChanges and
idPropertyA simple Request class used internally to the data package to provide more generalized remote-requests
to a DataProxy.
TODO Not yet implemented. Implement in Ext.data.Store#executeLayout manager used by Ext.Toolbar. This is highly specialised for use by Toolbars and would not
usually be used by any other class.Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)A template class that supports advanced functionality like:
Autofilling arrays using templates and sub-templates
Conditional processing with basic comparison operators
Basic math function support
Execute arbitrary inline code with special built-in template variables
Custom member functions
Many special tags and built-in operators that aren't defined as part of
the API, but are supported in the templates that can be created
XTemplate provides the templating mechanism built into:
Ext.DataView
Ext.ListView
Ext.form.ComboBox
Ext.grid.TemplateColumn
Ext.grid.GroupingView
Ext.menu.Item
Ext.layout.MenuLayout
Ext.ColorPalette
For example usage see the constructor.Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.Applies the supplied values to the template and appends
the new node(s) to the specified el.
For example usage see the constructor.Alias for applyTemplate
Returns an HTML fragment of this template with the specified values applied.Returns an HTML fragment of this template with the specified values applied.Compile the template to a function for optimized performance. Recommended if the template will be used frequently.Applies the supplied values to the template and inserts the new node(s) after el.Applies the supplied values to the template and inserts the new node(s) before el.Applies the supplied values to the template and inserts the new node(s) as the first child of el.Applies the supplied values to the template and overwrites the content of el with the new node(s).This is a utility class that can be passed into a Ext.grid.ColumnModel as a column config that provides
an automatic row numbering column.
Usage:
// This is a typical column config with the first column providing row numbers
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Name", width: 80, sortable: true},
{header: "Code", width: 50, sortable: true},
{header: "Description", width: 200, sortable: true}
]);Provides a date input field with a Ext.DatePicker dropdown and automatic date validation.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs all of NumberFields validations and returns an array of any errors. Note that this first
runs TextField's validations, so the returned array is an amalgamation of all field errors.
The additional validation checks are testing that the date format is valid, that the chosen
date is within the min and max date constraints set, that the date chosen is not in the disabledDates
regex and that the day chosed is not one of the disabledDays.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the current date value of the date field.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Replaces any existing disabled dates with new values and refreshes the DatePicker.Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.Allow or prevent the user from directly editing the field text. If false is passed,
the user will only be able to modify the field using the trigger. Will also add
a click event to the text field which will call the trigger. This method
is the runtime equivalent of setting the editable config option at config time.Sets the height of the component. This method fires the resize event.Changes the hidden status of the trigger.Replaces any existing maxValue with the new value and refreshes the DatePicker.Replaces any existing minValue with the new value and refreshes the DatePicker.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Setting this to true will supersede settings editable and hideTrigger.
Setting this to false will defer back to editable and hideTrigger. This method
is the runtime equivalent of setting the readOnly config option at config time.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the value of the date field. You can pass a date object or any string that can be
parsed into a valid date, using format as the date format, according
to the same rules as Date.parseDate (the default format used is "m/d/Y").
Usage:
//All of these calls set the same date value (May 4, 2006)
//Pass a date object:
var dt = new Date('5/4/2006');
dateField.setValue(dt);
//Pass a date string (default format):
dateField.setValue('05/04/2006');
//Pass a date string (custom format):
dateField.format = 'Y-m-d';
dateField.setValue('2006-05-04');Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.A static Ext.util.TaskRunner instance that can be used to start and stop arbitrary tasks. See
Ext.util.TaskRunner for supported methods and task config properties.
// Start a simple clock task that updates a div once per second
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000 //1 second
}
Ext.TaskMgr.start(task);
See the start method for details about how to configure a task object.Starts a new task.Stops an existing running task.Stops all tasks that are currently running.This class provides a container DD instance that allows dropping on multiple child target nodes.
By default, this class requires that child nodes accepting drop are registered with Ext.dd.Registry.
However a simpler way to allow a DropZone to manage any number of target elements is to configure the
DropZone with an implementation of getTargetFromEvent which interrogates the passed
mouse event to see if it has taken place within an element, or class of elements. This is easily done
by using the event's getTarget method to identify a node based on a
Ext.DomQuery selector.
Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
a drop target, that target is passed as the first parameter to onNodeEnter, onNodeOver,
onNodeOut, onNodeDrop. You may configure the instance of DropZone with implementations
of these methods to provide application-specific behaviour for these events to update both
application state, and UI state.
For example to make a GridPanel a cooperating target with the example illustrated in
DragZone, the following technique might be used:myGridPanel.on('render', function() {
myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
// If the mouse is over a grid row, return that node. This is
// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
getTargetFromEvent: function(e) {
return e.getTarget(myGridPanel.getView().rowSelector);
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addClass('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeClass('my-row-highlight-class');
},
// While over a target node, return the default drop allowed class which
// places a "tick" icon into the drag proxy.
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
// On node drop we can interrogate the target to find the underlying
// application object that is the real target of the dragged data.
// In this case, it is a Record in the GridPanel's Store.
// We can use the data set up by the DragZone's getDragData method to read
// any data we decided to attach in the DragZone's getDragData method.
onNodeDrop : function(target, dd, e, data){
var rowIndex = myGridPanel.getView().findRowIndex(target);
var r = myGridPanel.getStore().getAt(rowIndex);
Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
' on Record id ' + r.id);
return true;
}
});
}
See the DragZone documentation for details about building a DragZone which
cooperates with this DropZone.Add 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.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.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");
}
});Returns a reference to the linked elementReturns a custom data object associated with the DOM node that is the target of the event. By default
this looks up the event target in the Ext.dd.Registry, although you can override this method to
provide your own custom lookup.Sets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Lock this instanceThe function a Ext.dd.DragSource calls once to notify this drop zone that the dragged item has
been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
is a node registered for that event, it will delegate to onNodeDrop for node-specific handling,
otherwise it will call onContainerDrop.The function a Ext.dd.DragSource calls once to notify this drop zone that the source is now over
the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
you should override this method and provide a custom implementation.The function a Ext.dd.DragSource calls once to notify this drop zone that the source has been dragged
out of the zone without dropping. If the drag source is currently over a registered node, the notification
will be delegated to onNodeOut for node-specific handling, otherwise it will be ignored.The function a Ext.dd.DragSource calls continuously while it is being dragged over the drop zone.
This method will be called on every mouse movement while the drag source is over the drop zone.
It will call onNodeOver while the drag source is over a registered node, and will also automatically
delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
registered nodes (onNodeEnter, onNodeOut). If the drag source is not currently over a
registered node, it will call onContainerOver.Override the onAvailable method to do what is needed after the initial
position was determined.Called when the DropZone determines that a Ext.dd.DragSource has been dropped on it,
but not on any of its registered drop nodes. The default implementation returns false, so it should be
overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
be able to accept drops. It should return true when valid so that the drag source's repair action does not run.Called while the DropZone determines that a Ext.dd.DragSource is being dragged over it,
but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
it should be overridden to provide the proper feedback if necessary.Called when the DropZone determines that a Ext.dd.DragSource has been dropped onto
the drop node. The default implementation returns false, so it should be overridden to provide the
appropriate processing of the drop event and return true so that the drag source's repair action does not run.Called when the DropZone determines that a Ext.dd.DragSource has entered a drop node
that has either been registered or detected by a configured implementation of getTargetFromEvent.
This method has no default implementation and should be overridden to provide
node-specific processing if necessary.Called when the DropZone determines that a Ext.dd.DragSource has been dragged out of
the drop node without dropping. This method has no default implementation and should be overridden to provide
node-specific processing if necessary.Called while the DropZone determines that a Ext.dd.DragSource is over a drop node
that has either been registered or detected by a configured implementation of getTargetFromEvent.
The default implementation returns this.dropNotAllowed, so it should be
overridden to provide the proper feedback.Remove's this instance from the supplied interaction groupConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.toString methodUnlock this instaceRemove all drag and drop hooks for this elementMultiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
support for auto-sizing.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
This only takes effect if grow = true, and fires the autosize event if the height changes.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Validates a value according to the field's validation rules and returns an array of errors
for any failing validations. Validation rules are processed in the following order:
1. Field specific validator
A validator offers a way to customize and reuse a validation specification.
If a field is configured with a validator
function, it will be passed the current field value. The validator
function is expected to return either:
Boolean true if the value is valid (validation continues).
a String to represent the invalid message if invalid (validation halts).
2. Basic Validation
If the validator has not halted validation,
basic validation proceeds as follows:
allowBlank : (Invalid message =
emptyText)
Depending on the configuration of allowBlank, a
blank field will cause validation to halt at this step and return
Boolean true or false accordingly.
minLength : (Invalid message =
minLengthText)
If the passed value does not satisfy the minLength
specified, validation halts.
maxLength : (Invalid message =
maxLengthText)
If the passed value does not satisfy the maxLength
specified, validation halts.
3. Preconfigured Validation Types (VTypes)
If none of the prior validation steps halts validation, a field
configured with a vtype will utilize the
corresponding VTypes validation function.
If invalid, either the field's vtypeText or
the VTypes vtype Text property will be used for the invalid message.
Keystrokes on the field will be filtered according to the VTypes
vtype Mask property.
4. Field specific regex test
If none of the prior validation steps halts validation, a field's
configured regex test will be processed.
The invalid message for this test is configured with
regexText.
Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
Radio grouping is handled automatically by the browser if you give each radio in a group the same name.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsIf this radio is part of a group, it will return the selected valueGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the checked state of the checkbox.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets either the checked/unchecked status of this Radio, or, if a string value
is passed, checks a sibling Radio of the same name whose value is the value specified.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Adapter that moves the splitter element to align with the resized sizing element.
Used with an absolute positioned SplitBar.Called before drag operations to get the current size of the resizing element.Called after drag operations to set the size of the resizing element.DataWriter extension for writing an array or single Ext.data.Record object(s) in preparation for executing a remote CRUD action.Compiles a Store recordset into a data-format defined by an extension such as Ext.data.JsonWriter or Ext.data.XmlWriter in preparation for a server-write action. The first two params are similar similar in nature to Ext.apply,
Where the first parameter is the receiver of paramaters and the second, baseParams, the source.Implements abstract Ext.data.DataWriter#createRecordImplements abstract Ext.data.DataWriter#destroyRecordThis method should not need to be called by application code, however it may be useful on occasion to
override it, or augment it with an interceptor or sequence.
The provided implementation encodes the serialized data representing the Store's modified Records into the Ajax request's
params according to the encode setting.Converts a Hashed Ext.data.Record to fields-array array suitable
for encoding to xml via XTemplate, eg:
<tpl for="."><{name}>{value}</{name}</tpl>
eg, non-phantom:
{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]
Phantom records will have had their idProperty omitted in toHash if determined to be auto-generated.
Non AUTOINCREMENT pks should have been protected.Converts a Record to a hash, taking into account the state of the Ext.data.Record along with configuration properties
related to its rendering, such as writeAllFields, phantom, getChanges and
idPropertyImplements abstract Ext.data.DataWriter#updateRecordThis is the layout style of choice for creating structural layouts in a multi-column format where the width of
each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
This class is intended to be extended or created via the layout:'column' Ext.Container.layout config,
and should generally not need to be created directly via the new keyword.
ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
specific config property of columnWidth that can be included in the config of any panel added to it. The
layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
less than 1 (e.g., .25).
The basic rules for specifying column widths are pretty simple. The logic makes two passes through the
set of contained panels. During the first layout pass, all panels that either have a fixed width or none
specified (auto) are skipped, but their widths are subtracted from the overall container width. During the second
pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
the total remaining container width. In other words, percentage width panels are designed to fill the space
left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any number of columns
with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
layout may not render as expected. Example usage:
// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
title: 'Column Layout - Percentage Only',
layout:'column',
items: [{
title: 'Column 1',
columnWidth: .25
},{
title: 'Column 2',
columnWidth: .6
},{
title: 'Column 3',
columnWidth: .15
}]
});
// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
title: 'Column Layout - Mixed',
layout:'column',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
columnWidth: .8
},{
title: 'Column 3',
columnWidth: .2
}]
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)This layout allows you to easily render content into an HTML table. The total number of columns can be
specified, and rowspan and colspan can be used to create complex layouts within the table.
This class is intended to be extended or created via the layout:'table' Ext.Container.layout config,
and should generally not need to be created directly via the new keyword.
Note that when creating a layout via config, the layout-specific config properties must be passed in via
the Ext.Container.layoutConfig object which will then be applied internally to the layout. In the
case of TableLayout, the only valid layout config property is columns. However, the items added to a
TableLayout can supply the following table-specific config properties:
rowspan Applied to the table cell containing the item.
colspan Applied to the table cell containing the item.
cellId An id applied to the table cell containing the item.
cellCls A CSS class name added to the table cell containing the item.
The basic concept of building up a TableLayout is conceptually very similar to building up a standard
HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes
specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the
total column count in the layoutConfig and start adding panels in their natural order from left to right,
top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans,
how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add
up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
// This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included. The basic layout will be:
// +--------+-----------------+
// | A | B |
// | |--------+--------|
// | | C | D |
// +--------+--------+--------+
var table = new Ext.Panel({
title: 'Table Layout',
layout:'table',
defaults: {
// applied to each contained panel
bodyStyle:'padding:20px'
},
layoutConfig: {
// The total column count must be specified here
columns: 3
},
items: [{
html: '<p>Cell A content</p>',
rowspan: 2
},{
html: '<p>Cell B content</p>',
colspan: 2
},{
html: '<p>Cell C content</p>',
cellCls: 'highlight'
},{
html: '<p>Cell D content</p>'
}]
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Store Error extension.getMessagegetNametoJsonThis class encapsulates the field definition information specified in the field definition objects
passed to Ext.data.Record.create.
Developers do not need to instantiate this class. Instances are created by Ext.data.Record.create
and cached in the fields property of the created Record constructor's prototype.A split button that provides a built-in dropdown arrow that can fire an event separately from the default
click event of the button. Typically this would be used to display a dropdown menu that provides additional
options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage:
// display a dropdown menu:
new Ext.SplitButton({
renderTo: 'button-ct', // the container id
text: 'Options',
handler: optionsHandler, // handle a click on the button itself
menu: new Ext.menu.Menu({
items: [
// these items will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: item1Handler},
{text: 'Item 2', handler: item2Handler}
]
})
});
// Instead of showing a menu, you provide any type of custom
// functionality you want when the dropdown arrow is clicked:
new Ext.SplitButton({
renderTo: 'button-ct',
text: 'Options',
handler: optionsHandler,
arrowHandler: myCustomHandler
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Gets the pressed button in the passed group or nullReturns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.This method returns an Array which provides substitution parameters for the Template used
to create this Button's DOM structure.
Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
own implementation of this method.
The default implementation which provides data for the default template returns an Array containing the
following items:
The <button>'s type
A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
The cls CSS class name applied to the button's wrapping <table> element.
The Component id which is applied to the button's wrapping <table> element.
Gets the text for this ButtonGets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventReturns true if the button has a menu and it is visibleHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Hide this button's menu (if it has one)Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets this button's arrow click handler.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Assigns this Button's click handlerSets the height of the component. This method fires the resize event.Sets the background image (inline style) of the button. This method also changes
the value of the icon config internally.Sets the CSS class that provides a background image to use as the button's icon. This method also changes
the value of the iconCls config internally.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets this Button's textSets the tooltip for this Button.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Show this button's menu (if it has one)Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.If a state it passed, it becomes the pressed state otherwise the current state is toggled.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Resizes and repositions each child componentThe date parsing and formatting syntax contains a subset of
PHP's date() function, and the formats that are
supported will provide results equivalent to their PHP versions.
The following is a list of all currently supported formats:
Format Description Example returned values
------ ----------------------------------------------------------------------- -----------------------
d Day of the month, 2 digits with leading zeros 01 to 31
D A short textual representation of the day of the week Mon to Sun
j Day of the month without leading zeros 1 to 31
l A full textual representation of the day of the week Sunday to Saturday
N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday)
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday)
z The day of the year (starting from 0) 0 to 364 (365 in leap years)
W ISO-8601 week number of year, weeks starting on Monday 01 to 53
F A full textual representation of a month, such as January or March January to December
m Numeric representation of a month, with leading zeros 01 to 12
M A short textual representation of a month Jan to Dec
n Numeric representation of a month, without leading zeros 1 to 12
t Number of days in the given month 28 to 31
L Whether it's a leap year 1 if it is a leap year, 0 otherwise.
o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004
belongs to the previous or next year, that year is used instead)
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03
a Lowercase Ante meridiem and Post meridiem am or pm
A Uppercase Ante meridiem and Post meridiem AM or PM
g 12-hour format of an hour without leading zeros 1 to 12
G 24-hour format of an hour without leading zeros 0 to 23
h 12-hour format of an hour with leading zeros 01 to 12
H 24-hour format of an hour with leading zeros 00 to 23
i Minutes, with leading zeros 00 to 59
s Seconds, with leading zeros 00 to 59
u Decimal fraction of a second Examples:
(minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or
100 (i.e. 0.100s) or
999 (i.e. 0.999s) or
999876543210 (i.e. 0.999876543210s)
O Difference to Greenwich time (GMT) in hours and minutes Example: +1030
P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00
T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ...
Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400
c ISO 8601 date
Notes: Examples:
1) If unspecified, the month / day defaults to the current month / day, 1991 or
the time defaults to midnight, while the timezone defaults to the 1992-10 or
browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
and minutes. The "T" delimiter, seconds, milliseconds and timezone 1994-08-19T16:20+01:00 or
are optional. 1995-07-18T17:21:28-02:00 or
2) The decimal fraction of a second, if specified, must contain at 1996-06-17T18:22:29.98765+03:00 or
least 1 digit (there is no limit to the maximum number 1997-05-16T19:23:30,12345-0400 or
of digits allowed), and may be delimited by either a '.' or a ',' 1998-04-15T20:24:31.2468Z or
Refer to the examples on the right for the various levels of 1999-03-14T20:24:32Z or
date-time granularity which are supported, or see 2000-02-13T21:25:33
http://www.w3.org/TR/NOTE-datetime for more info. 2001-01-12 22:26:34
U Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) 1193432466 or -2138434463
M$ Microsoft AJAX serialized dates \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
\/Date(1238606590509+0800)\/
Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
// Sample date:
// 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
document.write(dt.format('Y-m-d')); // 2007-01-10
document.write(dt.format('F j, Y, g:i a')); // January 10, 2007, 3:05 pm
document.write(dt.format('l, \\t\\he jS \\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM
Here are some standard date/time patterns that you might find helpful. They
are not part of the source of Date.js, but to use them you can simply copy this
block of code into any script that is included after Date.js and they will also become
globally available on the Date object. Feel free to add or remove patterns as needed in your code.
Date.patterns = {
ISO8601Long:"Y-m-d H:i:s",
ISO8601Short:"Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d\\TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};
Example usage:
var dt = new Date();
document.write(dt.format(Date.patterns.ShortDate));
Developer-written, custom formats may be used by supplying both a formatting and a parsing function
which perform to specialized requirements. The functions are stored in parseFunctions and formatFunctions.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 = new Date('10/29/2006').add(Date.DAY, 5);
document.write(dt); //returns 'Fri Nov 03 2006 00:00:00'
// Negative values will be subtracted:
var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
// You can even chain several calls together in one line:
var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'Checks if this date falls on or between the given start and end dates.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)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);
document.write(orig); //returns 'Thu Oct 05 2006'!
//correct way:
var orig = new Date('10/1/2006');
var copy = orig.clone();
copy.setDate(5);
document.write(orig); //returns 'Thu Oct 01 2006'Formats a date given the supplied format string.Get the numeric day number of the year, adjusted for leap year.Get the number of days in the current month, adjusted for leap year.Returns the number of milliseconds between this date and dateGet the date of the first day of the month in which this date resides.Get the first day of the current month, adjusted for leap year. The returned value
is the numeric day index within the week (0-6) which can be used in conjunction with
the monthNames array to retrieve the textual day name.
Example:
var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'Get the offset from GMT of the current date (equivalent to the format specifier 'O').Get the date of the last day of the month in which this date resides.Get the last day of the current month, adjusted for leap year. The returned value
is the numeric day index within the week (0-6) which can be used in conjunction with
the monthNames array to retrieve the textual day name.
Example:
var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'Get the zero-based javascript month number for the given short/full month name.
Override this function for international dates.Get the short day name for the given day number.
Override this function for international dates.Get the short month name for the given month number.
Override this function for international dates.Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
Note: The date string returned by the javascript Date object's toString() method varies
between browsers (e.g. FF vs IE) and system region settings (e.g. IE in Asia vs IE in America).
For a given date string e.g. "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)",
getTimezone() first tries to get the timezone abbreviation from between a pair of parentheses
(which may or may not be present), failing which it proceeds to get the timezone abbreviation
from the GMT offset portion of the date string.Get the numeric ISO-8601 week number of the year.
(equivalent to the format specifier 'W', but without a leading zero).Checks if the current date is affected by Daylight Saving Time (DST).Checks if the current date falls within a leap year.Checks if the passed Date parameters will cause a javascript Date "rollover".Parses the passed string using the specified date format.
Note that this function expects normal calendar dates, meaning that months are 1-based (i.e. 1 = January).
The defaults hash will be used for any date value (i.e. year, month, day, hour, minute, second or millisecond)
which cannot be found in the passed string. If a corresponding default date value has not been specified in the defaults hash,
the current date's year, month, day or DST-adjusted zero-hour time value will be used instead.
Keep in mind that the input date string must precisely match the specified format string
in order for the parse operation to be successful (failed parse operations return a null value).
Example://dt = Fri May 25 2007 (current date)
var dt = new Date();
//dt = Thu May 25 2006 (today's month/day in 2006)
dt = Date.parseDate("2006", "Y");
//dt = Sun Jan 15 2006 (all date parts specified)
dt = Date.parseDate("2006-01-15", "Y-m-d");
//dt = Sun Jan 15 2006 15:20:01
dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");
// attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
dt = Date.parseDate("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns nullBase class for form fields that provides default event handling, sizing, value handling and other functionality.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Basic text field. Can be used as a direct replacement for traditional text inputs,
or as the base class for more sophisticated input controls (like Ext.form.TextArea
and Ext.form.ComboBox).
Validation
The validation procedure is described in the documentation for validateValue.
Alter Validation Behavior
Validation behavior for each field can be configured:
invalidText : the default validation message to
show if any validation step above does not provide a message when invalid
maskRe : filter out keystrokes before any validation occurs
stripCharsRe : filter characters after being typed in,
but before being validated
invalidClass : alternate style when invalid
validateOnBlur,
validationDelay, and
validationEvent : modify how/when validation is triggered
Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Validates a value according to the field's validation rules and returns an array of errors
for any failing validations. Validation rules are processed in the following order:
1. Field specific validator
A validator offers a way to customize and reuse a validation specification.
If a field is configured with a validator
function, it will be passed the current field value. The validator
function is expected to return either:
Boolean true if the value is valid (validation continues).
a String to represent the invalid message if invalid (validation halts).
2. Basic Validation
If the validator has not halted validation,
basic validation proceeds as follows:
allowBlank : (Invalid message =
emptyText)
Depending on the configuration of allowBlank, a
blank field will cause validation to halt at this step and return
Boolean true or false accordingly.
minLength : (Invalid message =
minLengthText)
If the passed value does not satisfy the minLength
specified, validation halts.
maxLength : (Invalid message =
maxLengthText)
If the passed value does not satisfy the maxLength
specified, validation halts.
3. Preconfigured Validation Types (VTypes)
If none of the prior validation steps halts validation, a field
configured with a vtype will utilize the
corresponding VTypes validation function.
If invalid, either the field's vtypeText or
the VTypes vtype Text property will be used for the invalid message.
Keystrokes on the field will be filtered according to the VTypes
vtype Mask property.
4. Field specific regex test
If none of the prior validation steps halts validation, a field's
configured regex test will be processed.
The invalid message for this test is configured with
regexText.
Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Provides a common registry of all menu items on a page so that they can be easily accessed by id.Returns a Ext.menu.Menu objectHides all menus that are currently visibleAdds a static text string to a menu, usually used as either a heading or group separator.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Sets the function that will handle click events for this item (equivalent to passing in the handler
config property). If an existing handler is already registered, it will be unregistered for you.Convenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.Ext.data.Api is a singleton designed to manage the data API including methods
for validating a developer's DataProxy API. Defines variables for CRUD actions
create, read, update and destroy in addition to a mapping of RESTful HTTP methods
GET, POST, PUT and DELETE to CRUD actions.Ext.data.Response
Experimental. Do not use directly.Returns the actual CRUD action KEY "create", "read", "update" or "destroy" from the supplied action-name. This method is used internally and shouldn't generally
need to be used directly. The key/value pair of Ext.data.Api.actions will often be identical but this is not necessarily true. A developer can override this naming
convention if desired. However, the framework internally calls methods based upon the KEY so a way of retreiving the the words "create", "read", "update" and "destroy" is
required. This method will cache discovered KEYS into the private validActions hash.Returns true if the supplied verb upon the supplied proxy points to a unique url in that none of the other api-actions
point to the same url. The question is important for deciding whether to insert the "xaction" HTTP parameter within an
Ajax request. This method is used internally and shouldn't generally need to be called directly.Returns true if supplied action-name is a valid API action defined in actions constantsReturns true if the supplied API is valid; that is, check that all keys match defined actions
otherwise returns an array of mistakes.This method is used internally by DataProxy and should not generally need to be used directly.
Each action of a DataProxy api can be initially defined as either a String or an Object. When specified as an object,
one can explicitly define the HTTP method (GET|POST) to use for each CRUD action. This method will prepare the supplied API, setting
each action to the Object form. If your API-actions do not explicitly define the HTTP method, the "method" configuration-parameter will
be used. If the method configuration parameter is not specified, POST will be used.
new Ext.data.HttpProxy({
method: "POST", // <-- default HTTP method when not specified.
api: {
create: 'create.php',
load: 'read.php',
save: 'save.php',
destroy: 'destroy.php'
}
});
// Alternatively, one can use the object-form to specify the API
new Ext.data.HttpProxy({
api: {
load: {url: 'read.php', method: 'GET'},
create: 'create.php',
destroy: 'destroy.php',
save: 'update.php'
}
});Prepares a supplied Proxy to be RESTful. Sets the HTTP method for each api-action to be one of
GET, POST, PUT, DELETE according to the defined restActions.The Store class encapsulates a client side cache of Record
objects which provide input data for Components such as the GridPanel,
the ComboBox, or the DataView.
Retrieving Data
A Store object may access a data object using:
configured implementation of DataProxy
data to automatically pass in data
loadData to manually pass in data
Reading Data
A Store object has no inherent knowledge of the format of the data object (it could be
an Array, XML, or JSON). A Store object uses an appropriate configured implementation
of a DataReader to create Record instances from the data
object.
Store Types
There are several implementations of Store available which are customized for use with
a specific DataReader implementation. Here is an example using an ArrayStore which implicitly
creates a reader commensurate to an Array data object.
var myStore = new Ext.data.ArrayStore({
fields: ['fullname', 'first'],
idIndex: 0 // id for each record will be the first element
});
For custom implementations create a basic Ext.data.Store configured as needed:
// create a Record constructor:
var rt = Ext.data.Record.create([
{name: 'fullname'},
{name: 'first'}
]);
var myStore = new Ext.data.Store({
// explicitly create reader
reader: new Ext.data.ArrayReader(
{
idIndex: 0 // id for each record will be the first element
},
rt // recordType
)
});
Load some data into store (note the data object is an array which corresponds to the reader):
var myData = [
[1, 'Fred Flintstone', 'Fred'], // note that id for the record is the first element
[2, 'Barney Rubble', 'Barney']
];
myStore.loadData(myData);
Records are cached and made available through accessor functions. An example of adding
a record to the store:
var defaultData = {
fullname: 'Full Name',
first: 'First Name'
};
var recId = 100; // provide unique id for the record
var r = new myStore.recordType(defaultData, ++recId); // create new record
myStore.insert(0, r); // insert a new record into the store (also see add)
Writing Data
And new in Ext version 3, use the new DataWriter to create an automated, Writable Store
along with RESTful features.Add Records to the Store and fires the add event. To add Records
to the store from a remote source use load({add:true}).
See also recordType and insert.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.(Local sort only) Inserts the passed Record into the Store at the index where it
should go based on the current sort information.Revert to a view of the Record cache with no filtering applied.Collects unique values for a particular dataIndex from this store.Commit 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.Destroys the store.Calls the specified function for each of the Records in the cache.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the records by a specified property. Alternatively, pass an array of filter
options to filter by more than one property.
Single filter example:
store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
Multiple filter example:
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.Finds the index of the first matching Record in this store by a specific field value.Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.Finds the index of the first matching Record in this store by a specific field value.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the Record at the specified index.Get the Record with the specified id.Gets the number of cached records.
If using paging, this may not be the total size of the dataset. If the data object
used by the Reader contains the dataset size, then the getTotalCount function returns
the dataset size. Note: see the Important note in load.Gets all records modified since the last commit. Modified records are
persisted across load operations (e.g., during paging). Note: deleted records are not
included. See also pruneModifiedRecords and
Ext.data.RecordmarkDirty..Returns a range of Records between specified indices.Returns an object describing the current sort state of this Store.Gets the total number of records in the dataset as returned by the server.
If using paging, for this to be accurate, the data object used by the Reader
must contain the dataset size. For remote data sources, the value for this property
(totalProperty for JsonReader,
totalRecords for XmlReader) shall be returned by a query on the server.
Note: see the Important note in load.Checks to see if this object has any listeners for a specified eventGet the index within the cache of the passed Record.Get the index within the cache of the Record with the passed id.Inserts Records into the Store at the given index and fires the add event.
See also add and addSorted.Returns true if this store is currently filteredLoads the Record cache from the configured proxy using the configured reader.
Notes:
Important: loading is asynchronous! This call will return before the new data has been
loaded. To perform any post-processing where information from the load call is required, specify
the callback function to be called, or use a a 'load' event handler.
If using remote paging, the first load call must specify the start and limit
properties in the options.params property to establish the initial position within the
dataset, and the number of Records to cache on each read from the Proxy.
If using remote sorting, the configured sortInfo
will be automatically included with the posted parameters according to the specified
paramNames.
Loads data from a passed data block and fires the load event. A Reader
which understands the format of the data must have been configured in the constructor.Sorts the contents of this store by multiple field/direction sorters. This is called internally by sort
and would not usually be called manually.
Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
if remoteSort is used.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectQuery the records by a specified property.Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.Reject outstanding changes on all modified records.Relays selected events from the specified Observable as if the events were fired by this.Reloads the Record cache from the configured Proxy using the configured
Reader and the options from the last load operation
performed.
Note: see the Important note in load.Remove Records from the Store and fires the remove event.Remove all Records from the Store and fires the clear event.Remove a Record from the Store at the specified index. Fires the remove event.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Saves all pending changes to the store. If the commensurate Ext.data.Api.actions action is not configured, then
the configured url will be used.
change url
--------------- --------------------
removed records Ext.data.Api.actions.destroy
phantom records Ext.data.Api.actions.create
modified records Ext.data.Api.actions.update
Set the value for a property name in this store's baseParams. Usage:myStore.setBaseParam('foo', {bar:3});Sets the default sort column and order to be used by the next load operation.Sorts the store contents by a single field and direction. This is called internally by sort and would
not usually be called manuallySort the Records.
If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
sorting is used, the cache is sorted internally. See also remoteSort and paramNames.
This function accepts two call signatures - pass in a field name as the first argument to sort on a single
field, or pass in an array of sort configuration objects to sort by multiple fields.
Single sort example:
store.sort('name', 'ASC');
Multi sort example:
store.sort([
{
field : 'name',
direction: 'ASC'
},
{
field : 'salary',
direction: 'DESC'
}
], 'ASC');
In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
above. Any number of sort configs can be added.Sums the value of property for each record between start
and end and returns the result.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)This is a layout that enables anchoring of contained elements relative to the container's dimensions.
If the container is resized, all anchored items are automatically rerendered according to their
anchor rules.
This class is intended to be extended or created via the layout:'anchor' Ext.Container.layout
config, and should generally not need to be created directly via the new keyword.
AnchorLayout does not have any direct config options (other than inherited ones). By default,
AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
container using the AnchorLayout can supply an anchoring-specific config property of anchorSize.
If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
logic if necessary. For example:
var viewport = new Ext.Viewport({
layout:'anchor',
anchorSize: {width:800, height:600},
items:[{
title:'Item 1',
html:'Content 1',
width:800,
anchor:'right 20%'
},{
title:'Item 2',
html:'Content 2',
width:300,
anchor:'50% 30%'
},{
title:'Item 3',
html:'Content 3',
width:600,
anchor:'-100 50%'
}]
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)A layout that arranges items vertically down a Container. This layout optionally divides available vertical
space between child items containing a numeric flex configuration.
This layout may also be used to set the widths of child items by configuring it with the align option.Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Resizes and repositions each child componentProvides Ext.direct support for submitting form data.
This example illustrates usage of Ext.Direct to submit a form through Ext.Direct.
var myFormPanel = new Ext.form.FormPanel({
// configs for FormPanel
title: 'Basic Information',
renderTo: document.body,
width: 300, height: 160,
padding: 10,
buttons:[{
text: 'Submit',
handler: function(){
myFormPanel.getForm().submit({
params: {
foo: 'bar',
uid: 34
}
});
}
}],
// configs apply to child items
defaults: {anchor: '100%'},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email',
name: 'email'
},{
fieldLabel: 'Company',
name: 'company'
}],
// configs for BasicForm
api: {
// The server-side method to call for load() requests
load: Profile.getBasicInfo,
// The server-side must mark the submit handler as a 'formHandler'
submit: Profile.updateBasicInfo
},
// specify the order for the passed params
paramOrder: ['uid', 'foo']
});
The data packet sent to the server will resemble something like:
{
"action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
"result":{
"success":true,
"id":{
"extAction":"Profile","extMethod":"updateBasicInfo",
"extType":"rpc","extTID":"6","extUpload":"false",
"name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"
}
}
}
The form will process a data packet returned by the server that is similar
to the following:
// sample success packet (batched requests)
[
{
"action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
"result":{
"success":true
}
}
]
// sample failure packet (one request)
{
"action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
"result":{
"errors":{
"email":"already taken"
},
"success":false,
"foo":"bar"
}
}
Also see the discussion in Ext.form.Action.DirectLoad.A TreeLoader provides for lazy loading of an Ext.tree.TreeNode's child
nodes from a specified URL. The response must be a JavaScript Array definition
whose elements are node definition objects. e.g.:
[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
A server request is sent, and child nodes are loaded only when a node is expanded.
The loading node's id is passed to the server under the parameter name "node" to
enable the server to produce the correct child nodes.
To pass extra parameters, an event handler may be attached to the "beforeload"
event, and the parameters specified in the TreeLoader's baseParams property:
myTreeLoader.on("beforeload", function(treeLoader, node) {
this.baseParams.category = node.attributes.category;
}, this);
This would pass an HTTP parameter called "category" to the server containing
the value of the Node's "category" attribute.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Override this function for custom TreeNode node implementation, or to
modify the attributes at creation time.
Example:new Ext.tree.TreePanel({
...
loader: new Ext.tree.TreeLoader({
url: 'dataUrl',
createNode: function(attr) {
// Allow consolidation consignments to have
// consignments dropped into them.
if (attr.isConsolidation) {
attr.iconCls = 'x-consol',
attr.allowDrop = true;
}
return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}
}),
...
});Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventLoad an Ext.tree.TreeNode from the URL specified in the constructor.
This is called automatically when a node is expanded, but may be used to reload
a node (or append new children if the clearOnLoad option is false.)Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
automatically hidden when needed. These are noted in the config options where appropriate.
The editor's toolbar buttons have tooltips defined in the buttonTips property, but they are not
enabled by default unless the global Ext.QuickTips singleton is initialized.
Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
supported by this editor.
An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
Example usage:
// Simple example rendered with default options:
Ext.QuickTips.init(); // enable tooltips
new Ext.form.HtmlEditor({
renderTo: Ext.getBody(),
width: 800,
height: 300
});
// Passed via xtype into a container and with custom options:
Ext.QuickTips.init(); // enable tooltips
new Ext.Panel({
title: 'HTML Editor',
renderTo: Ext.getBody(),
width: 600,
height: 300,
frame: true,
layout: 'fit',
items: {
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false
}
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.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.Protected method that will not generally be called directly. If you need/want
custom HTML cleanup, this is the method you should override.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Executes a Midas editor command directly on the editor document.
For visual commands, you should use relayCmd instead.
This should only be called after the editor is initialized.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Protected method that will not generally be called directly. It
is called when the editor initializes the iframe with HTML contents. Override this method if you
want to change the initialization markup of the iframe (e.g. to add stylesheets).
Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibilityReturns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the editor's toolbar. This is only available after the editor has been rendered.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
to insert text.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectProtected method that will not generally be called directly. Pushes the value of the textarea
into the iframe editor.Executes a Midas editor command on the editor document and performs necessary focus and
toolbar updates. This should only be called after the editor is initialized.Relays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Protected method that will not generally be called directly. Syncs the contents
of the editor iframe with the textarea.Toggles the editor between standard and source edit mode.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Protected method that will not generally be called directly. It triggers
a toolbar update by reading the markup state of the current selection in the editor.Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
In manual mode, you are responsible for showing, updating (via updateProgress) and clearing the
progress bar as needed from your own code. This method is most appropriate when you want to show progress
throughout an operation that has predictable points of interest at which you can update the control.
In automatic mode, you simply call wait and let the progress bar run indefinitely, only clearing it
once the operation is complete. You can optionally have the progress bar wait for a specific amount of time
and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in
which you have no need for indicating intermediate progress.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Returns true if the progress bar is currently in a wait operationTests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the progress bar value to 0 and text to empty string. If hide = true, the progress
bar will also be hidden (using the hideMode property internally).Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the size of the progress bar.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Synchronizes the inner bar width to the proper proportion of the total componet width based
on the current progress value. This will be called automatically when the ProgressBar
is resized by a layout, but if it is rendered auto width, this method can be called from
another resize handler to sync the ProgressBar if necessary.Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Updates the progress bar value, and optionally its text. If the text argument is not specified,
any existing text value will be unchanged. To blank out existing text, pass ''. Note that even
if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for
determining when the progress is complete and calling reset to clear and/or hide the control.Updates the progress bar text. If specified, textEl will be updated, otherwise the progress
bar itself will display the updated text.Initiates an auto-updating progress bar. A duration can be specified, in which case the progress
bar will automatically reset after a fixed amount of time and optionally call a callback function
if specified. If no duration is passed in, then the progress bar will run indefinitely and must
be manually cleared by calling reset. The wait method accepts a config object with
the following properties:
Property Type Description
---------- ------------ ----------------------------------------------------------------------
duration Number The length of time in milliseconds that the progress bar should
run before resetting itself (defaults to undefined, in which case it
will run indefinitely until reset is called)
interval Number The length of time in milliseconds between each progress update
(defaults to 1000 ms)
animate Boolean Whether to animate the transition of the progress bar. If this value is
not specified, the default for the class is used.
increment Number The number of progress update segments to display within the progress
bar (defaults to 10). If the bar reaches the end and is still
updating, it will automatically wrap back to the beginning.
text String Optional text to display in the progress bar element (defaults to '').
fn Function A callback function to execute after the progress bar finishes auto-
updating. The function will be called with no arguments. This function
will be ignored if duration is not specified since in that case the
progress bar can only be stopped programmatically, so any required function
should be called by the same code after it resets the progress bar.
scope Object The scope that is passed to the callback function (only applies when
duration and fn are both passed).
Example usage:
var p = new Ext.ProgressBar({
renderTo: 'my-el'
});
//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
p.wait({
interval: 100, //bar will move fast!
duration: 5000,
increment: 15,
text: 'Updating...',
scope: this,
fn: function(){
Ext.fly('status').update('Done!');
}
});
//Or update indefinitely until some async action completes, then reset manually
p.wait();
myAction.on('complete', function(){
p.reset();
Ext.fly('status').update('Done!');
});Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the checked state of the checkbox.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the checked state of the checkbox, fires the 'check' event, and calls a
handler (if configured).Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Provides for repetitive polling of the server at distinct intervals.
The initial request for data originates from the client, and then is responded to by the
server.
All configurations for the PollingProvider should be generated by the server-side
API portion of the Ext.Direct stack.
An instance of PollingProvider may be created directly via the new keyword or by simply
specifying type = 'polling'. For example:
var pollA = new Ext.direct.PollingProvider({
type:'polling',
url: 'php/pollA.php',
});
Ext.Direct.addProvider(pollA);
pollA.disconnect();
Ext.Direct.addProvider(
{
type:'polling',
url: 'php/pollB.php',
id: 'pollB-provider'
}
);
var pollB = Ext.Direct.getProvider('pollB-provider');Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Connect to the server-side and begin the polling process. To handle each
response subscribe to the data event.Disconnect from the server-side and stop the polling process. The disconnect
event will be fired on a successful disconnect.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns whether or not the server-side is currently connected.
Abstract method for subclasses to implement.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Data reader class to create an Array of Ext.data.Record objects from an Array.
Each element of that Array represents a row of data fields. The
fields are pulled into a Record object using as a subscript, the mapping property
of the field definition if it exists, or the field's ordinal position in the definition.
Example code:
var Employee = Ext.data.Record.create([
{name: 'name', mapping: 1}, // "mapping" only needed if an "id" field is present which
{name: 'occupation', mapping: 2} // precludes using the ordinal position as the index.
]);
var myReader = new Ext.data.ArrayReader({
idIndex: 0
}, Employee);
This would consume an Array like this:
[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]Returns true if the supplied data-hash looks and quacks like data. Checks to see if it has a key
corresponding to idProperty defined in your DataReader config containing non-empty pk.This method is only used by a DataProxy which has retrieved data from a remote server.Create a data block containing Ext.data.Records from an Array.Decode a JSON response from server.Used for un-phantoming a record after a successful database insert. Sets the records pk along with new data from server.
You must return at least the database pk using the idProperty defined in your DataReader configuration. The incoming
data from server will be merged with the data in the local record.
In addition, you must return record-data from the server in the same order received.
Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be suppressed.Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
If returning data from multiple-records after a batch-update, you must return record-data from the server in
the same order received. Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be
suppressed as the record receives fresh new data-hashA specific Ext.data.Record type that represents a name/value pair and is made to work with the
Ext.grid.PropertyGrid. Typically, PropertyRecords do not need to be created directly as they can be
created implicitly by simply using the appropriate data configs either via the Ext.grid.PropertyGrid.source
config property or by calling Ext.grid.PropertyGrid.setSource. However, if the need arises, these records
can also be created explicitly as shwon below. Example usage:
var rec = new Ext.grid.PropertyRecord({
name: 'Birthday',
value: new Date(Date.parse('05/26/1972'))
});
// Add record to an already populated grid
grid.store.addSorted(rec);Abstract base class for reading structured data from a data source and converting
it into an object containing Ext.data.Record objects and metadata for use
by an Ext.data.Store. This class is intended to be extended and should not
be created directly. For existing implementations, see Ext.data.ArrayReader,
Ext.data.JsonReader and Ext.data.XmlReader.Returns true if the supplied data-hash looks and quacks like data. Checks to see if it has a key
corresponding to idProperty defined in your DataReader config containing non-empty pk.Used for un-phantoming a record after a successful database insert. Sets the records pk along with new data from server.
You must return at least the database pk using the idProperty defined in your DataReader configuration. The incoming
data from server will be merged with the data in the local record.
In addition, you must return record-data from the server in the same order received.
Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be suppressed.Used for updating a non-phantom or "real" record's data with fresh data from server after remote-save.
If returning data from multiple-records after a batch-update, you must return record-data from the server in
the same order received. Will perform a commit as well, un-marking dirty-fields. Store's "update" event will be
suppressed as the record receives fresh new data-hashThe class encapsulates a connection to the page's originating domain, allowing requests to be made
either to a configured URL, or to a URL specified at request time.
Requests made by this class are asynchronous, and will return immediately. No data from
the server will be available to the statement immediately following the request call.
To process returned data, use a
success callback
in the request options object,
or an event listener.
File UploadsFile uploads are not performed using normal "Ajax" techniques, that
is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard
manner with the DOM <form> element temporarily modified to have its
target set to refer
to a dynamically generated, hidden <iframe> which is inserted into the document
but removed after the return data has been gathered.
The server response is parsed by the browser to create the document for the IFRAME. If the
server is using JSON to send the return object, then the
Content-Type header
must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
Characters which are significant to an HTML parser must be sent as HTML entities, so encode
"<" as "<", "&" as "&" etc.
The response text is retrieved from the document, and a fake XMLHttpRequest object
is created containing a responseText property in order to conform to the
requirements of event handlers and callbacks.
Be aware that file upload packets are sent with the content type multipart/form
and some server technologies (notably JEE) may require some custom processing in order to
retrieve parameter names and parameter values from the packet content.
Also note that it's not possible to check the response code of the hidden iframe, so the success handler will ALWAYS fire.Aborts any outstanding request.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventDetermine whether this object has a request outstanding.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Sends an HTTP request to a remote server.
Important: Ajax server requests are asynchronous, and this call will
return before the response has been received. Process any returned data
in a callback function.
Ext.Ajax.request({
url: 'ajax_demo/sample.json',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
To execute a callback function in the correct scope, use the scope option.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Simple color palette class for choosing colors. The palette can be rendered to any container.
Here's an example of typical usage:
var cp = new Ext.ColorPalette({value:'993300'}); // initial selected color
cp.render('my-div');
cp.on('select', function(palette, selColor){
// do something with selColor
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects the specified color in the palette (fires the select event)Convenience function for setting disabled/enabled by boolean.Convenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.A specialized container representing the viewable application area (the browser viewport).
The Viewport renders itself to the document body, and automatically sizes itself to the size of
the browser viewport and manages window resizing. There may only be one Viewport created
in a page. Inner layouts are available by virtue of the fact that all Panels
added to the Viewport, either through its items, or through the items, or the add
method of any of its child Panels may themselves have a layout.
The Viewport does not provide scrolling, so child Panels within the Viewport should provide
for scrolling if needed using the autoScroll config.
An example showing a classic application border layout:new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 200
// the west region might typically utilize a TreePanel or a Panel with Accordion layout
}, {
region: 'south',
title: 'Title for Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'Title for the Grid Panel',
collapsible: true,
split: true,
width: 200,
xtype: 'grid',
// remaining grid configuration not shown ...
// notice that the GridPanel is added directly as the region
// it is not "overnested" inside another Panel
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Creates a delegate (callback) that sets the scope to obj.
Call directly on any function. Example: Ext.createDelegate(this.myFunction, this, [arg1, arg2])
Will create a function that is automatically scoped to obj so that the this variable inside the
callback points to obj. Example usage:
var sayHi = function(name){
// Note this use of "this.text" here. This function expects to
// execute within a scope that contains a text property. In this
// example, the "this" variable is pointing to the btn object that
// was passed in createDelegate below.
alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}
var btn = new Ext.Button({
text: 'Say Hi',
renderTo: Ext.getBody()
});
// This callback will execute in the scope of the
// button instance. Clicking the button alerts
// "Hi, Fred. You clicked the "Say Hi" button."
btn.on('click', Ext.createDelegate(sayHi, btn, ['Fred']));Creates an interceptor function. The passed function is called before the original one. If it returns false,
the original one is not called. The resulting function returns the results of the original function.
The passed function is called with the parameters of the original function. Example usage:
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = Ext.createInterceptor(sayHi, function(name){
return name == 'Brian';
});
sayHiToFriend('Fred'); // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"Create a combined function call sequence of the original function + the passed function.
The resulting function returns the results of the original function.
The passed fcn is called with the parameters of the original function. Example usage:
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
var sayGoodbye = Ext.createSequence(sayHi, function(name){
alert('Bye, ' + name);
});
sayGoodbye('Fred'); // both alerts showCalls 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.defer(sayHi, 2000, this, ['Fred']);
// this syntax is sometimes useful for deferring
// execution of an anonymous function:
Ext.defer(function(){
alert('Anonymous');
}, 100);Adds the ability for single level grouping to the grid. A GroupingStore
must be used to enable grouping. Some grouping characteristics may also be configured at the
Column level
emptyGroupText
groupable
groupName
groupRender
Sample usage:
var grid = new Ext.grid.GridPanel({
// A groupingStore is required for a GroupingView
store: new Ext.data.GroupingStore({
autoDestroy: true,
reader: reader,
data: xg.dummyData,
sortInfo: {field: 'company', direction: 'ASC'},
groupOnSort: true,
remoteGroup: true,
groupField: 'industry'
}),
colModel: new Ext.grid.ColumnModel({
columns:[
{id:'company',header: 'Company', width: 60, dataIndex: 'company'},
// groupable, groupName, groupRender are also configurable at column level
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price', groupable: false},
{header: 'Change', dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: 'Industry', dataIndex: 'industry'},
{header: 'Last Updated', renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
defaults: {
sortable: true,
menuDisabled: false,
width: 20
}
}),
view: new Ext.grid.GroupingView({
forceFit: true,
// custom grouping text template to display the number of items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
renderTo: document.body
});Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Collapses all grouped rows.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands all grouped rows.Return the index of the grid column which contains the passed HTMLElement.
See also findRowIndexReturn the HtmlElement representing the grid row which contains the passed element.Return the HtmlElement representing the grid row body which contains the passed element.Return the index of the grid row which contains the passed HTMLElement.
See also findCellIndexFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Focuses the specified cell.Focuses the specified row.Returns the grid's <td> HtmlElement at the specified coordinates.Returns the total internal width available to the grid, taking the scrollbar into accountDynamically tries to determine the groupId of a specific valueReturn the <td> HtmlElement which represents the Grid's header cell for the specified column index.Return the <div> HtmlElement which represents a Grid row for the specified index.Override this function to apply custom CSS classes to rows during rendering. You can also supply custom
parameters to the row template for the current row to customize how it is rendered using the rowParams
parameter. This function should return the CSS class name (or empty string '' for none) that will be added
to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string
(e.g., 'my-class another-class'). Example usage:
viewConfig: {
forceFit: true,
showPreview: true, // custom property
enableRowBody: true, // required to create a second, full-width row to show expanded Record data
getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
if(this.showPreview){
rp.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},Called by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provides
the column hide/show functionality based on the check state of the menu item. A different implementation can be provided
if needed.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRefreshs the grid UIRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Scrolls the grid to the topSuspend the firing of all events. (see resumeEvents)Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.Toggle the group that contains the specific row.Removes an event handler (shorthand for removeListener.)A type of axis whose units are measured in numeric values.A type of axis whose units are measured in time-based values.DataWriter extension for writing an array or single Ext.data.Record object(s) in preparation for executing a remote CRUD action via XML.
XmlWriter uses an instance of Ext.XTemplate for maximum flexibility in defining your own custom XML schema if the default schema is not appropriate for your needs.
See the tpl configuration-property.Compiles a Store recordset into a data-format defined by an extension such as Ext.data.JsonWriter or Ext.data.XmlWriter in preparation for a server-write action. The first two params are similar similar in nature to Ext.apply,
Where the first parameter is the receiver of paramaters and the second, baseParams, the source.createRecorddestroyRecordXmlWriter implementation of the final stage of a write action.Converts a Hashed Ext.data.Record to fields-array array suitable
for encoding to xml via XTemplate, eg:
<tpl for="."><{name}>{value}</{name}</tpl>
eg, non-phantom:
{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]
Phantom records will have had their idProperty omitted in toHash if determined to be auto-generated.
Non AUTOINCREMENT pks should have been protected.Converts a Record to a hash, taking into account the state of the Ext.data.Record along with configuration properties
related to its rendering, such as writeAllFields, phantom, getChanges and
idPropertyupdateRecordA menu containing an Ext.DatePicker Component.
Notes:
Although not listed here, the constructor for this class
accepts all of the configuration options of Ext.DatePicker.
If subclassing DateMenu, any configuration options for the DatePicker must be
applied to the initialConfig property of the DateMenu.
Applying DatePicker configuration settings to
this will not affect the DatePicker's configuration.
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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a CSS class to the component's underlying element.Adds an Ext.Element object to the menuAdds the specified events to the list of events which this Observable may fire.Adds an existing object based on Ext.menu.BaseItem to the menuAppends an event handler to this object.Creates a new Ext.menu.Item based an the supplied config object and adds it to the menuAdds a separator bar to the menuCreates a new Ext.menu.TextItem with the supplied text and adds it to the menuApply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHides this menu and optionally all parent menusInserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.If floating=true, shows this menu relative to
another element using showat, otherwise uses Ext.Component.show.Displays this menu at a specific xy position and fires the 'show' event if a
handler for the 'beforeshow' event does not return false cancelling the operation.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A generic response class to normalize response-handling internally to the framework.Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout
(either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox)
for its container.Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind
navigation keys to function calls that will get called when the keys are pressed, providing an easy
way to implement custom navigation schemes for any UI component.
The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
pageUp, pageDown, del, home, end. Usage:
var nav = new Ext.KeyNav("my-element", {
"left" : function(e){
this.moveLeft(e.ctrlKey);
},
"right" : function(e){
this.moveRight(e.ctrlKey);
},
"enter" : function(e){
this.save();
},
scope : this
});Destroy this KeyNav (this is the same as calling disable).Disable this KeyNavEnable this KeyNavConvenience function for setting disabled/enabled by boolean.A basic hidden field for storing hidden values in forms that need to be passed in the form submit.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys the proxy by purging any event listeners and cancelling any active requests.DirectProxy implementation of Ext.data.DataProxy.doRequestEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns true if the specified action is defined as a unique action in the api-config.
request. If all API-actions are routed to unique urls, the xaction parameter is unecessary. However, if no api is defined
and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
the corresponding code for CRUD action.Deprecated load method using old method signature. See {@doRequest} for preferred method.Appends an event handler to this object (shorthand for addListener.)Callback for read actionsCallback for write actionsRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.All proxy actions are executed through this method. Automatically fires the "before" + action eventResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
If called with an object as the only parameter, the object should redefine the entire API, e.g.:proxy.setApi({
read : '/users/read',
create : '/users/create',
update : '/users/update',
destroy : '/users/destroy'
});
If called with two parameters, the first parameter should be a string specifying the API action to
redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns whether or not the server-side is currently connected.
Abstract method for subclasses to implement.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Abstract base class for implementations which provide retrieval of unformatted data objects.
This class is intended to be extended and should not be created directly. For existing implementations,
see Ext.data.DirectProxy, Ext.data.HttpProxy, Ext.data.ScriptTagProxy and
Ext.data.MemoryProxy.
DataProxy implementations are usually used in conjunction with an implementation of Ext.data.DataReader
(of the appropriate type which knows how to parse the data object) to provide a block of
Ext.data.Records to an Ext.data.Store.
The parameter to a DataProxy constructor may be an Ext.data.Connection or can also be the
config object to an Ext.data.Connection.
Custom implementations must implement either the doRequest method (preferred) or the
load method (deprecated). See
Ext.data.HttpProxy.doRequest or
Ext.data.HttpProxy.load for additional details.
Example 1
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
}),
Example 2
proxy : new Ext.data.HttpProxy({
method: 'GET',
prettyUrls: false,
url: 'local/default.php', // see options parameter for Ext.Ajax.request
api: {
// all actions except the following will use above url
create : 'local/new.php',
update : 'local/update.php'
}
}),
And new in Ext version 3, attach centralized event-listeners upon the DataProxy class itself! This is a great place
to implement a messaging system to centralize your application's user-feedback and error-handling.
// Listen to all "beforewrite" event fired by all proxies.
Ext.data.DataProxy.on('beforewrite', function(proxy, action) {
console.log('beforewrite: ', action);
});
// Listen to "write" event fired by all proxies
Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) {
console.info('write: ', action);
});
// Listen to "exception" event fired by all proxies
Ext.data.DataProxy.on('exception', function(proxy, type, action, exception) {
console.error(type + action + ' exception);
});
Note: These three events are all fired with the signature of the corresponding DataProxy instance event beforewrite, write and exception.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys the proxy by purging any event listeners and cancelling any active requests.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns true if the specified action is defined as a unique action in the api-config.
request. If all API-actions are routed to unique urls, the xaction parameter is unecessary. However, if no api is defined
and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
the corresponding code for CRUD action.Deprecated load method using old method signature. See {@doRequest} for preferred method.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.All proxy actions are executed through this method. Automatically fires the "before" + action eventResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
If called with an object as the only parameter, the object should redefine the entire API, e.g.:proxy.setApi({
read : '/users/read',
create : '/users/create',
update : '/users/update',
destroy : '/users/destroy'
});
If called with two parameters, the first parameter should be a string specifying the API action to
redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)History management component that allows you to register arbitrary tokens that signify application
history state on navigation actions. You can then handle the history change event in order
to reset your application UI to the appropriate state when the user navigates forward or backward through
the browser history stack.Add a new token to the history stack. This can be any arbitrary value, although it would
commonly be the concatenation of a component id and another id marking the specifc history
state of that component. Example usage:
// Handle tab changes on a TabPanel
tabPanel.on('tabchange', function(tabPanel, tab){
Ext.History.add(tabPanel.id + ':' + tab.id);
});Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).Retrieves the currently-active history token.Checks to see if this object has any listeners for a specified eventInitialize the global History instance.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Date sortingFloat sortingInteger sortingStrips all HTML tags to sort on text onlyCase insensitive stringStrips all HTML tags to sort on text only - Case insensitiveDefault sort that does nothingUtility class for manipulating CSS rulesCreates a stylesheet from a text blob of rules.
These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.Gets an an individual CSS rule by selector(s)Gets all css rules for the documentRefresh the rule cache if you have dynamically added stylesheetsRemoves a style or link tag by idDynamically swaps an existing stylesheet reference for a new oneUpdates a rule propertyChecks whether or not the specified object exists in the array.Removes the specified object from the array. If the object is not found nothing happens.A simple class that provides the basic implementation needed to make any element a drop target that can have
draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Fired when we are done dragging the objectReturns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementSets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceThe function a Ext.dd.DragSource calls once to notify this drop target that the dragged item has
been dropped on it. This method has no default implementation and returns false, so you must provide an
implementation that does something to process the drop event and returns true so that the drag source's
repair action does not run.The function a Ext.dd.DragSource calls once to notify this drop target that the source is now over the
target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
and returns the dropAllowed config value. This method should be overridden if drop validation is required.The function a Ext.dd.DragSource calls once to notify this drop target that the source has been dragged
out of the target without dropping. This default implementation simply removes the CSS class specified by
overClass (if any) from the drop element.The function a Ext.dd.DragSource calls continuously while it is being dragged over the target.
This method will be called on every mouse movement while the drag source is over the drop target.
This default implementation simply returns the dropAllowed config value.Override the onAvailable method to do what is needed after the initial
position was determined.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupRemove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragAllows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementBase Manager class - extended by ComponentMgr and PluginMgrCreates and returns an instance of whatever this manager manages, based on the supplied type and config objectReturns a component by id.
For additional details see Ext.util.MixedCollection.get.Checks if a Component type is registered.Registers a function that will be called when a Component with the specified id is added to the manager. This will happen on instantiation.Registers an item to be managedRegisters a new Component constructor, keyed by a new
Ext.Component.xtype.
Use this method (or its alias Ext.reg) to register new
subclasses of Ext.Component so that lazy instantiation may be used when specifying
child Components.
see Ext.Container.itemsUnregisters a component by removing it from this managerSimple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned,
and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced
functionality that can also provide the same shadow effect, see the Ext.Layer class.Hides this shadowReturns true if the shadow is visible, else falseDirect alignment when values are already available. Show must be called at least once before
calling this method to ensure it is initialized.Adjust the z-index of this shadowDisplays the shadow under the target elementThis is a singleton object which contains a set of commonly used field validation functions.
The validations provided are basic and intended to be easily customizable and extended.
To add custom VTypes specify the vtype validation
test function, and optionally specify any corresponding error text to display and any keystroke
filtering mask to apply. For example:
// custom Vtype for vtype:'time'
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.VTypes, {
// vtype validation function
time: function(val, field) {
return timeTest.test(val);
},
// vtype Text property: The error text to display when the validation function returns false
timeText: 'Not a valid time. Must be in the format "12:34 PM".',
// vtype Mask property: The keystroke filter mask
timeMask: /[\d\s:amp]/i
});
Another example:
// custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
});The function used to validate alpha valuesThe function used to validate alphanumeric valuesThe function used to validate email addresses. Note that this is a very basic validation -- complete
validation per the email RFC specifications is very complex and beyond the scope of this class, although
this function can be overridden if a more comprehensive validation scheme is desired. See the validation
section of the Wikipedia article on email addresses
for additional information. This implementation is intended to validate the following emails:
'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com'
.The function used to validate URLsBase class for all Ext components. All subclasses of Component may participate in the automated
Ext component lifecycle of creation, rendering and destruction which is provided by the Container class.
Components may be added to a Container through the items config option at the time the Container is created,
or they may be added dynamically via the add method.
The Component base class has built-in support for basic hide/show and enable/disable behavior.
All Components are registered with the Ext.ComponentMgr on construction so that they can be referenced at any time via
Ext.getCmp, passing the id.
All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or
Ext.BoxComponent if managed box model handling is required, ie height and width management).
See the Creating new UI controls tutorial for details on how
and to either extend or augment ExtJs base classes to create custom Components.
Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the
xtype like getXType and isXType. This is the list of all valid xtypes:
xtype Class
------------- ------------------
box Ext.BoxComponent
button Ext.Button
buttongroup Ext.ButtonGroup
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
flash Ext.FlashComponent
grid Ext.grid.GridPanel
listview Ext.ListView
multislider Ext.slider.MultiSlider
panel Ext.Panel
progress Ext.ProgressBar
propertygrid Ext.grid.PropertyGrid
slider Ext.slider.SingleSlider
spacer Ext.Spacer
splitbutton Ext.SplitButton
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.ViewPort
window Ext.Window
Toolbar components
---------------------------------------
paging Ext.PagingToolbar
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button (deprecated; use button)
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton (deprecated; use splitbutton)
tbtext Ext.Toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
colormenu Ext.menu.ColorMenu
datemenu Ext.menu.DateMenu
menubaseitem Ext.menu.BaseItem
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.TextItem
Form components
---------------------------------------
form Ext.form.FormPanel
checkbox Ext.form.Checkbox
checkboxgroup Ext.form.CheckboxGroup
combo Ext.form.ComboBox
compositefield Ext.form.CompositeField
datefield Ext.form.DateField
displayfield Ext.form.DisplayField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.BarChart
cartesianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart
piechart Ext.chart.PieChart
Store xtypes
---------------------------------------
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore (deprecated; use arraystore)
store Ext.data.Store
xmlstore Ext.data.XmlStore
Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Convenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.A display-only text field which is not validated and not submitted.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.A specialized SplitButton that contains a menu of Ext.menu.CheckItem elements. The button automatically
cycles through each menu item on click, raising the button's change event (or calling the button's
changeHandler function, if supplied) for the active menu item. Clicking on the arrow section of the
button displays the dropdown menu just like a normal SplitButton. Example usage:
var btn = new Ext.CycleButton({
showText: true,
prependText: 'View as ',
items: [{
text:'text only',
iconCls:'view-text',
checked:true
},{
text:'HTML',
iconCls:'view-html'
}],
changeHandler:function(btn, item){
Ext.Msg.alert('Change View', item.text);
}
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the currently active menu item.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Gets the pressed button in the passed group or nullReturns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.This method returns an Array which provides substitution parameters for the Template used
to create this Button's DOM structure.
Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
own implementation of this method.
The default implementation which provides data for the default template returns an Array containing the
following items:
The <button>'s type
A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
The cls CSS class name applied to the button's wrapping <table> element.
The Component id which is applied to the button's wrapping <table> element.
Gets the text for this ButtonGets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventReturns true if the button has a menu and it is visibleHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Hide this button's menu (if it has one)Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the button's active menu item.Sets this button's arrow click handler.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Assigns this Button's click handlerSets the height of the component. This method fires the resize event.Sets the background image (inline style) of the button. This method also changes
the value of the icon config internally.Sets the CSS class that provides a background image to use as the button's icon. This method also changes
the value of the iconCls config internally.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets this Button's textSets the tooltip for this Button.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Show this button's menu (if it has one)Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.If a state it passed, it becomes the pressed state otherwise the current state is toggled.This is normally called internally on button click, but can be called externally to advance the button's
active item programmatically to the next one in the menu. If the current item is the last one in the menu
the active item will be set to the first item in the menu.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A DragDrop implementation where the linked element follows the
mouse cursor during a drag.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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 up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are calledSets the pointer offset to the distance between the linked element's top
left corner and the location the element was clickedEvent that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Fired when we are done dragging the objectReturns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementSets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupRemove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Sets the pointer offset. You can call this directly to force the
offset to be in a particular location (e.g., pass in 0,0 to set it
to the center of the object)Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragSets the drag 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.Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementBasic Toolbar class. Although the defaultType for Toolbar
is button, Toolbar elements (child items for the Toolbar container) may
be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
or implicitly via their xtypes, and can be added dynamically.
Some items have shortcut strings for creation:
Shortcut xtype Class Description
'->' 'tbfill' Ext.Toolbar.Fill begin using the right-justified button container
'-' 'tbseparator' Ext.Toolbar.Separator add a vertical separator bar between toolbar items
' ' 'tbspacer' Ext.Toolbar.Spacer add horiztonal space between elements
Example usage of various elements:
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [
{
// xtype: 'button', // default for Toolbars, same as 'tbbutton'
text: 'Button'
},
{
xtype: 'splitbutton', // same as 'tbsplitbutton'
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
{xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
'text 2',
{xtype: 'tbspacer', width: 50}, // add a 50px space
'text 3'
]
});
Example adding a ComboBox within a menu of a button:
// ComboBox creation
var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['initials', 'fullname'],
data : [
['FF', 'Fred Flintstone'],
['BR', 'Barney Rubble']
]
}),
displayField: 'fullname',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a name...',
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up('.x-menu');
},
iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
});
// put ComboBox in a Menu
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
combo // A Field in a Menu
]
});
// add a Button with the menu
tb.add({
text:'Button w/ Menu',
menu: menu // assign menu by instance
});
tb.doLayout();Adds element(s) to the toolbar -- this function takes a variable number of
arguments of mixed type and adds them to the toolbar.
Note: See the notes within Ext.Container.add.Adds a button (or buttons). See Ext.Button for more info on the config.
Note: See the notes within Ext.Container.add.Adds a CSS class to the component's underlying element.Adds a new element to the toolbar from the passed Ext.DomHelper config
Note: See the notes within Ext.Container.add.Adds any standard HTML element to the toolbar
Note: See the notes within Ext.Container.add.Adds the specified events to the list of events which this Observable may fire.Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
been rendered yet. For a field that has already been rendered, use addElement.
Note: See the notes within Ext.Container.add.Forces subsequent additions into the float:right toolbar
Note: See the notes within Ext.Container.add.Adds any Toolbar.Item or subclass
Note: See the notes within Ext.Container.add.Appends an event handler to this object.Adds a separator
Note: See the notes within Ext.Container.add.Adds a spacer element
Note: See the notes within Ext.Container.add.Adds text to the toolbar
Note: See the notes within Ext.Container.add.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Inserts any Ext.Toolbar.Item/Ext.Button at the specified index.
Note: See the notes within Ext.Container.add.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A class to provide basic animation and visual effects support. Note: This class is automatically applied
to the Ext.Element interface when included, so all effects calls should be performed via Ext.Element.
Conversely, since the effects are not actually defined in Ext.Element, Ext.Fx must be
included in order for the Element effects to work.
Method Chaining
It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
they return the Element object itself as the method return value, it is not always possible to mix the two in a single
method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
expected results and should be done with care. Also see callback.
Anchor Options for Motion Effects
Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
Value Description
----- -----------------------------
tl The top left corner
t The center of the top edge
tr The top right corner
l The center of the left edge
r The center of the right edge
bl The bottom left corner
b The center of the bottom edge
br The bottom right corner
Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options
section below are common options that can be passed to any Fx method unless otherwise noted.Fade an element in (from transparent to opaque). The ending opacity can be specified
using the endOpacity config option.
Usage:
// default: fade in from opacity 0 to 100%
el.fadeIn();
// custom: fade in from opacity 0 to 75% over 2 seconds
el.fadeIn({ endOpacity: .75, duration: 2});
// common config options shown with default values
el.fadeIn({
endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
easing: 'easeOut',
duration: .5
});Fade an element out (from opaque to transparent). The ending opacity can be specified
using the endOpacity config option. Note that IE may require
useDisplay:true in order to redisplay correctly.
Usage:
// default: fade out from the element's current opacity to 0
el.fadeOut();
// custom: fade out from the element's current opacity to 25% over 2 seconds
el.fadeOut({ endOpacity: .25, duration: 2});
// common config options shown with default values
el.fadeOut({
endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});Shows a ripple of exploding, attenuating borders to draw attention to an Element.
Usage:
// default: a single light blue ripple
el.frame();
// custom: 3 red ripples lasting 3 seconds total
el.frame("ff0000", 3, { duration: 3 });
// common config options shown with default values
el.frame("C3DAF9", 1, {
duration: 1 //duration of each individual ripple.
// Note: Easing is not configurable and will be ignored if included
});Slides the element while fading it out of view. An anchor point can be optionally passed to set the
ending point of the effect.
Usage:
// default: slide the element downward while fading out
el.ghost();
// custom: slide the element out to the right with a 2-second duration
el.ghost('r', { duration: 2 });
// common config options shown with default values
el.ghost('b', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});Returns true if the element has any effects actively running or queued, else returns false.Returns true if the element is currently blocking so that no other effect can be queued
until this effect is finished, else returns false if blocking is not set. This is commonly
used to ensure that an effect initiated by a user action runs to completion prior to the
same effect being restarted (e.g., firing only one effect even if the user clicks several times).Highlights the Element by setting a color (applies to the background-color by default, but can be
changed using the "attr" config option) and then fading back to the original color. If no original
color is available, you should provide the "endColor" config option which will be cleared after the animation.
Usage:
// default: highlight background to yellow
el.highlight();
// custom: highlight foreground text to blue for 2 seconds
el.highlight("0000ff", { attr: 'color', duration: 2 });
// common config options shown with default values
el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});Creates a pause before any subsequent queued effects begin. If there are
no effects queued after the pause it will have no effect.
Usage:
el.pause(1);Fades the element out while slowly expanding it in all directions. When the effect is completed, the
element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
The element must be removed from the DOM using the 'remove' config option if desired.
Usage:
// default
el.puff();
// common config options shown with default values
el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});Animates the transition of an element's dimensions from a starting height/width
to an ending height/width. This method is a convenience implementation of shift.
Usage:
// change height and width to 100x100 pixels
el.scale(100, 100);
// common config options shown with default values. The height and width will default to
// the element's existing values if passed as null.
el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
}
);Ensures that all effects queued after sequenceFx is called on the element are
run in sequence. This is the opposite of syncFx.Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
Any of these properties not specified in the config object will not be changed. This effect
requires that at least one new dimension, position or opacity setting must be passed in on
the config object in order for the function to have any effect.
Usage:
// slide the element horizontally to x position 200 while changing the height and opacity
el.shift({ x: 200, height: 50, opacity: .8 });
// common config options shown with default values.
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});Slides the element into view. An anchor point can be optionally passed to set the point of
origin for the slide effect. This function automatically handles wrapping the element with
a fixed-size container if needed. See the Fx class overview for valid anchor point options.
Usage:
// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the right with a 2-second duration
el.slideIn('r', { duration: 2 });
// common config options shown with default values
el.slideIn('t', {
easing: 'easeOut',
duration: .5
});Slides the element out of view. An anchor point can be optionally passed to set the end point
for the slide effect. When the effect is completed, the element will be hidden (visibility =
'hidden') but block elements will still take up space in the document. The element must be removed
from the DOM using the 'remove' config option if desired. This function automatically handles
wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
Usage:
// default: slide the element out to the top
el.slideOut();
// custom: slide the element out to the right with a 2-second duration
el.slideOut('r', { duration: 2 });
// common config options shown with default values
el.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});Stops any running effects and clears the element's internal effects queue if it contains
any additional effects that haven't started yet.Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
Usage:
// default
el.switchOff();
// all config options shown with default values
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});Ensures that all effects queued after syncFx is called on the element are
run concurrently. This is the opposite of sequenceFx.This class is a base class implementing a simple render method which updates an element using results from an Ajax request.
The BasicRenderer updates the element's innerHTML with the responseText. To perform a custom render (i.e. XML or JSON processing),
create an object with a conforming render method and pass it to setRenderer on the Updater.This method is called when an Ajax response is received, and an Element needs updating.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Fired when we are done dragging the objectReturns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementReturns a custom data object associated with the DOM node that is the target of the event. By default
this looks up the event target in the Ext.dd.Registry, although you can override this method to
provide your own custom lookup.Sets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceThe function a Ext.dd.DragSource calls once to notify this drop zone that the dragged item has
been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
is a node registered for that event, it will delegate to onNodeDrop for node-specific handling,
otherwise it will call onContainerDrop.The function a Ext.dd.DragSource calls once to notify this drop zone that the source is now over
the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
you should override this method and provide a custom implementation.The function a Ext.dd.DragSource calls once to notify this drop zone that the source has been dragged
out of the zone without dropping. If the drag source is currently over a registered node, the notification
will be delegated to onNodeOut for node-specific handling, otherwise it will be ignored.The function a Ext.dd.DragSource calls continuously while it is being dragged over the drop zone.
This method will be called on every mouse movement while the drag source is over the drop zone.
It will call onNodeOver while the drag source is over a registered node, and will also automatically
delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
registered nodes (onNodeEnter, onNodeOut). If the drag source is not currently over a
registered node, it will call onContainerOver.Override the onAvailable method to do what is needed after the initial
position was determined.Called when the DropZone determines that a Ext.dd.DragSource has been dropped on it,
but not on any of its registered drop nodes. The default implementation returns false, so it should be
overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
be able to accept drops. It should return true when valid so that the drag source's repair action does not run.Called while the DropZone determines that a Ext.dd.DragSource is being dragged over it,
but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
it should be overridden to provide the proper feedback if necessary.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupCalled when the DropZone determines that a Ext.dd.DragSource has been dropped onto
the drop node. The default implementation returns false, so it should be overridden to provide the
appropriate processing of the drop event and return true so that the drag source's repair action does not run.Called when the DropZone determines that a Ext.dd.DragSource has entered a drop node
that has either been registered or detected by a configured implementation of getTargetFromEvent.
This method has no default implementation and should be overridden to provide
node-specific processing if necessary.Called when the DropZone determines that a Ext.dd.DragSource has been dragged out of
the drop node without dropping. This method has no default implementation and should be overridden to provide
node-specific processing if necessary.Called while the DropZone determines that a Ext.dd.DragSource is over a drop node
that has either been registered or detected by a configured implementation of getTargetFromEvent.
The default implementation returns this.dropNotAllowed, so it should be
overridden to provide the proper feedback.Remove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragAllows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementPieSeries class for the charts widget.A combobox control with support for autocomplete, remote-loading, paging and many other features.
A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is
that to submit the valueField, you must specify a hiddenName to create a hidden input
field to hold the value of the valueField. The displayField is shown in the text field
which is named according to the name.
Events
To do something when something in ComboBox is selected, configure the select event:var cb = new Ext.form.ComboBox({
// all of your config options
listeners:{
scope: yourScope,
'select': yourFunction
}
});
// Alternatively, you can assign events after the object is created:
var cb = new Ext.form.ComboBox(yourOptions);
cb.on('select', yourFunction, yourScope);
ComboBox in Grid
If using a ComboBox in an Editor Grid a renderer
will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement
a reusable render, for example:// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
// create the combo instance
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText'
});
// snippet of column model used within grid
var cm = new Ext.grid.ColumnModel([{
...
},{
header: "Some Header",
dataIndex: 'whatever',
width: 130,
editor: combo, // specify reference to combo instance
renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
},
...
]);
Filtering
A ComboBox uses filtering itself, for information about filtering the ComboBox
store manually see lastQuery.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClears any text/value currently set in the fieldClone the current component using the original config values passed into this instance by default.Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the
query allowing the query action to be canceled if needed.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the dropdown list if it is currently hidden. Fires the expand event on completion.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Validates a value according to the field's validation rules and returns an array of errors
for any failing validations. Validation rules are processed in the following order:
1. Field specific validator
A validator offers a way to customize and reuse a validation specification.
If a field is configured with a validator
function, it will be passed the current field value. The validator
function is expected to return either:
Boolean true if the value is valid (validation continues).
a String to represent the invalid message if invalid (validation halts).
2. Basic Validation
If the validator has not halted validation,
basic validation proceeds as follows:
allowBlank : (Invalid message =
emptyText)
Depending on the configuration of allowBlank, a
blank field will cause validation to halt at this step and return
Boolean true or false accordingly.
minLength : (Invalid message =
minLengthText)
If the passed value does not satisfy the minLength
specified, validation halts.
maxLength : (Invalid message =
maxLengthText)
If the passed value does not satisfy the maxLength
specified, validation halts.
3. Preconfigured Validation Types (VTypes)
If none of the prior validation steps halts validation, a field
configured with a vtype will utilize the
corresponding VTypes validation function.
If invalid, either the field's vtypeText or
the VTypes vtype Text property will be used for the invalid message.
Keystrokes on the field will be filtered according to the VTypes
vtype Mask property.
4. Field specific regex test
If none of the prior validation steps halts validation, a field's
configured regex test will be processed.
The invalid message for this test is configured with
regexText.
Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.
A custom implementation may be provided as a configuration option if the floating list needs to be rendered
to a different Element. An example might be rendering the list inside a Menu so that clicking
the list does not hide the Menu:var store = new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['initials', 'fullname'],
data : [
['FF', 'Fred Flintstone'],
['BR', 'Barney Rubble']
]
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'fullname',
emptyText: 'Select a name...',
forceSelection: true,
getListParent: function() {
return this.el.up('.x-menu');
},
iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
mode: 'local',
selectOnFocus: true,
triggerAction: 'all',
typeAhead: true,
width: 135
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
combo // A Field in a Menu
]
});Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the store associated with this combo.Returns the currently selected field value or empty string if no value is set.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns true if the dropdown list is expanded, else false.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
The store must be loaded and the list expanded for this function to work, otherwise use setValue.Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
The store must be loaded and the list expanded for this function to work, otherwise use setValue.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Allow or prevent the user from directly editing the field text. If false is passed,
the user will only be able to modify the field using the trigger. Will also add
a click event to the text field which will call the trigger. This method
is the runtime equivalent of setting the editable config option at config time.Sets the height of the component. This method fires the resize event.Changes the hidden status of the trigger.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Setting this to true will supersede settings editable and hideTrigger.
Setting this to false will defer back to editable and hideTrigger. This method
is the runtime equivalent of setting the readOnly config option at config time.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the specified value into the field. If the value finds a match, the corresponding record text
will be displayed in the field. If the value does not match the data value of an existing item,
and the valueNotFoundText config option is defined, it will be displayed as the default field text.
Otherwise the field will be blank (although the value will still be set).Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
several useful events directly.
See Ext.EventObject for more details on normalized event objects.Appends an event handler to an element. The shorthand version on is equivalent. Typically you will
use Ext.Element.addListener directly on an Element in favor of calling this version.Framework-wide error-handler. Developers can override this method to provide
custom exception-handling. Framework errors will often extend from the base
Ext.Error class.Returns true if the control, meta, shift or alt key was pressed during this event.Appends an event handler to an element. Shorthand for addListener.Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
accessed shorthanded as Ext.onReady().Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
passes new viewport width and height to handlers.Removes all event handers from an element. Typically you will use Ext.Element.removeAllListeners
directly on an Element in favor of calling this version.Removes an event handler from an element. The shorthand version un is equivalent. Typically
you will use Ext.Element.removeListener directly on an Element in favor of calling this version.Removes the passed window resize listener.Removes an event handler from an element. Shorthand for removeListener.Small helper class to make creating Ext.data.Stores from JSON data easier.
A JsonStore will be automatically configured with a Ext.data.JsonReader.
A store configuration would be something like:var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: 'get-images.php',
storeId: 'myStore',
// reader configs
root: 'images',
idProperty: 'name',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});
This store is configured to consume a returned object of the form:{
images: [
{name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
{name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
]
}
An object literal of this form could also be used as the data config option.
*Note: Although not listed here, this class accepts all of the configuration options of
JsonReader.Add Records to the Store and fires the add event. To add Records
to the store from a remote source use load({add:true}).
See also recordType and insert.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.(Local sort only) Inserts the passed Record into the Store at the index where it
should go based on the current sort information.Revert to a view of the Record cache with no filtering applied.Collects unique values for a particular dataIndex from this store.Commit 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.Destroys the store.Calls the specified function for each of the Records in the cache.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Filter the records by a specified property. Alternatively, pass an array of filter
options to filter by more than one property.
Single filter example:
store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
Multiple filter example:
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.Finds the index of the first matching Record in this store by a specific field value.Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.Finds the index of the first matching Record in this store by a specific field value.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the Record at the specified index.Get the Record with the specified id.Gets the number of cached records.
If using paging, this may not be the total size of the dataset. If the data object
used by the Reader contains the dataset size, then the getTotalCount function returns
the dataset size. Note: see the Important note in load.Gets all records modified since the last commit. Modified records are
persisted across load operations (e.g., during paging). Note: deleted records are not
included. See also pruneModifiedRecords and
Ext.data.RecordmarkDirty..Returns a range of Records between specified indices.Returns an object describing the current sort state of this Store.Gets the total number of records in the dataset as returned by the server.
If using paging, for this to be accurate, the data object used by the Reader
must contain the dataset size. For remote data sources, the value for this property
(totalProperty for JsonReader,
totalRecords for XmlReader) shall be returned by a query on the server.
Note: see the Important note in load.Checks to see if this object has any listeners for a specified eventGet the index within the cache of the passed Record.Get the index within the cache of the Record with the passed id.Inserts Records into the Store at the given index and fires the add event.
See also add and addSorted.Returns true if this store is currently filteredLoads the Record cache from the configured proxy using the configured reader.
Notes:
Important: loading is asynchronous! This call will return before the new data has been
loaded. To perform any post-processing where information from the load call is required, specify
the callback function to be called, or use a a 'load' event handler.
If using remote paging, the first load call must specify the start and limit
properties in the options.params property to establish the initial position within the
dataset, and the number of Records to cache on each read from the Proxy.
If using remote sorting, the configured sortInfo
will be automatically included with the posted parameters according to the specified
paramNames.
Loads data from a passed data block and fires the load event. A Reader
which understands the format of the data must have been configured in the constructor.Sorts the contents of this store by multiple field/direction sorters. This is called internally by sort
and would not usually be called manually.
Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
if remoteSort is used.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectQuery the records by a specified property.Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.Reject outstanding changes on all modified records.Relays selected events from the specified Observable as if the events were fired by this.Reloads the Record cache from the configured Proxy using the configured
Reader and the options from the last load operation
performed.
Note: see the Important note in load.Remove Records from the Store and fires the remove event.Remove all Records from the Store and fires the clear event.Remove a Record from the Store at the specified index. Fires the remove event.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Saves all pending changes to the store. If the commensurate Ext.data.Api.actions action is not configured, then
the configured url will be used.
change url
--------------- --------------------
removed records Ext.data.Api.actions.destroy
phantom records Ext.data.Api.actions.create
modified records Ext.data.Api.actions.update
Set the value for a property name in this store's baseParams. Usage:myStore.setBaseParam('foo', {bar:3});Sets the default sort column and order to be used by the next load operation.Sorts the store contents by a single field and direction. This is called internally by sort and would
not usually be called manuallySort the Records.
If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
sorting is used, the cache is sorted internally. See also remoteSort and paramNames.
This function accepts two call signatures - pass in a field name as the first argument to sort on a single
field, or pass in an array of sort configuration objects to sort by multiple fields.
Single sort example:
store.sort('name', 'ASC');
Multi sort example:
store.sort([
{
field : 'name',
direction: 'ASC'
},
{
field : 'salary',
direction: 'DESC'
}
], 'ASC');
In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
above. Any number of sort configs can be added.Sums the value of property for each record between start
and end and returns the result.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)The subclasses of this class provide actions to perform upon Forms.
Instances of this class are only created by a Form when
the Form needs to perform an action such as submit or load. The Configuration options
listed for this class are set through the Form's action methods: submit,
load and doAction
The instance of Action which performed the action is passed to the success
and failure callbacks of the Form's action methods (submit,
load and doAction),
and to the actioncomplete and
actionfailed event handlers.DescriptionReturns the current scroll position of the innerCt elementScrolls to the given component.A Column definition class which renders a numeric data field according to a format string. See the
xtype config option of Ext.grid.Column for more details.Returns the editor defined for this column that was created to wrap the Field
used to edit the cell.Sets a new editor for this column.After the data has been read into the client side cache (Store),
the ColumnModel is used to configure how and what parts of that data will be displayed in the
vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation
of a ColumnModel used by implentations of GridPanel.
Data is mapped into the store's records and then indexed into the ColumnModel using the
dataIndex:
{data source} == mapping ==> {data store} == dataIndex ==> {ColumnModel}
Each Column in the grid's ColumnModel is configured with a
dataIndex to specify how the data within
each record in the store is indexed into the ColumnModel.
There are two ways to initialize the ColumnModel class:
Initialization Method 1: an Array
var colModel = new Ext.grid.ColumnModel([
{ header: "Ticker", width: 60, sortable: true},
{ header: "Company Name", width: 150, sortable: true, id: 'company'},
{ header: "Market Cap.", width: 100, sortable: true},
{ header: "$ Sales", width: 100, sortable: true, renderer: money},
{ header: "Employees", width: 100, sortable: true, resizable: false}
]);
The ColumnModel may be initialized with an Array of Ext.grid.Column column configuration
objects to define the initial layout / display of the columns in the Grid. The order of each
Ext.grid.Column column configuration object within the specified Array defines the initial
order of the column display. A Column's display may be initially hidden using the
hidden config property (and then shown using the column
header menu). Fields that are not included in the ColumnModel will not be displayable at all.
How each column in the grid correlates (maps) to the Ext.data.Record field in the
Store the column draws its data from is configured through the
dataIndex. If the
dataIndex is not explicitly defined (as shown in the
example above) it will use the column configuration's index in the Array as the index.
See Ext.grid.Column for additional configuration options for each column.
Initialization Method 2: an Object
In order to use configuration options from Ext.grid.ColumnModel, an Object may be used to
initialize the ColumnModel. The column configuration Array will be specified in the columns
config property. The defaults config property can be used to apply defaults
for all columns, e.g.:var colModel = new Ext.grid.ColumnModel({
columns: [
{ header: "Ticker", width: 60, menuDisabled: false},
{ header: "Company Name", width: 150, id: 'company'},
{ header: "Market Cap."},
{ header: "$ Sales", renderer: money},
{ header: "Employees", resizable: false}
],
defaults: {
sortable: true,
menuDisabled: true,
width: 100
},
listeners: {
hiddenchange: function(cm, colIndex, hidden) {
saveConfig(colIndex, hidden);
}
}
});
In both examples above, the ability to apply a CSS class to all cells in a column (including the
header) is demonstrated through the use of the id config
option. This column could be styled by including the following css://add this css *after* the core css is loaded
.x-grid3-td-company {
color: red; // entire column will have red font
}
// modify the header row only, adding an icon to the column header
.x-grid3-hd-company {
background: transparent
url(../../resources/images/icons/silk/building.png)
no-repeat 3px 3px ! important;
padding-left:20px;
}
Note that the "Company Name" column could be specified as the
Ext.grid.GridPanel.autoExpandColumn.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys this column model by purging any event listeners. Destroys and dereferences all Columns.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Finds the index of the first matching column for the given dataIndex.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns the editor defined for the cell/column.Returns the column for a specified id.Returns the number of columns.Returns the header for the specified column.Returns the id of the column at the specified index.Returns the tooltip for the specified column.Returns the width for the specified column.Returns the column configs that return true by the passed function that is called
with (columnConfig, index)
// returns an array of column config objects for all hidden columns
var columns = grid.getColumnModel().getColumnsBy(function(c){
return c.hidden;
});Returns the dataIndex for the specified column.
// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);Returns the index for a specified column id.Returns the rendering (formatting) function defined for the column.Returns the total width of all columns.Checks to see if this object has any listeners for a specified eventReturns true if the cell is editable.
var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
columns: [...],
isCellEditable: function(col, row) {
var record = store.getAt(row);
if (record.get('readonly')) { // replace with your condition
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
}
});
var grid = new Ext.grid.GridPanel({
store: store,
colModel: colModel,
...
});Returns true if the column is fixed,
false otherwise.Returns true if the column is hidden,
false otherwise.Returns true if the specified column menu is disabled.Returns true if the column can be resizedReturns true if the specified column is sortable.Moves a column from one position to another.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the header for a column.Sets the tooltip for a column.Sets the width for a column.Reconfigures this column model according to the passed Array of column definition objects.
For a description of the individual properties of a column definition object, see the
Config Options.
Causes the configchange event to be fired. A GridPanel
using this ColumnModel will listen for this event and refresh its UI automatically.Sets the dataIndex for a column.Sets if a column is editable.Sets the editor for a column and destroys the prior editor.Sets if a column is hidden.
myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).Sets the rendering (formatting) function for a column. See Ext.util.Format for some
default formatting functions.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Basic Label field.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Updates the label's innerHTML with the specified string.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.This class extends the GridPanel Class to provide cell editing
on selected columns. The editable columns are specified by providing
an editor in the column configuration.
Editability of columns may be controlled programatically by inserting an implementation
of isCellEditable into the
ColumnModel.
Editing is performed on the value of the field specified by the column's
dataIndex in the backing Store
(so if you are using a renderer in order to display
transformed data, this must be accounted for).
If a value-to-description mapping is used to render a column, then a ComboBox
which uses the same value-to-description
mapping would be an appropriate editor.
If there is a more complex mismatch between the visible data in the grid, and the editable data in
the Store, then code to transform the data both before and after editing can be
injected using the beforeedit and afteredit events.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the grid's ColumnModel.Examines this container's items property
and gets a direct child component of this container.Called to get grid's drag proxy text, by default returns this.ddText.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Returns the grid's underlying element.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Returns the grid's selection model configured by the selModel
configuration option. If no selection model was configured, this will create
and return a RowSelectionModel.Gets the current size of the component's underlying element.Returns the grid's data store.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Returns the grid's GridView object.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectReconfigures the grid to use a different Store and Column Model
and fires the 'reconfigure' event. The View will be bound to the new
objects and refreshed.
Be aware that upon reconfiguring a GridPanel, certain existing settings may become
invalidated. For example the configured autoExpandColumn may no longer exist in the
new ColumnModel. Also, an existing PagingToolbar will still be bound
to the old Store, and will need rebinding. Any plugins might also need reconfiguring
with the new data.Relays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Starts editing the specified for the specified row/columnStops any active editingSuspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.The defaults collection enables customizing the default properties of UpdaterThis class encapsulates a collection of DOM elements, providing methods to filter
members, or to perform collective actions upon the whole set.
Although they are not listed, this class supports all of the methods of Ext.Element and
Ext.Fx. The methods from these classes will be performed on all the elements in this collection.
All methods return this and can be chained.
Usage:
var els = Ext.select("#some-el div.some-class", true);
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class', true);
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);Iterates each element in this composite
calling the supplied function using Ext.each.Adds elements to this Composite object.Removes all elements.Returns true if this composite contains the passed elementCalls the passed function for each element in this composite.Clears this Composite and adds the elements passed.Filters this composite to only elements that match the passed selector.Returns the first ElementReturns the number of elements in this Composite.Find the index of the passed element within the composite collection.Returns a flyweight Element of the dom element object at the specified indexReturns the last ElementRemoves the specified element(s).Replaces the specified element with the passed element.This layout manager is specifically designed for rendering and managing child Components of
forms. It is responsible for rendering the labels of
Fields.
This layout manager is used when a Container is configured with the layout:'form'
layout config option, and should generally not need to be created directly
via the new keyword. See Ext.Container.layout for additional details.
In an application, it will usually be preferrable to use a FormPanel
(which is configured with FormLayout as its layout class by default) since it also provides built-in
functionality for loading, validating and submitting the form.
A Container using the FormLayout layout manager (e.g.
Ext.form.FormPanel or specifying layout:'form') can also accept the following
layout-specific config properties:
hideLabels
labelAlign
labelPad
labelSeparator
labelWidth
Any Component (including Fields) managed by FormLayout accepts the following as a config option:
anchor
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
configuring it with a non-null fieldLabel. Components configured
in this way may be configured with the following options which affect the way the FormLayout renders them:
clearCls
fieldLabel
hideLabel
itemCls
labelSeparator
labelStyle
Example usage:
// Required if showing validation messages
Ext.QuickTips.init();
// While you can create a basic Panel with layout:'form', practically
// you should usually use a FormPanel to also get its form functionality
// since it already creates a FormLayout internally.
var form = new Ext.form.FormPanel({
title: 'Form Layout',
bodyStyle: 'padding:15px',
width: 350,
defaultType: 'textfield',
defaults: {
// applied to each contained item
width: 230,
msgTarget: 'side'
},
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false,
labelSeparator: ':' // override labelSeparator layout config
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
xtype: 'textarea',
hideLabel: true, // override hideLabels layout config
name: 'msg',
anchor: '100% -53'
}
],
buttons: [
{text: 'Save'},
{text: 'Cancel'}
],
layoutConfig: {
labelSeparator: '~' // superseded by assignment below
},
// config options applicable to container when layout='form':
hideLabels: false,
labelAlign: 'left', // or 'right' or 'top'
labelSeparator: '>>', // takes precedence over layoutConfig value
labelWidth: 65, // defaults to 100
labelPad: 8 // defaults to 5, must specify labelWidth to be honored
});Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
This method returns an object hash containing properties used by the layout's fieldTpl
to create a correctly wrapped, labeled and styled form Field. This may be overriden to
create custom layouts. The properties which must be returned are:
itemCls : StringThe CSS class applied to the outermost div wrapper
that contains this field label and field element (the default class is 'x-form-item' and itemCls
will be added to that). If supplied, itemCls at the field level will override the default itemCls
supplied at the container level.
id : StringThe id of the Field
labelStyle : String
A CSS style specification string to add to the field label for this field (defaults to '' or the
layout's value for labelStyle).
label : StringThe text to display as the label for this
field (defaults to the field's configured fieldLabel property)
labelSeparator : StringThe separator to display after
the text of the label for this field (defaults to a colon ':' or the
layout's value for labelSeparator). To hide the separator use empty string ''.
elementStyle : StringThe styles text for the input element's wrapper.
clearCls : StringThe CSS class to apply to the special clearing div
rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Ext.direct.Provider is an abstract class meant to be extended.
For example ExtJs implements the following subclasses:
Provider
|
+---JsonProvider
|
+---PollingProvider
|
+---RemotingProviderAdds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventReturns whether or not the server-side is currently connected.
Abstract method for subclasses to implement.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)This class encapsulates the user interface of an Ext.grid.GridPanel.
Methods of this class may be used to access user interface elements to enable
special display effects. Do not change the DOM structure of the user interface.
This class does not provide ways to manipulate the underlying data. The data
model of a Grid is held in an Ext.data.Store.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Return the index of the grid column which contains the passed HTMLElement.
See also findRowIndexReturn the HtmlElement representing the grid row which contains the passed element.Return the HtmlElement representing the grid row body which contains the passed element.Return the index of the grid row which contains the passed HTMLElement.
See also findCellIndexFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Focuses the specified cell.Focuses the specified row.Returns the grid's <td> HtmlElement at the specified coordinates.Returns the total internal width available to the grid, taking the scrollbar into accountReturn the <td> HtmlElement which represents the Grid's header cell for the specified column index.Return the <div> HtmlElement which represents a Grid row for the specified index.Override this function to apply custom CSS classes to rows during rendering. You can also supply custom
parameters to the row template for the current row to customize how it is rendered using the rowParams
parameter. This function should return the CSS class name (or empty string '' for none) that will be added
to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string
(e.g., 'my-class another-class'). Example usage:
viewConfig: {
forceFit: true,
showPreview: true, // custom property
enableRowBody: true, // required to create a second, full-width row to show expanded Record data
getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
if(this.showPreview){
rp.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},Called by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provides
the column hide/show functionality based on the check state of the menu item. A different implementation can be provided
if needed.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRefreshs the grid UIRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Scrolls the grid to the topSuspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A simple class that renders text directly into a toolbar
(with css class:'xtb-text'). Example usage:
new Ext.Panel({
tbar : [
{xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
]
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Updates this item's text, setting the text to be used as innerHTML.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Error class for Ext.data.Api errorsgetMessagegetNametoJsonStandard container used for grouping items within a form.
var form = new Ext.FormPanel({
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 700,
renderTo: document.body,
layout:'column', // arrange items in columns
defaults: { // defaults applied to items
layout: 'form',
border: false,
bodyStyle: 'padding:4px'
},
items: [{
// Fieldset in Column 1
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
autoHeight:true,
defaults: {
anchor: '-20' // leave room for error icon
},
defaultType: 'textfield',
items :[{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}
]
},{
// Fieldset in Column 2 - Panel inside
xtype:'fieldset',
title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
autoHeight:true,
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true, // fieldset initially collapsed
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 100
}]
}]
});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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)This function is called by the fieldset's checkbox when it is toggled (only applies when
checkboxToggle = true). This method should never be called externally, but can be
overridden to provide custom behavior when the checkbox is toggled if needed.Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.Returns the handle registered for a DOM Node by idReturns the handle that is registered for the DOM node that is the target of the eventReturns a custom data object that is registered for a DOM node by idReturns a custom data object that is registered for the DOM node that is the target of the eventResgister a drag drop elementUnregister a drag drop elementError class for JsonReaderThis is a layout that manages multiple Panels in an expandable accordion style such that only
one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.
Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.
This class is intended to be extended or created via the layout
configuration property. See Ext.Container.layout for additional details.
Example usage:
var accordion = new Ext.Panel({
title: 'Accordion Layout',
layout:'accordion',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '<p>Panel content!</p>'
},{
title: 'Panel 2',
html: '<p>Panel content!</p>'
},{
title: 'Panel 3',
html: '<p>Panel content!</p>'
}]
});Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Sets the active (expanded) item in the layout.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this chart and refreshes it.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the styles on all series in the Chart.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a single style value on the Chart instance.Resets all styles on the Chart instance.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.The default Provider implementation which saves state via cookies.
Usage:
var cp = new Ext.state.CookieProvider({
path: "/cgi-bin/",
expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
domain: "extjs.com"
});
Ext.state.Manager.setProvider(cp);Clears a value from the stateDecodes a string previously encoded with encodeValue.Encodes a value including type information. Decode with decodeValue.Returns the current value for a keySets the value for a keyA non-rendering placeholder item which instructs the Toolbar's Layout to begin using
the right-justified button container.
new Ext.Panel({
tbar : [
'Item 1',
{xtype: 'tbfill'}, // or '->'
'Item 2'
]
});Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.A DragTracker listens for drag events on an Element and fires events at the start and end of the drag,
as well as during the drag. This is useful for components such as Ext.slider.MultiSlider, where there is
an element that can be dragged around to change the Slider's value.
DragTracker provides a series of template methods that should be overridden to provide functionality
in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd.
See Ext.slider.MultiSlider's initEvents function for an example implementation.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns the drag targetChecks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Template method which should be overridden by each DragTracker instance. Called when the user first clicks and
holds the mouse button down. Return false to disallow the dragTemplate method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed
(e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)Template method which should be overridden by each DragTracker instance. Called when a drag operation starts
(e.g. the user has moved the tracked element beyond the specified tolerance)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)CartesianSeries class for the charts widget.An extended Ext.Element object that supports a shadow and shim, constrain to viewport and
automatic maintaining of shadow/shim positions.Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.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)Sets up event handlers to add and remove a css class when this element has the focusSets up event handlers to add and remove a css class when the mouse is over this elementConvenience method for constructing a KeyMapCreates a KeyMap for this elementAppends an event handler to this element. The shorthand version on is equivalent.Aligns this 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]);Anchors an element to another element and realigns it when the window is resized.Perform custom animation on this element.
Animation Properties
The Animation Control Object enables gradual transitions for any member of an
element's style object that takes a numeric value including but not limited to
these properties:
bottom, top, left, right
height, width
margin, padding
borderWidth
opacity
fontSize
lineHeight
Animation Property Attributes
Each Animation Property is a config object with optional properties:
by* : relative change - start at current value, change by this value
from : ignore current value, start from this value
to* : start at current value, go to this value
unit : any allowable unit specification
* do not specify both to and by for an animation property
Animation Types
The supported animation types:
'run' : Default
var el = Ext.get('complexEl');
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'run' // animation type ('run','color','motion','scroll')
);
'color'
Animates transition of background, text, or border colors.
el.animate(
// animation control object
{
color: { to: '#06e' },
backgroundColor: { to: '#e06' }
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'color' // animation type ('run','color','motion','scroll')
);
'motion'
Animates the motion of an element to/from specific points using optional bezier
way points during transit.
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
points: {
to: [50, 100], // go to this point
control: [ // optional bezier way points
[ 600, 800],
[-100, 200]
]
}
},
3000, // animation duration (milliseconds!)
null, // callback
'easeOut', // easing method
'motion' // animation type ('run','color','motion','scroll')
);
'scroll'
Animate horizontal or vertical scrolling of an overflowing page element.
el.animate(
// animation control object
{
scroll: {to: [400, 300]}
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'scroll' // animation type ('run','color','motion','scroll')
);
Appends the passed element(s) to this elementAppends this element to the passed elementMore flexible version of setStyle for setting style properties.Tries to blur the element. Any exceptions are caught and ignored.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,
Ext.Panel when frame=true, Ext.Window). The markup
is of this form:
Ext.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().addClass("x-box-blue");Centers the Element in either the viewport, or another Element.Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).Removes worthless text nodesClears any opacity settings from this element. Required in some cases for IE.Clear positioning back to the default when the document was loadedStore the current overflow setting and clip overflow on the element - use unclip to removeReturns true if this element is an ancestor of the passed elementCreates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.Creates a proxy element of this elementCreates an iframe shim for this element to keep selects and other windowed objects from
showing through.Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).Convenience method for setVisibilityMode(Element.DISPLAY)Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)Gets the first child, skipping text nodesGets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
the dom node can be overwritten by other code. Shorthand of Ext.Element.fly
Use this to make one-time references to DOM elements which are not going to be accessed again either by
application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get
will be more appropriate to take advantage of the caching provided by the Ext.Element class.Tries to focus the element. Any exceptions are caught and ignored.Gets the x,y coordinates to align this element with another element. See alignTo for more info on the
supported position values.Gets the x,y coordinates specified by the anchor position on the element.Returns the value of an attribute from the element's underlying DOM node.Returns the value of a namespaced attribute from the element's underlying DOM node.Gets the width of the border(s) for the specified side(s)Gets the bottom Y coordinate of the element (element Y position + element height)Return an object defining the area of this Element which can be passed to setBox to
set another Element's size/location to match this element.Calculates the x, y to center this element on the screenReturn the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
are convert to standard 6 digit hex color.Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
if a height has not been set using CSS.Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
if a width has not been set using CSS.Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
for more information about the sides.Returns the offset height of the elementGets the left X coordinateReturns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
then it returns the calculated width of the sides (see getPadding)Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.Gets the width of the padding(s) for the specified side(s)Gets an object with all CSS positioning properties. Useful along with setPostioning to get
snapshot before performing an update and then restoring the element.Returns the region of the given element.
The element must be part of the DOM tree to have a region (display:none or elements not appended return false).Gets the right X coordinate of the element (element X position + element width)Returns the current scroll position of the element.Returns the size of the element.Normalizes currentStyle and computedStyle.Returns the dimensions of the element available to lay content out in.
getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
To obtain the size excluding scrollbars, use getViewSize
Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.Returns an object with properties matching the styles requested.
For example, el.getStyles('color', 'font-size', 'width') might return
{'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.Returns the width in pixels of the passed text, or the width of the text in this Element.Gets the top Y coordinateGets this element's UpdaterReturns the value of the "value" attributeReturns the dimensions of the element available to lay content out in.
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
example:var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
To obtain the size including scrollbars, use getStyleSize
Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.Returns the offset width of the elementGets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Checks if the specified CSS class exists on this element's DOM node.Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.Initializes a Ext.dd.DD drag drop object for this element.Initializes a Ext.dd.DDProxy object for this element.Initializes a Ext.dd.DDTarget object for this element.Inserts this element after the passed element in the DOMInserts this element before the passed element in the DOMInserts (or creates) an element (or DomHelper config) as the first child of this elementInserts an html fragment into this elementInserts (or creates) the passed element (or DomHelper config) as a sibling of this elementReturns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)Tests various css rules/browsers to determine if this element uses a border boxReturns true if display is not "none"Returns true if this element is maskedReturns true if this element is scrollable.Checks whether the element is currently visible using both visibility and display properties.Gets the last child, skipping text nodesUpdates the innerHTML of this Element
from a specified URL. Note that this is subject to the Same Origin Policy
Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.Puts a mask over this element to disable user interaction. Requires core.css.
This method can only be applied to elements which accept child nodes.Move this element relative to its current position.Sets the position of the element in page coordinates, regardless of how the element is positioned.
The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Gets the next sibling, skipping text nodesAppends an event handler (shorthand for addListener).Gets the parent node for this element, optionally chaining up trying to match a selectorInitializes positioning on this element. If a desired position is not passed, it will make the
the element positioned relative IF it is not already positioned.Gets the previous sibling, skipping text nodesRecursively removes all previous added listeners from this element and its childrenSelects child nodes based on the passed CSS selector (the selector should not contain an id).Adds one or more CSS classes to this element and removes the same class(es) from all siblings.Create an event handler on this element such that when the event fires and is handled by this element,
it will be relayed to another object (i.e., fired again as if it originated from that object instead).Removes this element's dom reference. Note that event and cache removal is handled at Ext.removeNodeRemoves all previous added listeners from this elementRemove any anchor to this element. See anchorTo.Removes one or more CSS classes from the element.Removes an event handler from this element. The shorthand version un is equivalent.
Note: if a scope was explicitly specified when adding the
listener, the same scope must be specified here.
Example:
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);Forces the browser to repaint this elementReplaces the passed element with this elementReplaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.Replaces this element with the passed elementScrolls this element the specified direction. Does bounds checking to make sure the scroll is
within this element's scrollable range.Scrolls this element into view within the passed container.Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)Sets the element's CSS bottom style.Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.Set the height of this Element.
// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.update("finished"); }
});Sets the element's left position directly using CSS style (instead of setX).Quick set left and top adding default unitsSets the position of the element in page coordinates, regardless of how the element is positioned.
The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Set the opacity of the elementSet positioning with an object returned by getPositioning().Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.Sets the element's CSS right style.Set the size of this Element. If animation is true, both width and height will be animated concurrently.Wrapper for setting style properties, also takes single object parameter of multiple styles.Sets the element's top position directly using CSS style (instead of setY).Sets the element's visibility mode. When setVisible() is called it
will use this to determine whether to set the visibility or the display property.Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.Set the width of this Element.Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Sets the position of the element in page coordinates, regardless of how the element is positioned.
The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.Stops the specified event(s) from bubbling and optionally prevents the default actionToggles the element's visibility or display, depending on visibility mode.Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).Translates the passed page coordinates into left/top css values for this elementRemoves an event handler from this element (see removeListener for additional notes).Return clipping (overflow) to original clipping before clip was calledRemoves a previously applied mask.Disables text selection for this element (normalized across browsers)Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
This is a shortcut for findParentNode() that always returns an Ext.Element.Update the innerHTML of this elementCreates and wraps this element with another elementThis class is intended to be extended or created via the layout
configuration property. See Ext.Container.layout for additional details.Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)Represents an HTML fragment template. Templates may be precompiled
for greater performance.
For example usage see the constructor.Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.Applies the supplied values to the template and appends
the new node(s) to the specified el.
For example usage see the constructor.Alias for applyTemplate
Returns an HTML fragment of this template with the specified values applied.Returns an HTML fragment of this template with the specified values applied.Compiles the template into an internal function, eliminating the RegEx overhead.Applies the supplied values to the template and inserts the new node(s) after el.Applies the supplied values to the template and inserts the new node(s) before el.Applies the supplied values to the template and inserts the new node(s) as the first child of el.Applies the supplied values to the template and overwrites the content of el with the new node(s).Sets the HTML used as the template and optionally compiles it.A custom wrapper for the Ext.grid.PropertyGrid's Ext.data.Store. This class handles the mapping
between the custom data source objects supported by the grid and the Ext.grid.PropertyRecord format
required for compatibility with the underlying store. Generally this class should not need to be used directly --
the grid's data should be accessed from the underlying store via the store property.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)A menu containing a Ext.ColorPalette Component.
Notes:
Although not listed here, the constructor for this class
accepts all of the configuration options of Ext.ColorPalette.
If subclassing ColorMenu, any configuration options for the ColorPalette must be
applied to the initialConfig property of the ColorMenu.
Applying ColorPalette configuration settings to
this will not affect the ColorPalette's configuration.
*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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a CSS class to the component's underlying element.Adds an Ext.Element object to the menuAdds the specified events to the list of events which this Observable may fire.Adds an existing object based on Ext.menu.BaseItem to the menuAppends an event handler to this object.Creates a new Ext.menu.Item based an the supplied config object and adds it to the menuAdds a separator bar to the menuCreates a new Ext.menu.TextItem with the supplied text and adds it to the menuApply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHides this menu and optionally all parent menusInserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.If floating=true, shows this menu relative to
another element using showat, otherwise uses Ext.Component.show.Displays this menu at a specific xy position and fires the 'show' event if a
handler for the 'beforeshow' event does not return false cancelling the operation.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Hides a visible tip or cancels an impending show for a particular element.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHides this tooltip if visible.Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceLoads this content panel immediately with content returned from an XHR call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectConfigures a new quick tip instance and assigns it to a target element. The following config values are
supported (for example usage, see the Ext.QuickTips class header):
autoHide
cls
dismissDelay (overrides the singleton value)
target (required)
text (required)
title
widthRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Shows this tooltip at the current event target XY position.Shows this tip at the specified XY position. Example usage:
// Show the tip at x:50 and y:100
tip.showAt([50,100]);Experimental. Shows this tip at a position relative to another element using a standard Ext.Element.alignTo
anchor position value. Example usage:
// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');
// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Removes this quick tip from its element and destroys it.Update the content area of a component.Sets the current box measurements of the component's underlying element.A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
display items. Item extends the base functionality of Ext.menu.BaseItem by adding menu-specific
activation and click handling.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Sets the function that will handle click events for this item (equivalent to passing in the handler
config property). If an existing handler is already registered, it will be unregistered for you.Sets the CSS class to apply to the item's icon elementSets the text to display in this menu itemConvenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.Wraps a Slider so it can be used as a form field.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.
Each subclass should override or augment the return value to provide their own errorsGets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current value for this field.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.BasicForm.trackResetOnLoadResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the maximum field value.Sets the minimum field value.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the value for this field.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.The base class that other non-interacting Toolbar Item classes should extend in order to
get some basic common toolbar item functionality.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.This class encapsulates a collection of DOM elements, providing methods to filter
members, or to perform collective actions upon the whole set.
Although they are not listed, this class supports all of the methods of Ext.Element and
Ext.Fx. The methods from these classes will be performed on all the elements in this collection.
Example:var els = Ext.select("#some-el div.some-class");
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class');
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
Adds elements to this Composite object.Removes all elements.Returns true if this composite contains the passed elementCalls the passed function for each element in this composite.Clears this Composite and adds the elements passed.Filters this composite to only elements that match the passed selector.Returns the first ElementReturns the number of elements in this Composite.Find the index of the passed element within the composite collection.Returns a flyweight Element of the dom element object at the specified indexReturns the last ElementRemoves the specified element(s).Replaces the specified element with the passed element.A DragDrop implementation that inserts an empty, bordered div into
the document that follows the cursor during drag operations. At the time of
the click, the frame div is resized to the dimensions of the linked html
element, and moved to the exact location of the linked element.
References to the "frame" element refer to the single proxy element that
was created to be dragged in place of all DDProxy elements on the
page.Lets you specify a css class of elements that will not initiate a dragLets you to specify an element id for a child of a drag handle
that should not initiate a dragAllows 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.Add 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.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 up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are calledSets the pointer offset to the distance between the linked element's top
left corner and the location the element was clickedEvent that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.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.Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.Clears any tick interval defined for this instanceInitializes 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");
}
});Creates the proxy element if it does not yet existFired when we are done dragging the objectReturns a reference to the actual element to drag. By default this is
the same as the html element, but it can be assigned to another
element. An example of this can be found in Ext.dd.DDProxyReturns a reference to the linked elementSets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclassInitialization for the drag frame element. Must be called in the
constructor of all subclassesInitializes Targeting functionality only... the object does not
get a mousedown handler.Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)Checks the tag exclusion list to see if this click should be ignoredLock this instanceOverride the onAvailable method to do what is needed after the initial
position was determined.Abstract method called during the onMouseMove event while dragging an
object.Abstract method called when this item is dropped on another DragDrop
objAbstract method called when this element fist begins hovering over
another DragDrop objAbstract method called when we are no longer hovering over an elementAbstract method called when this element is hovering over another
DragDrop objAbstract method called when this item is dropped on an area with no
drop targetEvent handler that fires when a drag/drop obj gets a mousedownEvent handler that fires when a drag/drop obj gets a mouseupRemove's this instance from the supplied interaction groupUnsets an invalid css classUnsets an invalid handle idUnsets an excluded tag name set by addInvalidHandleTyperesetConstraints must be called if you manually reposition a dd element.Sets the pointer offset. You can call this directly to force the
offset to be in a particular location (e.g., pass in 0,0 to set it
to the center of the object)Allows you to specify that an element other than the linked element
will be moved with the cursor during a dragSets the drag 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.Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example of this would be if
you have a content div with text and links. Clicking anywhere in the
content area would normally start the drag operation. Use this method
to specify that an element inside of the content div is the element
that starts the drag operation.Stores the initial placement of the linked element.Allows you to set an element outside of the linked element as a drag
handleConfigures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targeting calculations.
Supports css-style shorthand; if only one parameter is passed, all sides
will have that padding, and if only two are passed, the top and bottom
will have the first param, the left and right the second.By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of the element. Pass in
0,0 for the parameters if you want to lock the drag to the y axis.By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element. Pass in 0,0 for the
parameters if you want to lock the drag to the x axis.Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.toString methodUnlock this instaceRemove all drag and drop hooks for this elementGeneral error class for Ext.data.DataReadergetMessagegetNametoJsonAdds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Insert node(s) as the last child node of this node.Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the bubble is stopped.Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the cascade is stopped on that branch.Collapse this node.Collapse all child nodesReturns true if this node is an ancestor (at any point) of the passed node.Destroys the node.Disables this nodeInterates the child nodes of this node, calling the specified function with each node. The arguments to the function
will be the args provided or the current node. If the function returns false at any point,
the iteration stops.Enables this nodeEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Ensures all parent nodes are expanded, and if necessary, scrolls
the node into view.Expand this node.Expand all child nodesFinds the first child that has the attribute with the specified value.Finds the first child by a custom function. The child matches if the function passed returns true.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns depth of this node (the root node has a depth of 0)Returns the tree this node is in.Returns the path for this node. The path can be used to expand or select this node programmatically.Returns the UI object for this node.Returns true if this node has one or more child nodes, else false.Checks to see if this object has any listeners for a specified eventReturns the index of a child nodeInserts the first node before the second node in this nodes childNodes collection.Returns true if the passed node is an ancestor (at any point) of this node.Returns true if this node has one or more child nodes, or if the expandable
node attribute is explicitly specified as true (see attributes), otherwise returns false.Returns true if this node is expandedReturns true if this node is the first child of its parentReturns true if this node is the last child of its parentReturns true if this node is a leafReturns true if this node has been loadedReturns true if this node is currently loadingReturns true if this node is selectedReturns the child node at the specified index.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Trigger a reload for this nodeRemoves this node from its parentRemoves all child nodes from this node.Removes a child node from this node.Removes an event handler.Replaces one child node in this node with another.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Triggers selection of this nodeSets the class on this node.Sets the href for the node.Sets the icon for this node.Sets the icon class for this node.Changes the id of this node.Sets the text for this nodeSets the tooltip for this node.Sorts this nodes children using the supplied sort function.Suspend the firing of all events. (see resumeEvents)Toggles expanded/collapsed state of the nodeRemoves an event handler (shorthand for removeListener.)Triggers deselection of this nodeHandles mapping keys to actions for an element. One key map can be used for multiple actions.
The constructor accepts the same config object as defined by addBinding.
If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
combination it will call the function with this signature (if the match is a multi-key
combination the callback will still be called only once): (String key, Ext.EventObject e)
A KeyMap can also handle a string representation of keys.
Usage:
// map one key by key code
var map = new Ext.KeyMap("my-element", {
key: 13, // or Ext.EventObject.ENTER
fn: myHandler,
scope: myObject
});
// map multiple keys to one action by string
var map = new Ext.KeyMap("my-element", {
key: "a\r\n\t",
fn: myHandler,
scope: myObject
});
// map multiple keys to multiple actions by strings and array of codes
var map = new Ext.KeyMap("my-element", [
{
key: [10,13],
fn: function(){ alert("Return was pressed"); }
}, {
key: "abc",
fn: function(){ alert('a, b or c was pressed'); }
}, {
key: "\t",
ctrl:true,
shift:true,
fn: function(){ alert('Control + shift + tab was pressed.'); }
}
]);
Note: A KeyMap starts enabledAdd a new binding to this KeyMap. The following config object properties are supported:
Property Type Description
---------- --------------- ----------------------------------------------------------------------
key String/Array A single keycode or an array of keycodes to handle
shift Boolean True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined)
ctrl Boolean True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined)
alt Boolean True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined)
handler Function The function to call when KeyMap finds the expected key combination
fn Function Alias of handler (for backwards-compatibility)
scope Object The scope of the callback function
stopEvent Boolean True to stop the event from bubbling and prevent the default browser action if the key was handled by the KeyMap (defaults to false)
Usage:
// Create a KeyMap
var map = new Ext.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
});Disable this KeyMapEnables this KeyMapReturns true if this KeyMap is enabledShorthand for adding a single key listenerConvenience function for setting disabled/enabled by boolean.Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
All instances of this class inherit the methods of Ext.Fx making visual effects easily available to all DOM elements.
Note that the events documented in this class are not Ext events, they encapsulate browser events. To
access the underlying browser event, see Ext.EventObject.browserEvent. Some older
browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.
Usage:
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
Animations
When an element is manipulated, by default there is no animation.
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
Many of the functions for manipulating an element have an optional "animate" parameter. This
parameter can be specified as boolean (true) for default animation effects.
// default animation
el.setWidth(100, true);
To configure the effects, an object literal with animation options to use as the Element animation
configuration object can also be specified. Note that the supported Element animation configuration
options are a subset of the Ext.Fx animation options specific to Fx effects. The supported
Element animation configuration options are:
Option Default Description
--------- -------- ---------------------------------------------
duration .35 The duration of the animation in seconds
easing easeOut The easing method
callback none A function to execute when the anim completes
scope this The scope (this) of the callback function
// Element animation options object
var opt = {
duration: 1,
easing: 'elasticIn',
callback: this.foo,
scope: this
};
// animation with some options set
el.setWidth(100, opt);
The Element animation object being used for the animation will be set on the options
object as "anim", which allows you to stop or manipulate the animation. Here is an example:
// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
opt.anim.stop();
}
Also see the animate method for another animation technique.
Composite (Collections of) Elements
For working with collections of Elements, see Ext.CompositeElementAdds one or more CSS classes to the element. Duplicate classes are automatically filtered out.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)Sets up event handlers to add and remove a css class when this element has the focusSets up event handlers to add and remove a css class when the mouse is over this elementConvenience method for constructing a KeyMapCreates a KeyMap for this elementAppends an event handler to this element. The shorthand version on is equivalent.Aligns this 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]);Anchors an element to another element and realigns it when the window is resized.Perform custom animation on this element.
Animation Properties
The Animation Control Object enables gradual transitions for any member of an
element's style object that takes a numeric value including but not limited to
these properties:
bottom, top, left, right
height, width
margin, padding
borderWidth
opacity
fontSize
lineHeight
Animation Property Attributes
Each Animation Property is a config object with optional properties:
by* : relative change - start at current value, change by this value
from : ignore current value, start from this value
to* : start at current value, go to this value
unit : any allowable unit specification
* do not specify both to and by for an animation property
Animation Types
The supported animation types:
'run' : Default
var el = Ext.get('complexEl');
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'run' // animation type ('run','color','motion','scroll')
);
'color'
Animates transition of background, text, or border colors.
el.animate(
// animation control object
{
color: { to: '#06e' },
backgroundColor: { to: '#e06' }
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'color' // animation type ('run','color','motion','scroll')
);
'motion'
Animates the motion of an element to/from specific points using optional bezier
way points during transit.
el.animate(
// animation control object
{
borderWidth: {to: 3, from: 0},
opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
points: {
to: [50, 100], // go to this point
control: [ // optional bezier way points
[ 600, 800],
[-100, 200]
]
}
},
3000, // animation duration (milliseconds!)
null, // callback
'easeOut', // easing method
'motion' // animation type ('run','color','motion','scroll')
);
'scroll'
Animate horizontal or vertical scrolling of an overflowing page element.
el.animate(
// animation control object
{
scroll: {to: [400, 300]}
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'scroll' // animation type ('run','color','motion','scroll')
);
Appends the passed element(s) to this elementAppends this element to the passed elementMore flexible version of setStyle for setting style properties.Tries to blur the element. Any exceptions are caught and ignored.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,
Ext.Panel when frame=true, Ext.Window). The markup
is of this form:
Ext.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().addClass("x-box-blue");Centers the Element in either the viewport, or another Element.Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).Removes worthless text nodesClears any opacity settings from this element. Required in some cases for IE.Clear positioning back to the default when the document was loadedStore the current overflow setting and clip overflow on the element - use unclip to removeReturns true if this element is an ancestor of the passed elementCreates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.Creates a proxy element of this elementCreates an iframe shim for this element to keep selects and other windowed objects from
showing through.Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).Convenience method for setVisibilityMode(Element.DISPLAY)Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)Gets the first child, skipping text nodesGets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
the dom node can be overwritten by other code. Shorthand of Ext.Element.fly
Use this to make one-time references to DOM elements which are not going to be accessed again either by
application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get
will be more appropriate to take advantage of the caching provided by the Ext.Element class.Tries to focus the element. Any exceptions are caught and ignored.Retrieves Ext.Element objects.
This method does not retrieve Components. This method
retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
its ID, use Ext.ComponentMgr.get.
Uses simple caching to consistently return the same object. Automatically fixes if an
object was recreated with the same id via AJAX or DOM.Gets the x,y coordinates to align this element with another element. See alignTo for more info on the
supported position values.Gets the x,y coordinates specified by the anchor position on the element.Returns the value of an attribute from the element's underlying DOM node.Returns the value of a namespaced attribute from the element's underlying DOM node.Gets the width of the border(s) for the specified side(s)Gets the bottom Y coordinate of the element (element Y position + element height)Return an object defining the area of this Element which can be passed to setBox to
set another Element's size/location to match this element.Calculates the x, y to center this element on the screenReturn the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
are convert to standard 6 digit hex color.Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
if a height has not been set using CSS.Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
if a width has not been set using CSS.Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
for more information about the sides.Returns the offset height of the elementGets the left X coordinateReturns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
then it returns the calculated width of the sides (see getPadding)Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates.Gets the width of the padding(s) for the specified side(s)Gets an object with all CSS positioning properties. Useful along with setPostioning to get
snapshot before performing an update and then restoring the element.Returns the region of the given element.
The element must be part of the DOM tree to have a region (display:none or elements not appended return false).Gets the right X coordinate of the element (element X position + element width)Returns the current scroll position of the element.Returns the size of the element.Normalizes currentStyle and computedStyle.Returns the dimensions of the element available to lay content out in.
getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
To obtain the size excluding scrollbars, use getViewSize
Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.Returns an object with properties matching the styles requested.
For example, el.getStyles('color', 'font-size', 'width') might return
{'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.Returns the width in pixels of the passed text, or the width of the text in this Element.Gets the top Y coordinateGets this element's UpdaterReturns the value of the "value" attributeReturns the dimensions of the element available to lay content out in.
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
example:var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
To obtain the size including scrollbars, use getStyleSize
Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.Returns the offset width of the elementGets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Checks if the specified CSS class exists on this element's DOM node.Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.Initializes a Ext.dd.DD drag drop object for this element.Initializes a Ext.dd.DDProxy object for this element.Initializes a Ext.dd.DDTarget object for this element.Inserts this element after the passed element in the DOMInserts this element before the passed element in the DOMInserts (or creates) an element (or DomHelper config) as the first child of this elementInserts an html fragment into this elementInserts (or creates) the passed element (or DomHelper config) as a sibling of this elementReturns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)Tests various css rules/browsers to determine if this element uses a border boxReturns true if display is not "none"Returns true if this element is maskedReturns true if this element is scrollable.Checks whether the element is currently visible using both visibility and display properties.Gets the last child, skipping text nodesUpdates the innerHTML of this Element
from a specified URL. Note that this is subject to the Same Origin Policy
Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.Puts a mask over this element to disable user interaction. Requires core.css.
This method can only be applied to elements which accept child nodes.Move this element relative to its current position.Sets the position of the element in page coordinates, regardless of how the element is positioned.
The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Gets the next sibling, skipping text nodesAppends an event handler (shorthand for addListener).Gets the parent node for this element, optionally chaining up trying to match a selectorInitializes positioning on this element. If a desired position is not passed, it will make the
the element positioned relative IF it is not already positioned.Gets the previous sibling, skipping text nodesRecursively removes all previous added listeners from this element and its childrenSelects child nodes based on the passed CSS selector (the selector should not contain an id).Adds one or more CSS classes to this element and removes the same class(es) from all siblings.Create an event handler on this element such that when the event fires and is handled by this element,
it will be relayed to another object (i.e., fired again as if it originated from that object instead).Removes this element's dom reference. Note that event and cache removal is handled at Ext.removeNodeRemoves all previous added listeners from this elementRemove any anchor to this element. See anchorTo.Removes one or more CSS classes from the element.Removes an event handler from this element. The shorthand version un is equivalent.
Note: if a scope was explicitly specified when adding the
listener, the same scope must be specified here.
Example:
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);Forces the browser to repaint this elementReplaces the passed element with this elementReplaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.Replaces this element with the passed elementScrolls this element the specified direction. Does bounds checking to make sure the scroll is
within this element's scrollable range.Scrolls this element into view within the passed container.Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)Sets the element's CSS bottom style.Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.Set the height of this Element.
// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.update("finished"); }
});Sets the element's left position directly using CSS style (instead of setX).Quick set left and top adding default unitsSets the position of the element in page coordinates, regardless of how the element is positioned.
The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Set the opacity of the elementSet positioning with an object returned by getPositioning().Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.Sets the element's CSS right style.Set the size of this Element. If animation is true, both width and height will be animated concurrently.Wrapper for setting style properties, also takes single object parameter of multiple styles.Sets the element's top position directly using CSS style (instead of setY).Sets the element's visibility mode. When setVisible() is called it
will use this to determine whether to set the visibility or the display property.Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.Set the width of this Element.Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Sets the position of the element in page coordinates, regardless of how the element is positioned.
The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.Stops the specified event(s) from bubbling and optionally prevents the default actionToggles the element's visibility or display, depending on visibility mode.Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).Translates the passed page coordinates into left/top css values for this elementRemoves an event handler from this element (see removeListener for additional notes).Return clipping (overflow) to original clipping before clip was calledRemoves a previously applied mask.Disables text selection for this element (normalized across browsers)Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
This is a shortcut for findParentNode() that always returns an Ext.Element.Update the innerHTML of this elementCreates and wraps this element with another elementStandard form container.
Layout
By default, FormPanel is configured with layout:'form' to use an Ext.layout.FormLayout
layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
Ext.layout.FormLayout layout manager.
BasicForm
Although not listed as configuration options of FormPanel, the FormPanel class accepts all
of the config options required to configure its internal Ext.form.BasicForm for:
file uploads
functionality for loading, validating and submitting the form
Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
the initialConfig property of the FormPanel. Applying BasicForm
configuration settings to this will not affect the BasicForm's configuration.
Form Validation
For information on form validation see the following:
Ext.form.TextField
Ext.form.VTypes
BasicForm.doAction clientValidation notes
monitorValid
Form Submission
By default, Ext Forms are submitted through Ajax, using Ext.form.Action. To enable normal browser
submission of the BasicForm contained in this FormPanel, see the
standardSubmit option.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, you may need to call doLayout to refresh the view which causes
any unrendered child Components to be rendered. This is required so that you can
add multiple child components if needed while only refreshing the layout
once. For example:var tb = new Ext.Toolbar();
tb.render(document.body); // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout(); // refresh the layout
Warning: Containers directly managed by the BorderLayout layout manager
may not be removed or added. See the Notes for BorderLayout
for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Cascades down the component/container heirarchy from this component (called first), 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 cascade is stopped on that branch.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Force this container's layout to be recalculated. A call to this function is required after adding a new component
to an already rendered container, or possibly after changing sizing/position properties of child components.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a component under this container at any level by propertyFind a component under this container at any level by a custom function. If the passed function returns
true, the component will be included in the results. The passed function is called with the arguments (component, this container).Find a component under this container at any level by idFind a component under this container at any level by xtype or classFind a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Examines this container's items property
and gets a direct child component of this container.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Provides access to the Form which this Panel contains.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the layout currently in use by the container. If the container does not currently have a layout
set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Inserts a Component into this Container at a specified index. Fires the
beforeadd event before inserting, then fires the add event after the
Component has been inserted.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceThis is a proxy for the underlying BasicForm's Ext.form.BasicForm.load call.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a component from this container. Fires the beforeremove event before removing, then fires
the remove event after the component has been removed.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Starts monitoring of the valid state of this form. Usually this is done by passing the config
option "monitorValid"Stops monitoring of the valid state of this formSuspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.The default single selection for a TreePanel.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Clear all selectionsEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Get the selected nodeChecks to see if this object has any listeners for a specified eventReturns true if the node is selectedAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Select a node.Selects the node above the selected node in the tree, intelligently walking the nodesSelects the node above the selected node in the tree, intelligently walking the nodesSuspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Deselect a node.This is s static class containing the system-supplied data types which may be given to a Field.
The properties in this class are used as type indicators in the Field class, so to
test whether a Field is of a certain type, compare the type property against properties
of this class.
Developers may add their own application-specific data types to this class. Definition names must be UPPERCASE.
each type definition must contain three properties:
convert : FunctionA function to convert raw data values from a data block into the data
to be stored in the Field. The function is passed the collowing parameters:
v : MixedThe data value as read by the Reader, if undefined will use
the configured defaultValue.
rec : MixedThe data object containing the row as read by the Reader.
Depending on the Reader type, this could be an Array (ArrayReader), an object
(JsonReader), or an XML element (XMLReader).
sortType : Function A function to convert the stored data into comparable form, as defined by Ext.data.SortTypes.
type : String A textual data type name.
For example, to create a VELatLong field (See the Microsoft Bing Mapping API) containing the latitude/longitude value of a datapoint on a map from a JsonReader data block
which contained the properties lat and long, you would define a new data type like this:
// Add a new Field data type which stores a VELatLong object in the Record.
Ext.data.Types.VELATLONG = {
convert: function(v, data) {
return new VELatLong(data.lat, data.long);
},
sortType: function(v) {
return v.Latitude; // When sorting, order by latitude
},
type: 'VELatLong'
};
Then, when declaring a Record, use var types = Ext.data.Types; // allow shorthand type access
UnitRecord = Ext.data.Record.create([
{ name: 'unitName', mapping: 'UnitName' },
{ name: 'curSpeed', mapping: 'CurSpeed', type: types.INT },
{ name: 'latitude', mapping: 'lat', type: types.FLOAT },
{ name: 'latitude', mapping: 'lat', type: types.FLOAT },
{ name: 'position', type: types.VELATLONG }
]);A custom column model for the Ext.grid.PropertyGrid. Generally it should not need to be used directly.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys this column model by purging any event listeners. Destroys and dereferences all Columns.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Finds the index of the first matching column for the given dataIndex.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns the editor defined for the cell/column.Returns the column for a specified id.Returns the number of columns.Returns the header for the specified column.Returns the id of the column at the specified index.Returns the tooltip for the specified column.Returns the width for the specified column.Returns the column configs that return true by the passed function that is called
with (columnConfig, index)
// returns an array of column config objects for all hidden columns
var columns = grid.getColumnModel().getColumnsBy(function(c){
return c.hidden;
});Returns the dataIndex for the specified column.
// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);Returns the index for a specified column id.Returns the rendering (formatting) function defined for the column.Returns the total width of all columns.Checks to see if this object has any listeners for a specified eventReturns true if the cell is editable.
var store = new Ext.data.Store({...});
var colModel = new Ext.grid.ColumnModel({
columns: [...],
isCellEditable: function(col, row) {
var record = store.getAt(row);
if (record.get('readonly')) { // replace with your condition
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
}
});
var grid = new Ext.grid.GridPanel({
store: store,
colModel: colModel,
...
});Returns true if the column is fixed,
false otherwise.Returns true if the column is hidden,
false otherwise.Returns true if the specified column menu is disabled.Returns true if the column can be resizedReturns true if the specified column is sortable.Moves a column from one position to another.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the header for a column.Sets the tooltip for a column.Sets the width for a column.Reconfigures this column model according to the passed Array of column definition objects.
For a description of the individual properties of a column definition object, see the
Config Options.
Causes the configchange event to be fired. A GridPanel
using this ColumnModel will listen for this event and refresh its UI automatically.Sets the dataIndex for a column.Sets if a column is editable.Sets the editor for a column and destroys the prior editor.Sets if a column is hidden.
myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).Sets the rendering (formatting) function for a column. See Ext.util.Format for some
default formatting functions.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Series class for the charts widget.A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Clears all selections if the selection model
is not locked.Deselects a range of rows if the selection model
is not locked.
All rows in between startRow and endRow are also deselected.Deselects a row. Before deselecting a row, checks if the selection model
is locked.
If this check is satisfied the row will be deselected and followed up by
firing the rowdeselect and selectionchange events.Calls the passed function with each selection. If the function returns
false, iteration is stopped and this function returns
false. Otherwise it returns true.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Gets the number of selected rows.Returns the first selected record.Returns the selected recordsChecks to see if this object has any listeners for a specified eventReturns true if there is a next record to selectReturns true if there is a previous record to selectReturns true if there is a selection.Returns true if the specified record id is selected.Returns true if the selections are locked.Returns true if the specified row is selected.Locks the selections.Appends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects all rows if the selection model
is not locked.Selects the first row in the grid.Select the last row.Selects the row immediately following the last selected row.Selects the row that precedes the last selected row.Selects a range of rows if the selection model
is not locked.
All rows in between startRow and endRow are also selected.Select records.Selects a row. Before selecting a row, checks if the selection model
is locked and fires the
beforerowselect event. If these checks are satisfied the row
will be selected and followed up by firing the rowselect and
selectionchange events.Selects multiple rows.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Unlocks the selections.Provides a registry of all Components (instances of Ext.Component or any subclass
thereof) on a page so that they can be easily accessed by component
id (see get, or the convenience method Ext.getCmp).
This object also provides a registry of available Component classes
indexed by a mnemonic code known as the Component's xtype.
The xtype provides a way to avoid instantiating child Components
when creating a full, nested config object for a complete Ext page.
A child Component may be specified simply as a config object
as long as the correct xtype is specified so that if and when the Component
needs rendering, the correct type can be looked up for lazy instantiation.
For a list of all available xtypes, see Ext.Component.Creates a new Component from the specified config object using the
config object's xtype to determine the class to instantiate.Creates a new Plugin from the specified config object using the
config object's ptype to determine the class to instantiate.Returns a component by id.
For additional details see Ext.util.MixedCollection.get.Checks if a Plugin type is registered.Checks if a Component type is registered.Registers a function that will be called when a Component with the specified id is added to ComponentMgr. This will happen on instantiation.Registers a component.Registers a new Plugin constructor, keyed by a new
Ext.Component.ptype.
Use this method (or its alias Ext.preg) to register new
plugins for Ext.Components so that lazy instantiation may be used when specifying
Plugins.Registers a new Component constructor, keyed by a new
Ext.Component.xtype.
Use this method (or its alias Ext.reg) to register new
subclasses of Ext.Component so that lazy instantiation may be used when specifying
child Components.
see Ext.Container.itemsUnregisters a component.Numeric text field that provides automatic keystroke filtering and numeric validation.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.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.Clear any invalid styles/messages for this fieldClone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the active error message for this field.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Runs all of NumberFields validations and returns an array of any errors. Note that this first
runs TextField's validations, so the returned array is an amalgamation of all field errors.
The additional validations run test that the value is a number, and that it is within the
configured min and max values.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the name or hiddenName
attribute of the field if available.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the current size of the component's underlying element.Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if the value of this Field has been changed from its original value.
Will return false if the field is disabled or has not been rendered yet.
Note that if the owning form was configured with
Ext.form.BasicForm.trackResetOnLoad
then the original value is updated when the values are loaded by
Ext.form.BasicForm.setValues.Returns whether or not the field value is currently valid by
validating the processed value
of the field. Note: disabled fields are ignored.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceDisplay an error message associated with this field, using msgTarget to determine how to
display the message and applying invalidClass to the field's UI element.
Note: this method does not cause the Field's validate method to return false
if the value does pass validation. So simply marking a Field as invalid will not prevent
submission of forms submitted with the Ext.form.Action.Submit.clientValidation option set.
invalid.Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerThis method should only be overridden if necessary to prepare raw values
for validation (see validate and isValid). This method
is expected to return the processed value for the field which will
be used for validation (see validateValue method).Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resets the current field value to the originally-loaded value and clears any validation messages.
Also adds emptyText and emptyClass if the
original value was blank.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects text in this fieldSets the current activeError to the given string. Fires the 'invalid' event.
This does not set up the error icon, only sets the message and fires the event. To show the error icon,
use markInvalid instead, which calls this method internallySets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Replaces any existing maxValue with the new value.Replaces any existing minValue with the new value.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.Sets the read only state of this field.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
usually need to be called manuallyUpdate the content area of a component.Sets the current box measurements of the component's underlying element.Validates the field valueUses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
overridden instead.An implementation of Ext.data.DataProxy that processes data requests within the same
domain of the originating page.
Note: this class cannot be used to retrieve data from a domain other
than the domain from which the running page was served. For cross-domain requests, use a
ScriptTagProxy.
Be aware that to enable the browser to parse an XML document, the server must set
the Content-Type header in the HTTP response to "text/xml".Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys the proxy by purging any event listeners and cancelling any active requests.HttpProxy implementation of DataProxy#doRequestEnables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Return the Ext.data.Connection object being used by this Proxy.Checks to see if this object has any listeners for a specified eventReturns true if the specified action is defined as a unique action in the api-config.
request. If all API-actions are routed to unique urls, the xaction parameter is unecessary. However, if no api is defined
and all Proxy actions are routed to DataProxy#url, the server-side will require the xaction parameter to perform a switch to
the corresponding code for CRUD action.Deprecated load method using old method signature. See {@doRequest} for preferred method.Appends an event handler to this object (shorthand for addListener.)Callback for read actionCallback for write actionsRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.All proxy actions are executed through this method. Automatically fires the "before" + action eventResume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Redefines the Proxy's API or a single action of an API. Can be called with two method signatures.
If called with an object as the only parameter, the object should redefine the entire API, e.g.:proxy.setApi({
read : '/users/read',
create : '/users/create',
update : '/users/update',
destroy : '/users/destroy'
});
If called with two parameters, the first parameter should be a string specifying the API action to
redefine and the second parameter should be the URL (or function if using DirectProxy) to call for that action, e.g.:proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url');Used for overriding the url used for a single request. Designed to be called during a beforeaction event. Calling setUrl
will override any urls set via the api configuration parameter. Set the optional parameter makePermanent to set the url for
all subsequent requests. If not set to makePermanent, the next request will use the same url or api configuration defined
in the initial proxy configuration.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
add one of these by using "-" in you call to add() or in your items config rather than creating one directly.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.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.Clone the current component using the original config values passed into this instance by default.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Convenience function for setting disabled/enabled by boolean.Sets the function that will handle click events for this item (equivalent to passing in the handler
config property). If an existing handler is already registered, it will be unregistered for you.Convenience function to hide or show this component by boolean.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)Update the content area of a component.Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
the textarea in a div and set 'resizeChild' to true (or to the id of the element), or set wrap:true in your config and
the element will be wrapped for you automatically.
Here is the list of valid resize handles:
Value Description
------ -------------------
'n' north
's' south
'e' east
'w' west
'nw' northwest
'sw' southwest
'se' southeast
'ne' northeast
'all' all
Here's an example showing the creation of a typical Resizable:
var resizer = new Ext.Resizable('element-id', {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
resizer.on('resize', myHandler);
To hide a particular handle, set its display to none in CSS, or through script:
resizer.east.setDisplayed(false);Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Destroys this resizable. If the element was wrapped and
removeEl is not true then the element remains.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Returns the element this component is bound to.Returns the resizeChild element (or null).Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Performs resizing of the associated Element. This method is called internally by this
class, and should not be called by user code.
If a Resizable is being used to resize an Element which encapsulates a more complex UI
component such as a Panel, this method may be overridden by specifying an implementation
as a config option to provide appropriate behaviour at the end of the resize operation on
mouseup, for example resizing the Panel, and relaying the Panel's content.
The new area to be resized to is available by examining the state of the proxy
Element. Example:
new Ext.Panel({
title: 'Resize me',
x: 100,
y: 100,
renderTo: Ext.getBody(),
floating: true,
frame: true,
width: 400,
height: 200,
listeners: {
render: function(p) {
new Ext.Resizable(p.getEl(), {
handles: 'all',
pinned: true,
transparent: true,
resizeElement: function() {
var box = this.proxy.getBox();
p.updateBox(box);
if (p.layout) {
p.doLayout();
}
return box;
}
});
}
}
}).show();Perform a manual resize and fires the 'resize' event.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)This is a specialized type of BorderLayout region that
has a built-in Ext.SplitBar for user resizing of regions. The movement of the split bar
is configurable to move either smooth or incrementally.Returns the current margins for this region. If the region is collapsed, the
cmargins (collapsed margins) value will be returned, otherwise the
margins value will be returned.Returns the minimum allowable height for this region.Returns the minimum allowable width for this region.Returns the current size of this region. If the region is collapsed, the size of the
collapsedEl will be returned, otherwise the size of the region's panel will be returned.Returns a reference to the split bar in use by this region.True if this region is currently visible, else false.Sets the specified panel as the container element for this region.If this Region is floatable, and this Region has been slid into floating visibility, then this method slides
this region back into its collapsed state.If this Region is floatable, this method slides this Region into full visibility over the top
of the center Region where it floats until either slideIn is called, or other regions of the layout
are clicked, or the mouse exits the Region.These functions are available on every Function object (any JavaScript function).Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
Call directly on any function. Example: myFunction.createCallback(arg1, arg2)
Will create a function that is bound to those 2 args. If a specific scope is required in the
callback, use createDelegate instead. The function returned by createCallback always
executes in the window scope.
This method is required when you want to pass arguments to a callback function. If no arguments
are needed, you can simply pass a reference to the function as a callback (e.g., callback: myFn).
However, if you tried to pass a function with arguments (e.g., callback: myFn(arg1, arg2)) the function
would simply execute immediately when the code is parsed. Example usage:
var sayHi = function(name){
alert('Hi, ' + name);
}
// clicking the button alerts "Hi, Fred"
new Ext.Button({
text: 'Say Hi',
renderTo: Ext.getBody(),
handler: sayHi.createCallback('Fred')
});Creates a delegate (callback) that sets the scope to obj.
Call directly on any function. Example: this.myFunction.createDelegate(this, [arg1, arg2])
Will create a function that is automatically scoped to obj so that the this variable inside the
callback points to obj. Example usage:
var sayHi = function(name){
// Note this use of "this.text" here. This function expects to
// execute within a scope that contains a text property. In this
// example, the "this" variable is pointing to the btn object that
// was passed in createDelegate below.
alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}
var btn = new Ext.Button({
text: 'Say Hi',
renderTo: Ext.getBody()
});
// This callback will execute in the scope of the
// button instance. Clicking the button alerts
// "Hi, Fred. You clicked the "Say Hi" button."
btn.on('click', sayHi.createDelegate(btn, ['Fred']));Creates an interceptor function. The passed function is called before the original one. If it returns false,
the original one is not called. The resulting function returns the results of the original function.
The passed function is called with the parameters of the original function. Example usage:
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = sayHi.createInterceptor(function(name){
return name == 'Brian';
});
sayHiToFriend('Fred'); // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"Create a combined function call sequence of the original function + the passed function.
The resulting function returns the results of the original function.
The passed fcn is called with the parameters of the original function. Example usage:
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
var sayGoodbye = sayHi.createSequence(function(name){
alert('Bye, ' + name);
});
sayGoodbye('Fred'); // both alerts showCalls 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:
sayHi.defer(2000, this, ['Fred']);
// this syntax is sometimes useful for deferring
// execution of an anonymous function:
(function(){
alert('Anonymous');
}).defer(100);A mechanism for displaying data using custom layout templates and formatting. DataView uses an Ext.XTemplate
as its internal templating mechanism, and is bound to an Ext.data.Store
so that as the data in the store changes the view is automatically updated to reflect the changes. The view also
provides built-in behavior for many common events that can occur for its contained items including click, doubleclick,
mouseover, mouseout, etc. as well as a built-in selection model. In order to use these features, an itemSelector
config must be provided for the DataView to determine what nodes it will be working with.
The example below binds a DataView to a Ext.data.Store and renders it into an Ext.Panel.
var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: [
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView',
items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
panel.render(document.body);Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Apply this component to existing markup that is valid. With this function, no call to render() is required.Changes the data store bound to this view and refreshes it.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.Clears all selections.Clone the current component using the original config values passed into this instance by default.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.Deselects a node.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Disable this component and fire the 'disable' event.Enable this component and fire the 'enable' event.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Returns the template node the passed child belongs to, or null if it doesn't belong to one.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Gets a template node.Gets a range nodes.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Gets a record from a nodeGets an array of the records from an array of nodesReturns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Gets the indexes of the selected nodes.Gets the currently selected nodes.Gets an array of the selected recordsGets the number of selected nodes.Gets the current size of the component's underlying element.Returns the store associated with this DataView.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Finds the index of the passed node.Returns true if the passed node is selected, else false.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Function which can be overridden to provide custom formatting for each Record that is used by this
DataView's template to render each node.Returns the previous component in the owning containerRemoves all listeners for this objectRefreshes the view by reloading the data from the store and re-rendering the template.Refreshes an individual node's data from the store.Relays selected events from the specified Observable as if the events were fired by this.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Selects a set of nodes.Selects a range of nodes. All nodes between start and end are selected.Sets the overflow on the content element of the component.Convenience function for setting disabled/enabled by boolean.Sets the height of the component. This method fires the resize event.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Changes the data store bound to this view and refreshes it. (deprecated in favor of bindStore)Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.An object that manages a group of Ext.Window instances and provides z-order management
and window activation behavior.Brings the specified window to the front of any other active windows in this WindowGroup.Executes the specified function once for every window in this WindowGroup, passing each
window as the only parameter. Returning false from the function will stop the iteration.Gets a registered window by id.Gets the currently-active window in this WindowGroup.Returns zero or more windows in this WindowGroup using the custom search function passed to this method.
The function should accept a single Ext.Window reference as its only argument and should
return true if the window matches the search criteria, otherwise it should return false.Hides all windows in this WindowGroup.Registers a Window with this WindowManager. This should not
need to be called under normal circumstances. Windows are automatically registered
with a manager at construction time.
Where this may be useful is moving Windows between two WindowManagers. For example,
to bring the Ext.MessageBox dialog under the same manager as the Desktop's
WindowManager in the desktop sample app:
var msgWin = Ext.MessageBox.getDialog();
MyDesktop.getDesktop().getManager().register(msgWin);
Sends the specified window to the back of other active windows in this WindowGroup.Unregisters a Window from this WindowManager. This should not
need to be called. Windows are automatically unregistered upon destruction.
See register.Represents a tree data structure and bubbles all the events for its nodes. The nodes
in the tree have most standard DOM functionality.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Gets a node in this tree by its id.Returns the root node for this tree.Checks to see if this object has any listeners for a specified eventAppends an event handler to this object (shorthand for addListener.)Removes all listeners for this objectRelays selected events from the specified Observable as if the events were fired by this.Removes an event handler.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the root node for this tree.Suspend the firing of all events. (see resumeEvents)Removes an event handler (shorthand for removeListener.)A simple utility class for generically masking elements while loading data. If the store
config option is specified, the masking will be automatically synchronized with the store's loading
process and the mask element will be cached for reuse. For all other elements, this mask will replace the
element's Updater load indicator and will be destroyed after the initial load.
Example usage:
// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();Disables the mask to prevent it from being displayedEnables the mask so that it can be displayedHide this LoadMask.Show this LoadMask over the configured Element.Default Adapter. It assumes the splitter and resizing element are not positioned
elements and only gets/sets the width of the element. Generally used for table based layouts.Called before drag operations to get the current size of the resizing element.Called after drag operations to set the size of the resizing element.This class represents the primary interface of a component based grid control to represent data
in a tabular format of rows and columns. The GridPanel is composed of the following:
Store : The Model holding the data records (rows)
Column model : Column makeup
View : Encapsulates the user interface
selection model : Selection behavior
Example usage:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true,
reader: reader,
data: xg.dummyData
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
],
}),
viewConfig: {
forceFit: true,
// Return CSS class to apply to rows depending upon data values
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
Notes:
Although this class inherits many configuration options from base classes, some of them
(such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
have no effect.
A grid requires a width in which to scroll its columns, and a height in which to
scroll its rows. These dimensions can either be set explicitly through the
height and width
configuration options or implicitly set by using the grid as a child item of a
Container which will have a layout manager
provide the sizing of its child items (for example the Container of the Grid may specify
layout:'fit').
To access the data in a Grid, it is necessary to use the data model encapsulated
by the Store. See the cellclick event for more details.
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to add buttons via the buttons config.Adds a CSS class to the component's underlying element.Adds the specified events to the list of events which this Observable may fire.Appends an event handler to this object.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.Clone the current component using the original config values passed into this instance by default.Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will
cancel the collapse action if it returns false.Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the component from its Ext.Container (if applicable) and unregistering it from
Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method
should usually not need to be called directly.Enables events fired by this Observable to bubble up an owner hierarchy by calling
this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
access the required target more quickly.
Example:Ext.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action if it returns false.Find a container above this component at any level by a custom function. If the passed function returns
true, the container will be returned.Find a container above this component at any level by xtype or classFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)
by calling enableBubble.Try to focus this component.Get a component contained by this container (alias for items.get(key))Returns the toolbar from the bottom (bbar) section of the panel.Gets the current box measurements of the component's underlying element.Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.Returns the grid's ColumnModel.Called to get grid's drag proxy text, by default returns this.ddText.Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but
that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
To add listeners for DOM events to this Component (as opposed to listeners
for this Component's own Observable events), see the listeners config for a suggestion,
or use a render listener directly:new Ext.Panel({
title: 'The Clickable Panel',
listeners: {
render: function(p) {
// Append the Panel to the click handler's argument list.
p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
},
single: true // Remove the listener after first invocation
}
});Returns the toolbar from the footer (fbar) section of the panel.Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and footer elements, but not including the body height). To retrieve the body height see getInnerHeight.Returns the width in pixels of the framing elements of this panel (not including the body width). To
retrieve the body width see getInnerWidth.Returns the grid's underlying element.Gets the current height of the component's underlying element.Returns the id of this component or automatically generates and
returns an id if an id is not defined yet:'ext-comp-' + (++Ext.Component.AUTO_ID)Returns the height in pixels of the body element (not including the height of any framing elements).
For the frame height see getFrameHeight.Returns the width in pixels of the body element (not including the width of any framing elements).
For the frame width see getFrameWidth.Returns the itemId of this component. If an
itemId was not assigned through configuration the
id is returned using getId.Returns the Element to be used to contain the child Components of this Container.
An implementation is provided which returns the Container's Element, but
if there is a more complex structure to a Container, this may be overridden to return
the element into which the layout renders child Components.Gets the current size of the component's underlying element, including space taken by its margins.Gets the current XY position of the component's underlying element.Returns the outermost Element of this Component which defines the Components overall size.
Usually this will return the same Element as getEl,
but in some cases, a Component may have some more wrapping Elements around its main
active Element.
An example is a ComboBox. It is encased in a wrapping Element which
contains both the <input> Element (which is what would be returned
by its getEl method, and the trigger button Element.
This Element is returned as the resizeEl.Returns the grid's selection model configured by the selModel
configuration option. If no selection model was configured, this will create
and return a RowSelectionModel.Gets the current size of the component's underlying element.Returns the grid's data store.Retrieve a tool by id.Returns the toolbar from the top (tbar) section of the panel.Returns the grid's GridView object.Gets the current width of the component's underlying element.Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all
available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
available xtypes, see the Ext.Component header.
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
Example usage:
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'Checks to see if this object has any listeners for a specified eventHide this component. Listen to the 'beforehide' event and return
false to cancel hiding the component. Fires the 'hide'
event after hiding the component. Note this method is called internally if
the component is configured to be hidden.Returns true if this component is visible.Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
If using your own subclasses, be aware that a Component must register its own xtype
to participate in determination of inherited xtypes.
For a list of all available xtypes, see the Ext.Component header.
Example usage:
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
is destroyed. Usage:
myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
or:
myGridPanel.mon(myGridPanel.getSelectionModel(), {
selectionchange: handleSelectionChange,
buffer: 50
});
Removes listeners that were added by the mon method.Returns the next component in the owning containerAppends an event handler to this object (shorthand for addListener.)Returns the previous component in the owning containerRemoves all listeners for this objectReconfigures the grid to use a different Store and Column Model
and fires the 'reconfigure' event. The View will be bound to the new
objects and refreshed.
Be aware that upon reconfiguring a GridPanel, certain existing settings may become
invalidated. For example the configured autoExpandColumn may no longer exist in the
new ColumnModel. Also, an existing PagingToolbar will still be bound
to the old Store, and will need rebinding. Any plugins might also need reconfiguring
with the new data.Relays selected events from the specified Observable as if the events were fired by this.Removes all components from this container.Removes a CSS class from the component's underlying element.Removes an event handler.Render this Component into the passed HTML element.
If you are using a Container object to house this Component, then
do not use the render method.
A Container's child Components are rendered by that Container's
layout manager when the Container is first rendered.
Certain layout managers allow dynamic addition of child components. Those that do
include Ext.layout.CardLayout, Ext.layout.AnchorLayout,
Ext.layout.FormLayout, Ext.layout.TableLayout.
If the Container is already rendered when a new child Component is added, you may need to call
the Container's doLayout to refresh the view which causes any
unrendered child Components to be rendered. This is required so that you can add multiple
child components if needed while only refreshing the layout once.
When creating complex UIs, it is important to remember that sizing and positioning
of child items is the responsibility of the Container's layout manager.
If you expect child items to be sized in response to user interactions, you must
configure the Container with a layout manager which creates and manages the type of layout you
have in mind.
Omitting the Container's layout config means that a basic
layout manager is used which does nothing but render child components sequentially into the
Container. No sizing or positioning will be performed in this situation.Resume firing events. (see suspendEvents)
If events were suspended using the queueSuspended parameter, then all
events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Sets the height of the component. This method fires the resize event.Sets the CSS class that provides the icon image for this panel. This method will replace any existing
icon class if one has already been set and fire the iconchange event after completion.Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the move event.Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires the move event.Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept
either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Sets the title text for the panel and optionally the icon class.
In order to be able to set the title, a header element must have been created
for the Panel. This is triggered either by configuring the Panel with a non-blank title,
or configuring it with header: true.Convenience function to hide or show this component by boolean.Sets the width of the component. This method fires the resize event.Show this component. Listen to the 'beforeshow' event and return
false to cancel showing the component. Fires the 'show'
event after showing the component.Suspend the firing of all events. (see resumeEvents)Force the component's size to recalculate based on the underlying element's current height and width.Shortcut for performing an expand or collapse based on the current state of the panel.Removes an event handler (shorthand for removeListener.)Update the content area of a component.Sets the current box measurements of the component's underlying element.