Ext.tab.Panel xtype: tabpanel

activeItem : Object / String / Number

bindable bind

The item from the cfg-items collection that will be active first. This is usually only meaningful in a Ext.layout.Card, where only one item can be active at a time. If passes a string, it will be assumed to be a Ext.ComponentQuery selector.

Defaults to:

0

autoDestroy : Boolean

bindable bind

If true, child items will be destroyed as soon as they are removed from this container.

Defaults to:

true

baseCls : String

bindable bind

The base CSS class to apply to this component's element. This will also be prepended to other elements within this component. To add specific styling for sub-classes, use the cls config.

Defaults to:

null

bind : Object

bindable bind

Setting this config option adds or removes data bindings for other configs. For example, to bind the title config:

 var panel = Ext.create({
     xtype: 'panel',
     bind: {
         title: 'Hello {user.name}'
     }
 });

To dynamically add bindings:

 panel.setBind({
     title: 'Greetings {user.name}!'
 });

To remove bindings:

 panel.setBind({
     title: null
 });

The bind expressions are presented to Ext.app.ViewModel#bind. The ViewModel instance is determined by lookupViewModel.

Defaults to:

null

border : Boolean

bindable bind

Enables or disables bordering on this component. The following values are accepted:

• null or `true (default): Do nothing and allow the border to be specified by the theme.
• false: suppress the default border provided by the theme.

Please note that enabling bordering via this config will not add a border-color or border-style CSS property to the component; you provide the border-color and border-style via CSS rule or style configuration (if not already provide by the theme).

Using style:

Ext.Viewport.add({
    centered: true,
    width: 100,
    height: 100,

    style: 'border: 1px solid blue;'
    // ...
});

Using CSS:

Ext.Viewport.add({
    centered: true,
    width: 100,
    height: 100,

    cls: 'my-component'
    // ...
});

And your CSS file:

.my-component {
    border: 1px solid red;
}

Defaults to:

null

bottom : Number / String

bindable bind

The absolute bottom position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.

Defaults to:

null

centered : Boolean

bindable bind

Whether or not this Component is absolutely centered inside its Container

Defaults to:

null

contentEl : Ext.dom.Element / HTMLElement / String

bindable bind

The configured element will automatically be added as the content of this component. When you pass a string, we expect it to be an element id. If the content element is hidden, we will automatically show it.

Defaults to:

null

control : Object

bindable bind

Enables you to easily control Components inside this Container by listening to their events and taking some action. For example, if we had a container with a nested Disable button, and we wanted to hide the Container when the Disable button is tapped, we could do this:

Ext.create('Ext.Container', {
    control: {
       'button[text=Disable]': {
           tap: 'hideMe'
       }
    },

    hideMe: function () {
        this.hide();
    }
});

We used a Ext.ComponentQuery selector to listen to the tap event on any Ext.Button anywhere inside the Container that has the text 'Disable'. Whenever a Component matching that selector fires the tap event our hideMe function is called. hideMe is called with scope: this (e.g. this is the Container instance).

Defaults to:

null

controller : String / Object / Ext.app.ViewController

bindable bind

A string alias, a configuration object or an instance of a ViewController for this container. Sample usage:

Ext.define('MyApp.UserController', {
    alias: 'controller.user'
});

Ext.define('UserContainer', {
    extend: 'Ext.container.container',
    controller: 'user'
});
// Or
Ext.define('UserContainer', {
    extend: 'Ext.container.container',
    controller: {
        type: 'user',
        someConfig: true
    }
});

// Can also instance at runtime
var ctrl = new MyApp.UserController();
var view = new UserContainer({
    controller: ctrl
});

Defaults to:

null

data : Object

bindable bind

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

Defaults to:

null

defaultListenerScope : Boolean

bindable bind

If true, this component will be the default scope (this pointer) for events specified with string names so that the scope can be dynamically resolved. The component will automatically become the defaultListenerScope if a controller is specified.

See the introductory docs for Ext.container.Container for some sample usages.

NOTE: This value can only be reliably set at construction time. Setting it after that time may not correctly rewire all of the potentially effected listeners.

Defaults to:

false

defaults : Object

bindable bind

A set of default configurations to apply to all child Components in this Container. It's often useful to specify defaults when creating more than one items with similar configurations. For example here we can specify that each child is a panel and avoid repeating the xtype declaration for each one:

Ext.create('Ext.Container', {
    defaults: {
        xtype: 'panel'
    },
    items: [
        {
            html: 'Panel 1'
        },
        {
            html: 'Panel 2'
        }
    ]
});

Defaults to:

null

defaultType : String

bindable bind

The default Ext.Component of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.

Defaults to:

null

disabled : Boolean

bindable bind

Whether or not this component is disabled

Defaults to:

null

disabledCls : String

bindable bind

The CSS class to add to the component when it is disabled

Defaults to:

"x-item-disabled"

docked : String

bindable bind

The dock position of this component in its container. Can be left, top, right or bottom.

Notes

You must use a HTML5 doctype for docked bottom to work. To do this, simply add the following code to the HTML file:

<!doctype html>

So your index.html file should look a little like this:

<!doctype html>
<html>
    <head>
        <title>MY application title</title>
        ...

Defaults to:

null

draggable : Object

bindable bind

Configuration options to make this Component draggable

Defaults to:

null

floatingCls : String

bindable bind

The CSS class to add to this component when it is floatable.

Defaults to:

"x-floating"

fullscreen : Boolean

Force the component to take up 100% width and height available, by adding it to Ext.Viewport.

height : Number / String

bindable bind

The height of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. By default, if this is not explicitly set, this Component's element will simply have its own natural size. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

hidden : Boolean

bindable bind

Whether or not this Component is hidden (its CSS display property is set to none)

Defaults to:

null

hiddenCls : String

bindable bind

The CSS class to add to the component when it is hidden

Defaults to:

"x-item-hidden"

hideAnimation : String / Mixed

bindable bind

Animation effect to apply when the Component is being hidden. Typically you want to use an outbound animation type such as 'fadeOut' or 'slideOut'. For more animations, check the Ext.fx.Animation#type config.

Defaults to:

null

hideOnMaskTap : Boolean

bindable bind

When using a modal Component, setting this to true will hide the modal mask and the Container when the mask is tapped on.

Defaults to:

null

html : String / Ext.dom.Element / HTMLElement

bindable bind

Optional HTML content to render inside this Component, or a reference to an existing element on the page.

Defaults to:

null

items : Array / Object

bindable bind

The child items to add to this Container. This is usually an array of Component configurations or instances, for example:

Ext.create('Ext.Container', {
    items: [
        {
            xtype: 'panel',
            html: 'This is an item'
        }
    ]
});

Defaults to:

null

left : Number / String

bindable bind

The absolute left position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.

Defaults to:

null

listeners : Object

bindable bind

A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.

DOM events from Ext JS Ext.Component

While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

margin : Number / String

bindable bind

The margin to use on this Component. Can be specified as a number (in which case all edges get the same margin) or a CSS string like '5 10 10 10'

Defaults to:

null

masked : Boolean / Object / Ext.Mask / Ext.LoadMask

bindable bind

A configuration to allow you to mask this container. You can optionally pass an object block with and xtype of loadmask, and an optional message value to display a loading mask. Please refer to the Ext.LoadMask component to see other configurations.

masked: {
    xtype: 'loadmask',
    message: 'My message'
}

Alternatively, you can just call the setter at any time with true/false to show/hide the mask:

setMasked(true); //show the mask
setMasked(false); //hides the mask

There are also two convenient methods, method-mask and unmask, to allow you to mask and unmask this container at any time.

Remember, the Ext.Viewport is always a container, so if you want to mask your whole application at anytime, can call:

Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Hello'
});

Defaults to:

null

maxHeight : Number / String

bindable bind

The maximum height of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size. Note that this config will not apply if the Component is 'floating' (absolutely positioned or centered)

Defaults to:

null

maxWidth : Number / String

bindable bind

The maximum width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size. Note that this config will not apply if the Component is 'floating' (absolutely positioned or centered)

Defaults to:

null

minHeight : Number / String

bindable bind

The minimum height of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

minWidth : Number / String

bindable bind

The minimum width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

modal : Boolean

bindable bind

true to make this Container modal. This will create a mask underneath the Container that covers its parent and does not allow the user to interact with any other Components until this Container is dismissed.

Defaults to:

null

padding : Number / String

bindable bind

The padding to use on this Component. Can be specified as a number (in which case all edges get the same padding) or a CSS string like '5 10 10 10'

Defaults to:

null

plugins : Object / Array

bindable bind

An object or array of objects that will provide custom functionality for this component. The only requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.

When a component is created, if any plugins are available, the component will call the init method on each plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide its functionality.

For examples of plugins, see Ext.plugin.PullRefresh and Ext.plugin.ListPaging

Example code

A plugin by alias:

Ext.create('Ext.dataview.List', {
    config: {
        plugins: 'listpaging',
        itemTpl: '<div class="item">{title}</div>',
        store: 'Items'
    }
});

Multiple plugins by alias:

Ext.create('Ext.dataview.List', {
    config: {
        plugins: ['listpaging', 'pullrefresh'],
        itemTpl: '<div class="item">{title}</div>',
        store: 'Items'
    }
});

Single plugin by class name with config options:

Ext.create('Ext.dataview.List', {
    config: {
        plugins: {
            xclass: 'Ext.plugin.ListPaging', // Reference plugin by class
            autoPaging: true
        },

        itemTpl: '<div class="item">{title}</div>',
        store: 'Items'
    }
});

Multiple plugins by class name with config options:

Ext.create('Ext.dataview.List', {
    config: {
        plugins: [
            {
                xclass: 'Ext.plugin.PullRefresh',
                pullRefreshText: 'Pull to refresh...'
            },
            {
                xclass: 'Ext.plugin.ListPaging',
                autoPaging: true
            }
        ],

        itemTpl: '<div class="item">{title}</div>',
        store: 'Items'
    }
});

Defaults to:

null

publishes : String / String[] / Object

bindable bind

One or more names of config properties that this component should publish to its ViewModel. Generally speaking, only properties defined in a class config block (including ancestor config blocks and mixins) are eligible for publishing to the viewModel. Some components override this and publish their most useful configs by default.

Note: We'll discuss publishing properties not found in the config block below.

Values determined to be invalid by component (often form fields and model validations) will not be published to the ViewModel.

This config uses the cfg-reference to determine the name of the data object to place in the ViewModel. If reference is not set then this config is ignored.

By using this config and cfg-reference you can bind configs between components. For example:

 ...
     items: [{
         xtype: 'textfield',
         reference: 'somefield',  // component's name in the ViewModel
         publishes: 'value' // value is not published by default
     },{
         ...
     },{
         xtype: 'displayfield',
         bind: 'You have entered "{somefield.value}"'
     }]
 ...

Classes must provide this config as an Object:

 Ext.define('App.foo.Bar', {
     publishes: {
         foo: true,
         bar: true
     }
 });

This is required for the config system to properly merge values from derived classes.

For instances this value can be specified as a value as show above or an array or object as follows:

 {
     xtype: 'textfield',
     reference: 'somefield',
     publishes: [
         'value',
         'rawValue',
         'dirty'
     ]
 }

 // This achieves the same result as the above array form.
 {
     xtype: 'textfield',
     reference: 'somefield',
     publishes: {
         value: true,
         rawValue: true,
         dirty: true
     }
 }

In some cases, users may want to publish a property to the viewModel that is not found in a class config block. In these situations, you may utilize publishState if the property has a setter method. Let's use setFieldLabel as an example:

  setFieldLabel: function(fieldLabel) {
      this.callParent(arguments);
      this.publishState('fieldLabel', fieldLabel);
  }

With the above chunk of code, fieldLabel may now be published to the viewModel.

Defaults to:

null

Available since: 5.0.0

record : Ext.data.Model

bindable bind

A model instance which updates the Component's html based on it's tpl. Similar to the data configuration, but tied to to a record to make allow dynamic updates. This must be a model instance and not a configuration of one.

Defaults to:

null

reference : String

bindable bind

Specifies a name for this component inside its component hierarchy. This name must be unique within its view or its Ext.app.ViewController. See the documentation in Ext.container.Container for more information about references.

Note: Valid identifiers start with a letter or underscore and are followed by zero or more additional letters, underscores or digits. References are case sensitive.

Defaults to:

null

referenceHolder : Boolean

bindable bind

If true, this container will be marked as being a point in the hierarchy where references to items with a specified reference config will be held. The container will automatically become a referenceHolder if a controller is specified.

See the introductory docs for Ext.container.Container for more information about references & reference holders.

Defaults to:

false

renderTo : Ext.dom.Element

bindable bind

Optional element to render this Component to. Usually this is not needed because a Component is normally full screen or automatically rendered inside another Ext.Container

Defaults to:

null

right : Number / String

bindable bind

The absolute right position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.

Defaults to:

null

session : Boolean / Object / Ext.data.Session

bindable bind

If provided this creates a new Session instance for this component. If this is a Container, this will then be inherited by all child components.

To create a new session you can specify true:

 Ext.create({
     xtype: 'viewport',
     session: true,

     items: [{
         ...
     }]
 });

Alternatively, a config object can be provided:

 Ext.create({
     xtype: 'viewport',
     session: {
         ...
     },

     items: [{
         ...
     }]
 });

Defaults to:

null

showAnimation : String / Mixed

bindable bind

Animation effect to apply when the Component is being shown. Typically you want to use an inbound animation type such as 'fadeIn' or 'slideIn'. For more animations, check the Ext.fx.Animation#type config.

Defaults to:

null

style : String / Object

bindable bind

Additional CSS styles that will be rendered into an inline style attribute when the widget is rendered.

You can pass either a string syntax:

style: 'background:red'

Or by using an object:

style: {
    background: 'red'
}

When using the object syntax, you can define CSS Properties by using a string:

style: {
    'border-left': '1px solid red'
}

Although the object syntax is much easier to read, we suggest you to use the string syntax for better performance.

Defaults to:

null

styleHtmlCls : String

bindable bind

The class that is added to the content target when you set styleHtmlContent to true.

Defaults to:

"x-html"

styleHtmlContent : Boolean

bindable bind

true to automatically style the HTML inside the content target of this component (body for panels).

Defaults to:

false

top : Number / String

bindable bind

The absolute top position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.

Defaults to:

null

tpl : String / String[] / Ext.Template / Ext.XTemplate[]

bindable bind

A String, Ext.Template, Ext.XTemplate or an Array of strings to form an Ext.XTemplate. Used in conjunction with the data and tplWriteMode configurations.

Note The data configuration must be set for any content to be shown in the component when using this configuration.

Defaults to:

null

tplWriteMode : String

bindable bind

The Ext.(X)Template method to use when updating the content area of the Component. Valid modes are:

• append
• insertAfter
• insertBefore
• insertFirst
• overwrite

Defaults to:

'overwrite'

twoWayBindable : String / String[] / Object

bindable bind

This object holds a map of config properties that will update their binding as they are modified. For example, value is a key added by form fields. The form of this config is the same as publishes.

This config is defined so that updaters are not created and added for all bound properties since most cannot be modified by the end-user and hence are not appropriate for two-way binding.

Defaults to:

null

ui : String

bindable bind

The ui to be used on this Component

Defaults to:

null

userCls : String / String[]

bindable bind

One or more CSS classes to add to the component's primary element. This config is intended solely for use by the component instantiator (the "user"), not by derived classes.

For example:

 items: [{
     xtype: 'button',
     userCls: 'my-button'
 ...
 }]

Defaults to:

null

viewModel : String / Object / Ext.app.ViewModel

bindable bind

The ViewModel is a data provider for this component and its children. The data contained in the ViewModel is typically used by adding bind configs to the components that want present or edit this data.

When set, the ViewModel is created and links to any inherited viewModel instance from an ancestor container as the "parent". The ViewModel hierarchy, once established, only supports creation or destruction of children. The parent of a ViewModel cannot be changed on the fly.

If this is a root-level ViewModel, the data model connection is made to this component's associated Ext.data.Session. This is determined by calling getInheritedSession.

Defaults to:

null

width : Number / String

bindable bind

The width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. By default, if this is not explicitly set, this Component's element will simply have its own natural size. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

xtype : String

The xtype configuration option can be used to optimize Component creation and rendering. It serves as a shortcut to the full component name. For example, the component Ext.button.Button has an xtype of button.

You can define your own xtype on a custom Ext.Component by specifying the alias config option with a prefix of widget. For example:

Ext.define('PressMeButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.pressmebutton',
    text: 'Press Me'
});

Any Component can be created implicitly as an object config with an xtype specified, allowing it to be declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources until they are actually needed. In complex, nested layouts containing many Components, this can make a noticeable improvement in performance.

// Explicit creation of contained Components:
var panel = new Ext.Panel({
   // ...
   items: [
      Ext.create('Ext.button.Button', {
         text: 'OK'
      })
   ]
});

// Implicit creation using xtype:
var panel = new Ext.Panel({
   // ...
   items: [{
      xtype: 'button',
      text: 'OK'
   }]
});

In the first example, the button will always be created immediately during the panel's initialization. With many added Components, this approach could potentially slow the rendering of the page. In the second example, the button will not be created or rendered until the panel is actually displayed in the browser. If the panel is never displayed (for example, if it is a tab that remains hidden) then the button will never be created and will never consume any resources whatsoever.

zIndex : Number

bindable bind

The z-index to give this Component when it is rendered

Defaults to:

null

defaultBindProperty : String

This property is used to determine the property of a bind config that is just the value. For example, if defaultBindProperty="value", then this shorthand bind config:

 bind: '{name}'

Is equivalent to this object form:

 bind: {
     value: '{name}'
 }

The defaultBindProperty is set to "value" for form fields and to "store" for grids and trees.

Defaults to:

'html'

hasListeners : Object

readonly ro

This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the Ext.app.EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event.

The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:

 if (this.hasListeners.foo) {
     this.fireEvent('foo', this, arg1);
 }

isContainer : Boolean

true in this class to identify an object as an instantiated Container, or subclass thereof.

Defaults to:

true

isObservable : Boolean

true in this class to identify an object as an instantiated Observable, or subclass thereof.

Defaults to:

true

add ( newItems ) : Ext.Component/Ext.Component[]

Adds one or more Components to this Container. Example:

var myPanel = Ext.create('Ext.Panel', {
    html: 'This will be added to a Container'
});

var items = myContainer.add([myPanel]); // Array returned
var item = myContainer.add(myPanel); // One item is returned

Parameters

Returns

addAfterListener

Alias for onAfter.

addBeforeListener

Alias for onBefore.

addCls ( cls, [prefix], [suffix] )

Adds a CSS class (or classes) to this Component's rendered element.

Parameters

addListener ( eventName, [fn], [scope], [options], [order] ) : Object

chainable ch

The on method is shorthand for addListener.

Appends an event handler to this object. For example:

myGridPanel.on("itemclick", this.onItemClick, this);

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

myGridPanel.on({
    cellclick: this.onCellClick,
    select: this.onSelect,
    viewready: this.onViewReady,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellclick: {fn: this.onCellClick, scope: this, single: true},
    viewready: {fn: panel.onViewReady, scope: panel}
});

Names of methods in a specified scope may also be used:

myGridPanel.on({
    cellclick: {fn: 'onCellClick', scope: this, single: true},
    viewready: {fn: 'onViewReady', scope: panel}
});

Parameters

  var panel = new Ext.panel.Panel({
      title: 'The title',
      listeners: {
          click: this.handlePanelClick,
          element: 'body'
      }
  });

 panel.body.un(...)

false

'current'

Returns

this.btnListeners =  = myButton.on({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

addManagedListener ( item, ename, [fn], [scope], [options] ) : Object

The addManagedListener method is used when some object (call it "A") is listening to an event on another observable object ("B") and you want to remove that listener from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because all of its listeners will be removed at that time.

Example:

Ext.define('Foo', {
    extend: 'Ext.Component',

    initComponent: function () {
        this.addManagedListener(MyApp.SomeGlobalSharedMenu, 'show', this.doSomething);
        this.callParent();
    }
});

As you can see, when an instance of Foo is destroyed, it ensures that the 'show' listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.

As of version 5.1 it is no longer necessary to use this method in most cases because listeners are automatically managed if the scope object provided to addListener is an Observable instance. However, if the observable instance and scope are not the same object you still need to use mon or addManagedListener if you want the listener to be managed.

Parameters

Returns

this.btnListeners = myButton.mon({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

animateActiveItem ( activeItem, animation )

Animates to the supplied activeItem with a specified animation. Currently this only works with a Card layout. This passed animation will override any default animations on the container, for a single card switch. The animation will be destroyed when complete.

Parameters

applyMasked ( masked ) : Object

Changes the masked configuration when its setter is called, which will convert the value into a proper object/instance of Ext.Mask/Ext.LoadMask. If a mask already exists, it will use that instead.

Parameters

Returns

child ( [selector] ) : Ext.Component

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

Parameters

Returns

clearListeners

Removes all listeners for this object including the managed listeners

clearManagedListeners

Removes all managed listeners for this object.

constructor ( config )

Creates new Component.

Parameters

destroy

Destroys this Component. If it is currently added to a Container it will first be removed from that Container. All Ext.Element references are also deleted and the Component is de-registered from Ext.ComponentManager

disable

Disables this Component

down ( [selector] ) : Ext.Component

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

Parameters

Returns

enable

Enables this Component

enableBubble ( eventNames )

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.define('Ext.overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    //  Add functionality to Field's initComponent to enable the change event to bubble
    initComponent: function () {
        this.callParent();
        this.enableBubble('change');
    }
});

var myForm = Ext.create('Ext.form.Panel', {
    title: 'User Details',
    items: [{
        ...
    }],
    listeners: {
        change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
        }
    }
});

Parameters

fireEvent ( eventName, args ) : Boolean

Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener).

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component#getBubbleTarget) by calling enableBubble.

Parameters

Returns

fireEventArgs ( eventName, args ) : Boolean

Fires the specified event with the passed parameter list.

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component#getBubbleTarget) by calling enableBubble.

Parameters

Returns

fireEventedAction ( eventName, args, fn, [scope], [fnArgs] ) : Boolean

Fires the specified event with the passed parameters and executes a function (action). Evented Actions will automatically dispatch a 'before' event passing. This event will be given a special controller that allows for pausing/resuming of the event flow.

By pausing the controller the updater and events will not run until resumed. Pausing, however, will not stop the processing of any other before events.

Parameters

Returns

getAt ( index ) : Ext.Component

Returns the Component for a given index in the Container's items.

Parameters

Returns

getComponent ( component ) : Ext.Component

Examines this container's items property and gets a direct child component of this container.

Parameters

Returns

getConfig ( [name], [peek] ) : Object

Returns a specified config property value. If the name parameter is not passed, all current configuration options will be returned as key value pairs.

Parameters

Returns

getController

getDockedComponent ( component ) : Ext.Component/Boolean

Finds a docked item of this container using a reference, idor an index of its location in getDockedItems.

Parameters

Returns

getDockedItems Array

Returns all the Ext.Component#docked items in this container.

Returns

getId String

Retrieves the id of this component. Will autogenerate an id if one has not already been set.

Returns

getInherited ( [inner] ) : Object

This method returns an object containing the inherited properties for this instance.

Available since: 5.0.0

Parameters

Returns

getInheritedConfig ( property, [skipThis] ) : Mixed

This method returns the value of a config property that may be inherited from some ancestor.

In some cases, a config may be explicitly set on a component with the intent of only being presented to its children while that component should act upon the inherited value (see referenceHolder for example). In these cases the skipThis parameter should be specified as true.

Available since: 5.0.0

Parameters

Returns

getInitialConfig ( [name] ) : Object/Mixed

Returns the initial configuration passed to the constructor when instantiating this class.

Given this example Ext.button.Button definition and instance:

Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});

Calling btn.getInitialConfig() would return an object including the config options passed to the create method:

xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'

Calling btn.getInitialConfig('text')returns 'Test Button'.

Parameters

Returns

getInnerItems Array

Returns all inner items of this container. inner means that the item is not docked or floating.

Returns

getParent Ext.Component

Returns the parent of this component, if it has one.

Returns

getReferences Object

Returns an object holding the descendants of this view keyed by their reference. This object should not be held past the scope of the function calling this method. It will not be valid if items are added or removed from this or any sub-container.

The intended usage is shown here (assume there are 3 components with reference values of "foo", "bar" and "baz" at some level below this container):

 onClick: function () {
     var refs = this.getReferences();

     // using "refs" we can access any descendant by its "reference"

     refs.foo.getValue() + refs.bar.getValue() + refs.baz.getValue();
 }

If this component has a reference assigned to it, that is not included in this object. That reference is understood to belong to the ancestor container configured as the referenceHolder.

Available since: 5.0.0

Returns

getSize Object

Returns the height and width of the Component.

Returns

getXTypes String

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

Note: 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.field.Text();
alert(t.getXTypes());  // alerts 'component/field/textfield'

Returns