Clear Up
SharpKit Reference

Component Class

Base class for all Ext components.

The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.

xtypes

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. See the Component Guide for more information on xtypes and the Component hierarchy.

Finding components

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.

Additionally the Ext.ComponentQuery provides a CSS-selectors-like way to look up components by their xtype and many other attributes. For example the following code will find all textfield components inside component with id: 'myform':

  
    Ext.ComponentQuery.query('#myform textfield');
            

Extending Ext.Component

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.

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 chapter in Component Guide for details on how and to either extend or augment Ext JS base classes to create custom Components.

The Ext.Component class by itself

Usually one doesn't need to instantiate the Ext.Component class. There are subclasses which implement specialized use cases, covering most application needs. However it is possible to instantiate a base Component, and it can be rendered to document, or handled by 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 View, GridPanel, or TreePanel be used.

Namespace: Ext

Methods

Name Description
addChildEls() Adds each argument passed to this method to the childEls array.
afterHide(object, object) Invoked after the Component has been hidden. Gets passed the same callback and scope parameters that onHide received.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

afterShow(object, object, object) Invoked after the Component is shown (after onShow is called). Gets passed the same parameters as show.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

alignTo(object, object, object) Aligns this floating Component to the specified element
beforeShow() Invoked before the Component is shown.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

bubble(Delegate, object, 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.
cancelFocus() Cancel any deferred focus on this component
center() Center this Component in its container.
cloneConfig(object) Clone the current component using the original config values passed into this instance by default.
doConstrain(object) Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed.
findParentBy(Delegate) Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. See also the up method.
findParentByType(object) Find a container above this component at any level by xtype or class See also the up method.
focus(object, object) Try to focus this component.
getBox(object) Gets the current box measurements of the component's underlying element.
getConstrainVector(object) Gets the x/y offsets to constrain this float
getPosition(object) Gets the current XY position of the component's underlying element.
getXType() Gets the xtype for this component as registered with Ext.ComponentManager. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.field.Text();
            alert(t.getXType());  // alerts 'textfield'
            
hide(object, object, object) Hides this Component, setting it to invisible using the configured hideMode.
initComponent() The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to this before initComponent is called, so you can simply access them with this.someOption. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class.
  Ext.define('DynamicButtonText', {
            extend: 'Ext.button.Button',
            initComponent: function() {
            this.text = new Date();
            this.renderTo = Ext.getBody();
            this.callParent();
            }
            });
            Ext.onReady(function() {
            Ext.create('DynamicButtonText');
            });
            

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

onDestroy() Allows addition of behavior to the destroy operation. After calling the superclass’s onDestroy, the Component will be destroyed.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

onHide(object, object, object) Possibly animates down to a target element. Allows addition of behavior to the hide operation. After calling the superclass’s onHide, the Component will be hidden. Gets passed the same parameters as hide.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

onShow(object, object, object) Allows addition of behavior to the show operation. After calling the superclass's onShow, the Component will be visible. Override in subclasses where more complex behaviour is needed. Gets passed the same parameters as show.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

onShowComplete(object, object) Invoked after the afterShow method is complete. Gets passed the same callback and scope parameters that afterShow received.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

scrollBy(object, object, object) Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent:
comp.scrollBy(10, 10, true);
           comp.scrollBy([10, 10], true);
           comp.scrollBy({ x: 10, y: 10 }, true);
            
setActive(object, object) This method is called internally by Ext.ZIndexManager to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the activate or deactivate event depending on which action occurred.
setAutoScroll(bool) Sets the overflow on the content element of the component.
setLoading(object, object) This method allows you to show or hide a LoadMask on top of this component.
setOverflowXY(JsString, JsString) Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing undefined will preserve the current value.
setPagePosition(JsNumber, JsNumber, object) Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
show(object, object, object) Shows this Component, rendering it first if autoRender or floating are true. After being shown, a floating Component (such as a Ext.window.Window), is activated it and brought to the front of its z-index stack.
showAt(JsNumber, JsNumber, object) Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu:
listeners: {
            itemcontextmenu: function(view, record, item, index, event, options) {
            Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 100,
            margin: '0 0 10 0',
            items: [{
            text: 'regular item 1'
            },{
            text: 'regular item 2'
            },{
            text: 'regular item 3'
            }]
            }).showAt(event.getXY());
            }
            }
            
toBack() Sends this Component to the back of (lower z-index than) any other visible windows
toFront(object) Brings this floating Component to the front of any other visible, floating Components managed by the same ZIndexManager If this Component is modal, inserts the modal mask just below this Component in the z-index stack.
updateBox(object) Sets the current box measurements of the component's underlying element.

Fields

Name Description
autoScroll true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content. This should not be combined with overflowX or overflowY. Defaults to: false
columnWidth Defines the column width inside column layout. Can be specified as a number or as a percentage.
focusOnToFront Specifies whether the floated component should be automatically focused when it is brought to the front. Defaults to: true
formBind When inside FormPanel, any component configured with formBind: true will be enabled/disabled depending on the validity state of the form. See Ext.form.Panel for more information and example. Defaults to: false
overflowX Possible values are: * 'auto' to enable automatic horizontal scrollbar (overflow-x: 'auto'). * 'scroll' to always enable horizontal scrollbar (overflow-x: 'scroll'). The default is overflow-x: 'hidden'. This should not be combined with autoScroll.
overflowY Possible values are: * 'auto' to enable automatic vertical scrollbar (overflow-y: 'auto'). * 'scroll' to always enable vertical scrollbar (overflow-y: 'scroll'). The default is overflow-y: 'hidden'. This should not be combined with autoScroll.
region Defines the region inside border layout. Possible values:
  • center
  • north
  • south
  • east
  • west
  • resizable Specify as true to apply a Resizer to this Component after rendering. May also be specified as a config object to be passed to the constructor of Resizer to override any defaults. By default the Component passes its minimum and maximum size, and uses Ext.resizer.Resizer.dynamic: false
    resizeHandles A valid Ext.resizer.Resizer handles config string. Only applies when resizable = true. Defaults to: "all"
    shadow Specifies whether the floating component should be given a shadow. Set to true to automatically create an Ext.Shadow, or a string indicating the shadow's display Ext.Shadow.mode. Set to false to disable the shadow. Defaults to: "sides"
    shadowOffset Number of pixels to offset the shadow.
    toFrontOnShow True to automatically call toFront when the show method is called on an already visible, floating component. Defaults to: true

    Properties

    Name Description
    floatParent Only present for floating Components which were inserted as child items of Containers. Floating Components that are programatically rendered will not have a floatParent property. For floating Components which are child items of a Container, the floatParent will be the owning Container. For example, the dropdown BoundList of a ComboBox which is in a Window will have the Window as its floatParent See floating and zIndexManager
    zIndexManager Only present for floating Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The ZIndexManager maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be brought to the front or sent to the back of the z-index stack. This defaults to the global ZIndexManager for floating Components that are programatically rendered. For floating Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating. If no floating ancestor is found, the global ZIndexManager is used. See floating and zIndexParent
    zIndexParent Only present for floating Components which were inserted as child items of Containers, and which have a floating Container in their containment ancestry. For floating Components which are child items of a Container, the zIndexParent will be a floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a ZIndexManager which provides z-indexing services for all its descendant floating Components. Floating Components that are programatically rendered will not have a zIndexParent property. For example, the dropdown BoundList of a ComboBox which is in a Window will have the Window as its zIndexParent, and will always show above that Window, wherever the Window is placed in the z-index stack. See floating and zIndexManager
    © Copyright 2005-2011 SharpKit. All rights reserved.