Ext.draw.Surface xtype: surface

ariaAttributes : Object

bindable bind

An object containing ARIA attributes to be set on this Component's ARIA element. Use this to set the attributes that cannot be determined by the Component's state, such as aria-live, aria-flowto, etc.

Note that this config is only meaningful at the Component rendering time, and setting it after that will do nothing.

Defaults to:

null

ariaDescribedBy : String

DOM selector for a child element that is to be used as description for this Component, set in aria-describedby attribute. The selector works the same way as ariaLabelledBy.

ariaLabel : String

ARIA label for this Component. It is best to use ariaLabelledBy option instead, because screen readers prefer aria-labelledby attribute to aria-label. ariaLabel and ariaLabelledBy config options are mutually exclusive.

ariaLabelledBy : String

DOM selector for a child element that is to be used as label for this Component, set in aria-labelledby attribute. If the selector is by #id, the label element can be any existing element, not necessarily a child of the main Component element.

ariaLabelledBy and ariaLabel config options are mutually exclusive, and ariaLabelledBy has the higher precedence.

bind : Object / String

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.

Note: If bind is passed as a string, it will use the Ext.Component#property-defaultBindProperty for the binding.

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

cls : String / String[]

bindable bind

The CSS class to add to this widget's element, in addition to the baseCls. In many cases, this property will be specified by the derived widget class. See userCls for adding additional CSS classes to widget instances (such as items in a Ext.Container).

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

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

disabled : Boolean

bindable bind

Whether or not this component is disabled

Defaults to:

null

focusCls : String

CSS class that will be added to focused component's focusClsEl, and removed when component blurs.

Defaults to:

'x-focused'

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 true for floated Components.

Defaults to:

null

hideMode : 'clip' / 'display' / 'offsets' / 'opacity' / 'visibility'

bindable bind

A String which specifies how this component's DOM element will be hidden. The accepted values are any of these:

• 'clip' : Hide using clip.
• 'display' : Hide using display.
• 'offsets' : Hide using positioning offsets.
• 'opacity' : Hide using opacity.
• 'visibility' : Hide using visibility.

Hiding using display results in having no dimensions as well as resetting scroll positions to 0.

The other modes overcome this but may have different trade-offs in certain circumstances.

Defaults to:

'display'

Available since: 6.5.0

keyMap : Object

bindable bind

An object containing handlers for keyboard events. The property names of this object are the key name and any modifiers. The values of the properties are the descriptors of how to handle each event.

The handler descriptor can be simply the handler function (either the literal function or the method name), or it can be an object with these properties:

• handler: The function or its name to call to handle the event.
• scope: The this pointer context (can be "this" or "controller").
• event: An optional override of the key event to which to listen.

Important: Calls to setKeyMap do not replace the entire keyMap but instead update the provided mappings. That is, unless null is passed as the value of the keyMap which will clear the keyMap of all entries.

Defaults to:

null

Properties

scope : String

The default scope to apply to key handlers which do not specify a scope. This is processed the same way as the scope of cfg-listeners. It defaults to the "controller", but using 'this' means that an instance method will be used.

keyMapEnabled : Boolean

bindable bind

Enables or disables processing keys in the keyMap. This value starts as null and if it is null when initKeyMap is called, it will automatically be set to true. Since initKeyMap is called by Ext.Component at the proper time, this is not something application code normally handles.

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 Ext.view.View'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'); }
        }
    }
});

name : String

Name for the widget to be used with Ext.Container#lookupName et al.

Defaults to:

null

nameable : Boolean

Set to true for this component's name property to be tracked by its containing nameHolder.

Defaults to:

false

plugins : Array / Ext.enums.Plugin / Object / Ext.plugin.Abstract

bindable bind

This config describes one or more plugin config objects used to create plugin instances for this component.

Plugins are a way to bundle and reuse custom functionality. Plugins should extend Ext.plugin.Abstract but technically the only requirement for a valid plugin is that it contain an init method that accepts a reference to its owner. Once a plugin is created, the owner will call the init method, passing a reference to itself. Each plugin can then call methods or respond to events on its owner as needed to provide its functionality.

This config's value can take several different forms.

The value can be a single string with the plugin's Ext.enums.Plugin:

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: 'listpaging'
 });

In the above examples, the string "listpaging" is the type alias for Ext.dataview.plugin.ListPaging. The full alias includes the "plugin." prefix (i.e., 'plugin.listpaging').

The preferred form for multiple plugins or to configure plugins is the keyed-object form (new in version 6.5):

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: {
         pullrefresh: true,
         listpaging: {
             autoPaging: true,
             weight: 10
         }
     }
 });

The object keys are the id's as well as the default type alias. This form allows the value of the plugins to be merged from base class to derived class and finally with the instance configuration. This allows classes to define a set of plugins that derived classes or instantiators can further configure or disable. This merge behavior is a feature of the config.

The plugins config can also be an array of plugin aliases (arrays are not merged so this form does not respect plugins defined by the class author):

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: ['listpaging', 'pullrefresh']
 });

An array can also contain elements that are config objects with a type property holding the type alias:

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: ['pullrefresh', {
         type: 'listpaging',
         autoPaging: true
     }]
 });

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

reference : String

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

renderTo : Ext.dom.Element

bindable bind

Optional element to render this Component to. Not required if this component is an item of a Container of a Container.

Defaults to:

null

ripple : Boolean / Object / String

bindable bind

Set to truthy, Color or Object value for the ripple.

Defaults to:

null

Available since: 6.5.0

Properties

color : String

The background color of the ripple.

position : Array

Position for the ripple to start at [x,y]. Determines if a Ripple effect should happen whenever this element is pressed.

For example: { ripple: true }

Or:

 {
     ripple: {
         color: 'red'
     }
 }

For complex components, individual elements can suppress ripples by adding the x-no-ripple class to disable rippling for a tree of elements.

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

shareableName : Boolean

Set to true to allow this component's name to be shared by other items in the same nameHolder. Such items will be returned in an array from lookupName.

Defaults to:

false

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

touchAction : Object

bindable bind

Emulates the behavior of the CSS touch-action property in a cross-browser compatible manner.

Keys in this object are touch action names, and values are false to disable a touch action or true to enable it. Accepted keys are:

• panX
• panY
• pinchZoom
• doubleTapZoom

All touch actions are enabled (true) by default, so it is usually only necessary to specify which touch actions to disable. For example, the following disables only horizontal scrolling and pinch-to-zoom on the component's main element:

touchAction: {
    panX: false,
    pinchZoom: false
}

Touch actions can be specified on reference elements using the reference element name, for example:

// disables horizontal scrolling on the main element, and double-tap-zoom
// on the child element named "body"
touchAction: {
    panY: false
    body: {
        doubleTapZoom: false
    }
}

The primary motivation for setting the touch-action of an element is to prevent the browser's default handling of a gesture such as pinch-to-zoom, or drag-to-scroll, so that the application can implement its own handling of that gesture on the element. Suppose, for example, a component has a custom drag handler on its element and wishes to prevent horizontal scrolling of its container while it is being dragged:

Ext.create('Ext.Widget', {
    touchAction: {
        panX: false
    },
    listeners: {
        drag: function(e) {
            // implement drag logic
        }
    }
});

Defaults to:

null

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 / String[]

bindable bind

The ui or uis to be used on this Component

When a ui is configured, CSS class names are added to the element, created by appending the ui name(s) to each classCls and/or baseCls.

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

ariaRole : String

readonly ro

ARIA role for this Component, defaults to no role. With no role, no other ARIA attributes are set.

containsFocus : Boolean

readonly ro

true if this currently focused element is within this Component's or Container's hierarchy. This property is set separately from hasFocus, and can be true when hasFocus is false.

Examples:

• Text field with input element focused would be: focusable: true, hasFocus: true, containsFocus: true

• Date field with drop-down picker currently focused would be: focusable: true, hasFocus: false, containsFocus: true

• Form Panel with a child input field currently focused would be: focusable: false, hasFocus: false, containsFocus: true

See also hasFocus.

Defaults to:

false

factoryConfig : Object

If this property is specified by the target class of this mixin its properties are used to configure the created Ext.Factory.

focusable : Boolean

readonly ro

true for keyboard interactive Components or Widgets, false otherwise. For Containers, this property reflects interactiveness of the Container itself, not its children. See isFocusable.

Note: It is not enough to set this property to true to make a component keyboard interactive. You also need to make sure that the component's focusEl is reachable via Tab key (tabbable). See also tabIndex.

Defaults to:

false

focusClsEl : Ext.dom.Element

The element that will have the focusCls applied when component's focusEl is focused.

focusEl : Ext.dom.Element

The element that will be focused when focus method is called on this component. Usually this is the same element that receives focus via mouse clicks, taps, and pressing Tab key.

Defaults to:

'el'

hasFocus : Boolean

readonly ro

true if this component's focusEl is focused. See also containsFocus.

Defaults to:

false

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);
 }

isObservable : Boolean

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

Defaults to:

true

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

 handler('foo', 42, <actual event arguments>...);

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();

addPlugin ( plugin )

Adds a plugin. For example:

 list.addPlugin('pullrefresh');

Or:

 list.addPlugin({
     type: 'pullrefresh',
     pullRefreshText: 'Pull to refresh...'
 });

Available since: 6.2.0

Parameters

bubble ( fn, [scope], [args] )

Bubbles up the getRefOwner hierarchy, calling the specified function with each component. The scope (this reference) of the 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.

Parameters

clearListeners

Removes all listeners for this object including the managed listeners

clearManagedListeners

Removes all managed listeners for this object.

destroyMembers ( args )

Destroys member properties by name.

If a property name is the name of a config, the getter is not invoked, so if the config has not been initialized, nothing will be done.

The property will be destroyed, and the corrected name (if the property is a config and config names are prefixed) will set to null in this object's dictionary.

Parameters

destroyPlugin ( plugin ) : Ext.plugin.Abstract

Removes and destroys a plugin.

Note: Not all plugins are designed to be removable. Consult the documentation for the specific plugin in question to be sure.

Available since: 6.2.0

Parameters

Returns

disable

Disables this Component

doDestroy

Perform the actual destruction sequence. This is the method to override in your subclasses to add steps specific to the destruction of custom Component or Widget.

As a rule of thumb, subclasses should destroy their child Components, Elements, and/or other objects before calling parent method. Any object references will be nulled after this method has finished, to prevent the possibility of memory leaks.

Available since: 6.2.0

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

findPlugin ( type ) : Ext.plugin.Abstract

Retrieves plugin by its type alias. For example:

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: ['listpaging', 'pullrefresh']
 });

 list.findPlugin('pullrefresh').setPullRefreshText('Pull to refresh...');

Note: See also getPlugin.

Available since: 6.2.0

Parameters

Returns

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

focus ( [selectText] ) : Boolean

Try to focus this component.

If this component is disabled or otherwise not focusable, a close relation will be targeted for focus instead to keep focus localized for keyboard users.

Parameters

Returns

getConfig ( [name], [peek], [ifInitialized] ) : 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

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

getPlugin ( id ) : Ext.plugin.Abstract

Retrieves a plugin by its id.

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: [{
         type: 'pullrefresh',
         id: 'foo'
     }]
 });

 list.getPlugin('foo').setPullRefreshText('Pull to refresh...');

Note: See also findPlugin.

Available since: 6.2.0

Parameters

Returns

getSize Object

Returns the height and width of the Component.

Returns

getTabIndex Number

Return the actual tabIndex for this Focusable.

Returns

hasCls ( className ) : Boolean

Checks if the specified CSS class exists on this element's DOM node.

Parameters

Returns

hasListener ( eventName ) : Boolean

Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer indicates whether the event needs firing or not.

Parameters

Returns

is ( selector ) : Boolean

Tests whether this Widget matches a Ext.ComponentQuery selector string.

Parameters

Returns

isAncestor ( possibleDescendant ) : Boolean

Determines whether this Component is an ancestor of the passed Component. This will return true if the passed Component is anywhere within the subtree beneath this Component.

Parameters

Returns

isBound ( [name] ) : Boolean

Determines if the passed property name is bound to ViewModel data.

Available since: 6.5.0

Parameters

Returns

isDescendantOf ( ancestor ) : Boolean

Determines whether this component is the descendant of a passed component.

Parameters

Returns

isDisabled Boolean

Returns true if this Component is currently disabled.

Returns

isEnabled Boolean

Returns true if this Component is not currently disabled.

Returns

isFocusable ( [deep] ) : Boolean

Determine if this Focusable can receive focus at this time.

Note that Containers can be non-focusable themselves while delegating focus treatment to a child Component; see defaultFocus for more information.

Parameters

Returns

isHidden ( [deep] ) : Boolean

Returns true if this Component is currently hidden.

Parameters

Returns

isSuspended ( [event] ) : Boolean

Checks if all events, or a specific event, is suspended.

Parameters

Returns

isVisible ( [deep] ) : Boolean

Returns true if this Component is currently visible.

A Widget is visible if its element is not hidden, and has been rendered and has not been destroyed.

Parameters

Returns

isXType ( xtype, [shallow] ) : Boolean

Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). **If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.__

For a list of all available xtypes, see the Ext.Component header.

Example usage:

var t = new Ext.field.Text();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('field'); // true, descended from Ext.field.Field
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.field.Field instance

Parameters

Returns

lookupController ( [skipThis] ) : Ext.app.ViewController

Gets the controller that controls this view. May be a controller that belongs to a view higher in the hierarchy.

Available since: 5.0.1

Parameters

Returns

lookupSession ( [skipThis] ) : Ext.data.Session

Returns the Ext.data.Session for this instance. This property may come from this instance's session or be inherited from this object's parent.

Available since: 5.0.0

Parameters

Returns

lookupTpl ( name ) : Ext.XTemplate

Gets a named template instance for this class. See Ext.XTemplate#getTpl.

Available since: 6.2.0

Parameters

Returns

lookupViewModel ( [skipThis] ) : Ext.app.ViewModel

Returns the Ext.app.ViewModel for this instance. This property may come from this this instance's viewModel or be inherited from this object's parent.

Available since: 5.0.0

Parameters

Returns

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

Shorthand for addManagedListener. 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();

mun ( item, ename, [fn], [scope] )

Shorthand for removeManagedListener. Removes listeners that were added by the mon method.

Parameters

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

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

 handler('foo', 42, <actual event arguments>...);

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();

onAfter ( eventName, fn, [scope], [options] )

Appends an after-event handler.

Same as addListener with order set to 'after'.

Parameters