Search This Blog

Wednesday, January 7, 2015

Sencha ExtJS , Ext.Component Class

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.Component component

    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 use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false...
 
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.

 

Defaults to false.

 

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.

 

Defaults to false.

 
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

 

 
addClass( String cls) : Ext.Component

@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.

 
addEvents( Object/String o, String ) : void

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.

 
addStateEvents( String/Array events) : void

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

 
animate( Object config) : Object
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.

 
cloneConfig( Object overrides) : Ext.Component

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

 

Destroys this stateful object.

 

Disable the component.

 
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...
 
doConstrain( Mixed constrainTo) : void
Moves this floating Component into a constrain region. By default, this Component is constrained to be within the c...
 

Enable the component

 
enableBubble( String/Array events) : 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 ...
 
findParentBy( Function fn) : Ext.container.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
 
findParentByType( String/Class xtype) : Ext.container.Container

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.

 
getInsertPosition( String/Number/Element/HTMLElement position) : HTMLElement
This function takes the position argument passed to onRender and returns a DOM element that you can use in the insert...
 

Gets the Ext.ComponentLoader for this Component.

 
getPlugin( Object pluginId) : Ext.AbstractPlugin

Retrieves a plugin by its pluginId which has been bound to this component.

 
getPosition( [Boolean local]) : Array

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...
 
hasListener( String eventName) : Boolean

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.

 
isDescendantOf( Ext.Container container) : Boolean

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.)

 
previousNode( String selector, Object includeSelf) : void
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.

 
removeCls( Object className) : Ext.Component

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.

 
removeManagedListener( Observable|Element item, Object|String ename, Function fn, Object scope) : void

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...
 
setAutoScroll( Boolean scroll) : Ext.Component

Sets the overflow on the content element of the component.

 

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 ...
 
setHeight( Number height) : Ext.Component

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.

 
setPagePosition( Number x, Number y, Mixed animate) : Ext.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...
 
setVisible( Boolean visible) : Ext.Component

Convenience function to hide or show this component by boolean.

 
setWidth( Number width) : Ext.Component

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...
 
suspendEvents( Boolean queueSuspended) : void

Suspend the firing of all events. (see resumeEvents)

 
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

Removes an event handler (shorthand for removeListener.)

 
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.

 
updateBox( Object box) : Ext.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.

 
beforestaterestore( Ext.state.Stateful this, Object state)

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

 
beforestatesave( Ext.state.Stateful this, Object state)

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.

 

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.

 

Fires after the component is shown when calling the show method.

 
staterestore( Ext.state.Stateful this, Object state)

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.

No comments:

Post a Comment