Base 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 and size control behavior.
All Components are registered with the Ext.ComponentManager 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.
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
------------- ------------------
button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
cycle Ext.button.Cycle
dataview Ext.view.View
datepicker Ext.picker.Date
editor Ext.Editor
editorgrid Ext.grid.plugin.Editing
grid Ext.grid.Panel
multislider Ext.slider.Multi
panel Ext.panel.Panel
progress Ext.ProgressBar
slider Ext.slider.Single
spacer Ext.toolbar.Spacer
splitbutton Ext.button.Split
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
viewport Ext.container.Viewport
window Ext.window.Window
Toolbar components
---------------------------------------
paging Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item
Form components
---------------------------------------
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie
It should not usually be necessary to instantiate a Component because there are provided subclasses which implement specialized Component use cases which over most application needs. However it is possible to instantiate a base Component, and it will be renderable, or will particpate in layouts as the child item of a Container: 
Ext.create('Ext.Component', {
html: 'Hello world!',
width: 300,
height: 200,
padding: 20,
style: {
color: '#FFFFFF',
backgroundColor:'#000000'
},
renderTo: Ext.getBody()
});
The Component above creates its encapsulating div upon render, and use the configured HTML as content. More complex internal structure may be created using the renderTpl configuration, although to display database-derived mass data, it is recommended that an ExtJS data-backed Component such as a {Ext.view.DataView DataView}, or {Ext.grid.Panel GridPanel}, or TreePanel be used.
Defined By
Config Options
CSS Class configs
The base CSS class to apply to this components's element. This will also be prepended to elements within this compone...
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
CSS Class to be added to a components root level element to give distinction to it via styling.
CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html'
Other Configs
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ...
This config is intended mainly for floating Components which may or may not be shown. Instead of using renderTo in th...
True to automatically show the component upon creation. This config option may only be used for floating components o...
The base CSS class to apply to this components's element. This will also be prepended to elements within this compone...
Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can be ...
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
CSS Class to be added to a components root level element to give distinction to it via styling.
The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager...
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this comp...
The initial set of data to apply to the tpl to update the content area of the Component.
CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
Specify as true to make a floating Component draggable using the Component's encapsulating element as the drag handle...
Specify as true to float the Component outside of the document flow using CSS absolute positioning. Components such...
Specifies whether the floated component should be automatically focused when it is brought to the front. Defaults to ...
Specify as true to have the Component inject framing elements within the Component at render time to provide a graphi...
The height of this component in pixels.
A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be 'display' : The...
An HTML fragment, or a DomHelper specification to use as the layout element content (defaults to ''). The HTML conten...
The unique id of this component instance (defaults to an auto-assigned id). It should not be necessary to use this ...
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...
(optional) A config object containing one or more event handlers to be added to this object during initialization. T...
loader : Ext.ComponentLoader/Object A configuration object or an instance of a Ext.ComponentLoader to load remote content for this Component.
Only valid when a sibling element of a Splitter within a VBox or HBox layout. Specifies that if an immediate siblin...
Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be ...
The maximum value in pixels which this Component will set its height to. Warning: This will override any size manag...
The maximum value in pixels which this Component will set its width to. Warning: This will override any size manage...
The minimum value in pixels which this Component will set its height to. Warning: This will override any size manag...
The minimum value in pixels which this Component will set its width to. Warning: This will override any size manage...
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it can b...
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
An object containing properties specifying DomQuery selectors which identify child elements created by the render pro...
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Not...
An XTemplate used to create the internal structure inside this Component's encapsulating Element. You do not normal...
Specify as true to apply a Resizer to this Component after rendering. May also be specified as a config object to b...
A valid Ext.resizer.Resizer handles config string (defaults to 'all'). Only applies when resizable = true.
A buffer to be applied if many state events are fired within a short period. Defaults to 100.
Specifies whether the floating component should be given a shadow. Set to true to automatically create an Ext.Shadow,...
An array of events that, when fired, should trigger this object to save its state (defaults to none). stateEvents may...
The unique id for this object to use for state management purposes. See stateful for an explanation of saving and re...
A flag which causes the object to attempt to restore the state of internal properties from a saved state on startup. ...
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.core.Eleme...
The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html'
True to automatically style the html inside the content target of this component (body for panels). Defaults to false.
True to automatically call toFront when the show method is called on an already visible, floating component (default ...
An Ext.Template, Ext.XTemplate or an array of strings to form an Ext.XTemplate. Used in conjunction with the data and...
The Ext.(X)Template method to use when updating the content area of the Component. Defaults to 'overwrite' (see Ext.X...
A set style for a component. Can be a string or an Array of multiple strings (UIs)
The width of this component in pixels.
Defined By
Properties
Read-only property indicating whether or not the component can be dragged
Optional. Only present for floating Components which were inserted as descendant items of floating Containers. Floa...
Read-only property indicating the width of any framing elements which were added within the encapsulating element to ...
@deprecated 4.0 Replaced by getActiveAnimation Returns thq current animation if this object has any effects actively ...
This is an internal flag that you use when creating custom components. By default this is set to true which means tha...
This Component's owner Container (defaults to undefined, and is set automatically when this Component is added to a C...
Read-only property indicating whether or not the component has been rendered.
Stops any running effects and clears this object's internal effects queue if it contains any additional effects that ...
Optional. Only present for floating Components after they have been rendered. A reference to the ZIndexManager whic...
Defined By
Methods
Component(
Ext.core.Element/String/Object config) : void
@deprecated 4.0 Replaced by {link:#addCls} Adds a CSS class to the top level element representing this component.
addCls(
String cls) : Ext.Component
Adds a CSS class to the top level element representing this component.
Adds a cls to the uiCls array, which will also call addUIClsToElement and adds to all elements of this component.
Adds the specified events to the list of events which this Observable may fire.
addListener(
String eventName, Function handler, [Object scope], [Object options]) : void
Appends an event handler to this object.
addManagedListener(
Observable/Element item, Object/String ename, Function fn, Object scope, Object opt) : void
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
Add events that will trigger the state to be saved.
afterComponentLayout(
Number adjWidth, Number adjHeight, Boolean isSetSize, Ext.Component layoutOwner) : void
alignTo(
Mixed element, String position, [Array offsets]) : Component
Aligns this floating Component to the specified element
Perform custom animation on this object. This method is applicable to both the the Component class and the Element cl...
Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By defa...
beforeComponentLayout(
Number adjWidth, Number adjHeight, Boolean isSetSize, Ext.Component layoutOwner) : void
Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being ex...
bubble(
Function fn, [Object scope], [Array args]) : Ext.Component
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
capture(
Observable o, Function fn, [Object scope]) : void
Starts capture on the specified Observable. All events will be passed to the supplied function with the event name + ...
Center this Component in its container.
Removes all listeners for this object including the managed listeners
Removes all managed listeners for this object.
Clone the current component using the original config values passed into this instance by default.
Destroys this stateful object.
Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them wit...
doComponentLayout(
Object width, Object height, Object isSetSize, Object ownerCt) : Ext.container.Container
This method needs to be called whenever you change something on this component that requires the Component's layout t...
Moves this floating Component into a constrain region. By default, this Component is constrained to be within the c...
enable(
Boolean silent) : void
Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present....
This method finds the topmost active layout who's processing will eventually determine the size and position of this ...
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by xtype or class
See also the up method.
fireEvent(
String eventName, Object... args) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Ob...
focus(
[Boolean selectText], [Boolean/Number delay]) : Ext.Component
Try to focus this component.
Returns thq current animation if this object has any effects actively running or queued, else returns false.
getBox(
[Boolean local]) : Object
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.
Retrieves the top level element representing this component.
Gets the current height of the component's underlying element.
Retrieves the id of this component. Will autogenerate an id if one has not already been set.
This function takes the position argument passed to onRender and returns a DOM element that you can use in the insert...
getPlugin(
Object pluginId) : Ext.AbstractPlugin
Retrieves a plugin by its pluginId which has been bound to this component.
Gets the current XY position of the component's underlying element.
Gets the current size of the component's underlying element.
Gets the current state of the object. By default this function returns null, it should be overridden in subclasses to...
Gets the state id for this object.
Gets the current width of the component's underlying element.
Gets the xtype for this component as registered with Ext.ComponentManager. For a list of all available xtypes, see th...
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...
Checks to see if this object has any listeners for a specified event
Checks if there is currently a specified uiCls
hide(
String/Element/Component animateTarget, [Function callback], [Object scope]) : Ext.Component
Hides this Component, setting it to invisible using the configured hideMode.
is(
String selector) : Boolean
Tests whether this Component matches the selector string.
Determines whether this component is the descendant of a particular container.
Method to determine whether this Component is currently disabled.
Method to determine whether this Component is draggable.
Method to determine whether this Component is droppable.
Method to determine whether this Component is floating.
Method to determine whether this Component is currently set to hidden.
Returns true if this component is visible.
isXType(
String xtype, [Boolean shallow]) : Boolean
Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th...
nextNode(
String selector, Object includeSelf) : void
Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and...
Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed ComponentQ...
observe(
Function c, Object listeners) : void
Sets observability on the passed class constructor. This makes any event fired on any instance of the passed class a...
on(
String eventName, Function handler, [Object scope], [Object options]) : void
Appends an event handler to this object (shorthand for addListener.)
Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings,...
Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed Co...
relayEvents(
Object origin, Array events, Object prefix) : void
Relays selected events from the specified Observable as if the events were fired by this.
Removes all added captures from the Observable.
Removes a CSS class from the top level element representing this component.
Removes a cls to the uiCls array, which will also call removeUIClsToElement and removes it from all elements of this ...
removeListener(
String eventName, Function handler, [Object scope]) : void
Removes an event handler.
Removes listeners that were added by the mon method.
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite ...
setActive(
Boolean active, Component newActive) : void
This method is called internally by Ext.ZIndexManager to signal that a floating Component has either been moved to th...
Enable or disable the component.
setDocked(
Object dock, Object layoutParent) : Component
Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of ...
Sets the height of the component. This method fires the resize event.
setLoading(
Boolean/Object/String load, Boolean targetEl) : Ext.LoadMask
This method allows you to show or hide a LoadMask on top of this component.
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
setPosition(
Number left, Number top, Mixed animate) : Ext.Component
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
setSize(
Mixed width, Mixed height) : Ext.Component
Sets the width and height of this Component. This method fires the resize event. This method can accept either width ...
Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCl...
Convenience function to hide or show this component by boolean.
Sets the width of the component. This method fires the resize event.
show(
String/Element animateTarget, [Function callback], [Object scope]) : Component
Shows this Component, rendering it first if autoRender or {"floating are true. After being shown, a floating C...
@deprecated 4.0 Replaced by stopAnimation Stops any running effects and clears this object's internal effects queue i...
Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of ...
Sends this Component to the back of (lower z-index than) any other visible windows
toFront(
[Boolean preventFocus]) : Component
Brings this floating Component to the front of any other visible, floating Components managed by the same ZIndexManag...
un(
String eventName, Function handler, [Object scope]) : void
up(
String selector) : Container
Walks up the ownerCt axis looking for an ancestor Container which matches the passed simple selector. Example: var ...
update(
Mixed htmlOrData, [Boolean loadScripts], [Function callback]) : void
Update the content area of a component.
Sets the current box measurements of the component's underlying element.
Defined By
Events
Fires after a Component has been visually activated.
added(
Ext.Component this, Ext.container.Container container, Number pos)
Fires after a Component had been added to a Container.
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rende...
Fires before a Component has been visually activated. Returning false from an event listener can prevent the activate...
Fires before a Component has been visually deactivated. Returning false from an event listener can prevent the deacti...
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is shown when calling the show method. Return false from an event handler to stop the show.
Fires before the state of the object is restored. Return false from an event handler to stop the restore.
Fires before the state of the object is saved to the configured state provider. Return false to stop the save.
Fires after a Component has been visually deactivated.
Fires after the component is destroyed.
Fires after the component is disabled.
Fires after the component is enabled.
hide(
Ext.Component this)
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
move(
Ext.Component this, Number x, Number y)
Fires after the component is moved.
removed(
Ext.Component this, Ext.container.Container ownerCt)
Fires when a component is removed from an Ext.container.Container
Fires after the component markup is rendered.
resize(
Ext.Component this, Number adjWidth, Number adjHeight)
Fires after the component is resized.
show(
Ext.Component this)
Fires after the component is shown when calling the show method.
Fires after the state of the object is restored.
statesave(
Ext.state.Stateful this, Object state)
Fires after the state of the object is saved to the configured state provider.
0 comments:
Post a Comment
Silahkan isikan comment box untuk komentar Anda..