<ExtSurface/> xtype: surface premium

alignSelf : String

bindable bind

<ExtSurface alignSelf="value" />

let element = document.body.querySelector('ExtSurface');
element.alignSelf = 'value';
let alignSelf = element.alignSelf;

Specifies the self alignment of this widget in a box layout

Defaults to:

null

alwaysOnTop : Boolean / Number

bindable bind

<ExtSurface [alwaysOnTop]="true" />

let element = document.body.querySelector('ExtSurface');
element.alwaysOnTop = true;
let alwaysOnTop = element.alwaysOnTop;

A flag indicating that this component should be above its floated siblings.

This may be a positive number to prioritize the ordering of multiple visible always on top components.

This may be set to a negative number to prioritize a component to the bottom of the z-index stack.

Defaults to:

false

Available since: 6.2.0

ariaAttributes : Object

bindable bind

<ExtSurface ariaAttributes="{ }" />

let element = document.body.querySelector('ExtSurface');
element.ariaAttributes = { };
let ariaAttributes = element.ariaAttributes;

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

<ExtSurface ariaDescribedBy="value" />

let element = document.body.querySelector('ExtSurface');
element.ariaDescribedBy = 'value';
let ariaDescribedBy = element.ariaDescribedBy;

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

<ExtSurface ariaLabel="value" />

let element = document.body.querySelector('ExtSurface');
element.ariaLabel = 'value';
let ariaLabel = element.ariaLabel;

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

<ExtSurface ariaLabelledBy="value" />

let element = document.body.querySelector('ExtSurface');
element.ariaLabelledBy = 'value';
let ariaLabelledBy = element.ariaLabelledBy;

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

<ExtSurface bind="value" />

let element = document.body.querySelector('ExtSurface');
element.bind = 'value';
let bind = element.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

<ExtSurface [border]="true" />

let element = document.body.querySelector('ExtSurface');
element.border = true;
let border = element.border;

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

<ExtSurface cls="value" />

let element = document.body.querySelector('ExtSurface');
element.cls = 'value';
let cls = element.cls;

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

Defaults to:

null

constrainAlign : String / Ext.util.Region / Ext.dom.Element

bindable bind

<ExtSurface constrainAlign="value" />

let element = document.body.querySelector('ExtSurface');
element.constrainAlign = 'value';
let constrainAlign = element.constrainAlign;

A specification of the constraint to apply when showBy or alignTo is called to align a floated or positioned component.

Defaults to the parent container for positioned components (components which have their top, right, bottom or left set to move them out of their container's layout flow).

Defaults to the viewport for floated components.

May be a Ext.ComponentQuery selector to find an ancestor component to constrain within.

May be false to specify that constraining is not applied.

You may also specify an element, or a Ext.util.Region

Defaults to:

null

controller : String / Object / Ext.app.ViewController

bindable bind

<ExtSurface controller="value" />

let element = document.body.querySelector('ExtSurface');
element.controller = 'value';
let controller = element.controller;

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

let element = document.body.querySelector('ExtSurface');
let getController = element.getController();

defaultListenerScope : Boolean

bindable bind

<ExtSurface [defaultListenerScope]="true" />

let element = document.body.querySelector('ExtSurface');
element.defaultListenerScope = true;
let defaultListenerScope = element.defaultListenerScope;

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

<ExtSurface [disabled]="true" />

let element = document.body.querySelector('ExtSurface');
element.disabled = true;
let disabled = element.disabled;

Whether or not this component is disabled

Defaults to:

null

flex : Number / String / Object

bindable bind

<ExtSurface [flex]="value" />

let element = document.body.querySelector('ExtSurface');
element.flex = 'value';
let flex = element.flex;

The flex of this item if this item item is inside a Ext.layout.HBox or Ext.layout.VBox layout.

You can also update the flex of a component dynamically using the Ext.layout.FlexBox#setItemFlex method.

When supplied as a string or number this option supports the same syntax as CSS flex. For example:

flex: '1 2 auto'

sets flex-grow property to 0, flex-shrink to 2 and flex-basis to 'auto'.

The default flex-shrink value for box layout items is set to 0 in the stylesheet, which is different from the browser's default flex-shrink value of 1. This accommodates the majority use case for applications since where non-flexed components are typically not expected to shrink smaller than their default size.

For convenience when only a single number is supplied it is used as the value for both flex-grow and flex-shrink, for example flex: 3 is the same as flex: '3 3'

An object form is also accepted:

flex: {
    grow: 1,
    shrink: 2,
    basis: 'auto'
}

When the object form is supplied shrink always defaults to 0 regardless of the value of grow.

Although 'auto' is the default value for flex-basis, flex-basis defaults to 0% when flex is supplied as a single numeric or string value (e.g. flex: 1). If this behavior is not desired either explicitly set flex-basis to 'auto' or use the object form to set only grow and/or shrink:

flex: {
    grow: 2
}

Defaults to:

null

floated : Boolean

bindable bind

<ExtSurface [floated]="true" />

let element = document.body.querySelector('ExtSurface');
element.floated = true;
let floated = element.floated;

A Component may be floated above all other components in the application. This means that the component is absolutely positioned, and will move to the front and occlude other sibling floated component if clicked.

A Floated component may have floated descendants. It will bring these decendants to the front with it when brought to the front of its sibling floated components.

By default, descendant floated components are all positioned using the viewport coordinate system. To make a floating component a positioning parent for descendants, and have the ancestors positioned relatively, configure the parent floated component with cfg-relative: true.

Defaults to:

false

Available since: 6.2.0

focusCls : String

<ExtSurface focusCls="value" />

let element = document.body.querySelector('ExtSurface');
element.focusCls = 'value';
let focusCls = element.focusCls;

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

<ExtSurface [height]="value" />

let element = document.body.querySelector('ExtSurface');
element.height = 'value';
let height = element.height;

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

<ExtSurface [hidden]="true" />

let element = document.body.querySelector('ExtSurface');
element.hidden = true;
let hidden = element.hidden;

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

<ExtSurface hideMode="value" />

let element = document.body.querySelector('ExtSurface');
element.hideMode = 'value';
let hideMode = element.hideMode;

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

id : String

<ExtSurface id="value" />

let element = document.body.querySelector('ExtSurface');
element.id = 'value';
let id = element.id;

The unique id of this component instance.

It should not be necessary to use this configuration except for singleton objects in your application. Components created with an id may be accessed globally using Ext.getCmp.

Instead of using assigned ids, use the itemId config, and Ext.ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The <ExtContainer/> class contains shortcut methods to query its descendant Components by selector.

Note that this id will also be used as the element id for the containing HTML element that is rendered to the page for this component. This allows you to write id-based CSS rules to style the specific instance of this component uniquely, and also to select sub-elements using this component's id as the parent.

Note: to avoid complications imposed by a unique id also see itemId.

Defaults to an auto-assigned id.

let element = document.body.querySelector('ExtSurface');
let getId = element.getId();

itemId : String

bindable bind

<ExtSurface itemId="value" />

let element = document.body.querySelector('ExtSurface');
element.itemId = 'value';
let itemId = element.itemId;

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext#getCmp, use itemId with Ext.Container#getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container - avoiding potential conflicts with Ext.ComponentManager which requires a unique id.

Also see id, Ext.Container#query, Ext.Container#down and Ext.Container#child.

Defaults to:

undefined

keyMap : Object

bindable bind

<ExtSurface keyMap="{ }" />

let element = document.body.querySelector('ExtSurface');
element.keyMap = { };
let keyMap = element.keyMap;

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

<ExtSurface [keyMapEnabled]="true" />

let element = document.body.querySelector('ExtSurface');
element.keyMapEnabled = true;
let keyMapEnabled = element.keyMapEnabled;

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 <ExtComponent/> at the proper time, this is not something application code normally handles.

Defaults to:

null

listeners : Object

bindable bind

<ExtSurface listeners="{ }" />

let element = document.body.querySelector('ExtSurface');
element.listeners = { };
let listeners = element.listeners;

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 <ExtComponent/>

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

let element = document.body.querySelector('ExtSurface');
element.setListeners(listeners);

margin : Number / String

bindable bind

<ExtSurface [margin]="value" />

let element = document.body.querySelector('ExtSurface');
element.margin = 'value';
let margin = element.margin;

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

name : String

<ExtSurface name="value" />

let element = document.body.querySelector('ExtSurface');
element.name = 'value';
let name = element.name;

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

Defaults to:

null

nameable : Boolean

<ExtSurface [nameable]="true" />

let element = document.body.querySelector('ExtSurface');
element.nameable = true;
let nameable = element.nameable;

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

<ExtSurface plugins="{ }" />

let element = document.body.querySelector('ExtSurface');
element.plugins = { };
let plugins = element.plugins;

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

<ExtSurface publishes="value" />

let element = document.body.querySelector('ExtSurface');
element.publishes = 'value';
let publishes = element.publishes;

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

<ExtSurface reference="value" />

let element = document.body.querySelector('ExtSurface');
element.reference = 'value';
let reference = element.reference;

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

relative : Boolean

bindable bind

<ExtSurface [relative]="true" />

let element = document.body.querySelector('ExtSurface');
element.relative = true;
let relative = element.relative;

Only valid when a component is cfg-floated

Configure this as true if you require descendant floated components to be positioned relative to this component's coordinate space, not the viewport's coordinate space.

Note: The coordinate space is this Component's encapsulating element's area. Not that of the inner element in which static child items are rendered by the layout.

Defaults to:

false

Available since: 6.2.0

renderTo : Ext.dom.Element

bindable bind

<ExtSurface renderTo="value" />

let element = document.body.querySelector('ExtSurface');
element.renderTo = 'value';
let renderTo = element.renderTo;

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

<ExtSurface [ripple]="true" />

let element = document.body.querySelector('ExtSurface');
element.ripple = true;
let ripple = element.ripple;

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

<ExtSurface [session]="true" />

let element = document.body.querySelector('ExtSurface');
element.session = true;
let session = element.session;

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

shadow : Boolean

bindable bind

<ExtSurface [shadow]="true" />

let element = document.body.querySelector('ExtSurface');
element.shadow = true;
let shadow = element.shadow;

Configure as true for the component to have a drop shadow. 'false' will suppress any default shadow. By default the theme will determine the presence of a shadow.

Defaults to:

null

Available since: 6.2.0

shareableName : Boolean

<ExtSurface [shareableName]="true" />

let element = document.body.querySelector('ExtSurface');
element.shareableName = true;
let shareableName = element.shareableName;

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

shim : Boolean

bindable bind

<ExtSurface [shim]="true" />

let element = document.body.querySelector('ExtSurface');
element.shim = true;
let shim = element.shim;

Only valid when a component is cfg-floated

Configure as true for the component to use an <iframe> as an underlay to ensure certain non-standard browser plugins are occluded by this component.

Defaults to:

false

Available since: 6.2.0

style : String / Object

bindable bind

<ExtSurface style="value" />

let element = document.body.querySelector('ExtSurface');
element.style = 'value';
let style = element.style;

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

toFrontOnShow : Boolean

bindable bind

<ExtSurface [toFrontOnShow]="true" />

let element = document.body.querySelector('ExtSurface');
element.toFrontOnShow = true;
let toFrontOnShow = element.toFrontOnShow;

True to automatically call toFront when a cfg-floated Component is shown.

Defaults to:

true

touchAction : Object

bindable bind

<ExtSurface touchAction="{ }" />

let element = document.body.querySelector('ExtSurface');
element.touchAction = { };
let touchAction = element.touchAction;

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

<ExtSurface twoWayBindable="value" />

let element = document.body.querySelector('ExtSurface');
element.twoWayBindable = 'value';
let twoWayBindable = element.twoWayBindable;

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

<ExtSurface ui="value" />

let element = document.body.querySelector('ExtSurface');
element.ui = 'value';
let ui = element.ui;

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

<ExtSurface userCls="value" />

let element = document.body.querySelector('ExtSurface');
element.userCls = 'value';
let userCls = element.userCls;

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

<ExtSurface viewModel="value" />

let element = document.body.querySelector('ExtSurface');
element.viewModel = 'value';
let viewModel = element.viewModel;

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

<ExtSurface [width]="value" />

let element = document.body.querySelector('ExtSurface');
element.width = 'value';
let width = element.width;

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

x : Number

bindable bind

<ExtSurface [x]="10" />

let element = document.body.querySelector('ExtSurface');
element.x = 10;
let x = element.x;

Only valid when a component is cfg-floated

The x position at which to position this component. This is usually viewport-relative. But if there is a relative: true ancestor, it will be relative to that.

Defaults to:

0

y : Number

bindable bind

<ExtSurface [y]="10" />

let element = document.body.querySelector('ExtSurface');
element.y = 10;
let y = element.y;

Only valid when a component is cfg-floated

The x position at which to position this component. This is usually viewport-relative. But if there is a relative: true ancestor, it will be relative to that.

Defaults to:

0

ariaRole : String

readonly ro

<ExtSurface ariaRole="value" />

let element = document.body.querySelector('ExtSurface');
let ariaRole = element.ariaRole;

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

containsFocus : Boolean

readonly ro

<ExtSurface [containsFocus]="true" />

let element = document.body.querySelector('ExtSurface');
let containsFocus = element.containsFocus;

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

destroyed : Boolean

<ExtSurface [destroyed]="true" />

let element = document.body.querySelector('ExtSurface');
element.destroyed = true;
let destroyed = element.destroyed;

This property is set to true after the destroy method is called.

Defaults to:

false

factoryConfig : Object

<ExtSurface factoryConfig="{ }" />

let element = document.body.querySelector('ExtSurface');
element.factoryConfig = { };
let factoryConfig = element.factoryConfig;

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

<ExtSurface [focusable]="true" />

let element = document.body.querySelector('ExtSurface');
let focusable = element.focusable;

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

<ExtSurface focusClsEl="value" />

let element = document.body.querySelector('ExtSurface');
element.focusClsEl = 'value';
let focusClsEl = element.focusClsEl;

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

focusEl : Ext.dom.Element

<ExtSurface focusEl="value" />

let element = document.body.querySelector('ExtSurface');
element.focusEl = 'value';
let focusEl = element.focusEl;

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

<ExtSurface [hasFocus]="true" />

let element = document.body.querySelector('ExtSurface');
let hasFocus = element.hasFocus;

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

Defaults to:

false

hasListeners : Object

readonly ro

<ExtSurface hasListeners="{ }" />

let element = document.body.querySelector('ExtSurface');
let hasListeners = element.hasListeners;

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

inheritUi : Boolean / String

<ExtSurface [inheritUi]="true" />

let element = document.body.querySelector('ExtSurface');
element.inheritUi = true;
let inheritUi = element.inheritUi;

Set to true on widgets that should inherit ui from their parent container. This property is typically set on the class body, but can be set on an instance as long as it is set prior to the instance being added to its container. This property is inspected at the moment a widget is added to a container, and any UIs on the container are added to the widget at that time. Inherited UIs are in addition to the widget's own ui, and are updated when the container's UI changes.

Defaults to:

false

isObservable : Boolean

<ExtSurface [isObservable]="true" />

let element = document.body.querySelector('ExtSurface');
element.isObservable = true;
let isObservable = element.isObservable;

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

Defaults to:

true

lastKeyMapEvent : Ext.event.Event

<ExtSurface lastKeyMapEvent="value" />

let element = document.body.querySelector('ExtSurface');
element.lastKeyMapEvent = 'value';
let lastKeyMapEvent = element.lastKeyMapEvent;

The last key event processed is cached on the component for use in subsequent event handlers.

Available since: 6.6.0

addAfterListener

let element = document.body.querySelector('ExtSurface');
element.addAfterListener();

Alias for onAfter.

addBeforeListener

let element = document.body.querySelector('ExtSurface');
element.addBeforeListener();

Alias for onBefore.

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

let element = document.body.querySelector('ExtSurface');
element.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

let element = document.body.querySelector('ExtSurface');
let addListener = element.addListener(eventName, fn, scope, options, order);

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

let element = document.body.querySelector('ExtSurface');
let addManagedListener = element.addManagedListener(item, ename, fn, scope, options);

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.SomeSharedMenu, '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 )

let element = document.body.querySelector('ExtSurface');
element.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

afterRender

template tpl

let element = document.body.querySelector('ExtSurface');
element.afterRender();

This method is called after the component is initially added to the DOM. If this component <ExtContainer/> other components, the afterRender method for child components is called before the parent's afterRender.

Implementations of this method should avoid reading from the DOM but are free to write to the DOM as needed. To read the DOM, consider implementing onRender instead.

This method is not generally needed because components always have their own DOM element and these are maintained by config property updaters prior to insertion in the DOM. In general, it is always best to manipulate the component's elements outside the DOM where there is no associated reflow or layout cost. This method is useful for situations where the component's elements must be in the DOM in order to be manipulated correctly.

Available since: 6.5.0

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

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

let element = document.body.querySelector('ExtSurface');
element.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

let element = document.body.querySelector('ExtSurface');
element.clearListeners();

Removes all listeners for this object including the managed listeners

clearManagedListeners

let element = document.body.querySelector('ExtSurface');
element.clearManagedListeners();

Removes all managed listeners for this object.

destroyMembers ( args )

let element = document.body.querySelector('ExtSurface');
element.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

let element = document.body.querySelector('ExtSurface');
let destroyPlugin = element.destroyPlugin(plugin);

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

let element = document.body.querySelector('ExtSurface');
element.disable();

Disables this Component

doDestroy

let element = document.body.querySelector('ExtSurface');
element.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

let element = document.body.querySelector('ExtSurface');
element.enable();

Enables this Component

enableBubble ( eventNames )

let element = document.body.querySelector('ExtSurface');
element.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

let element = document.body.querySelector('ExtSurface');
let findPlugin = element.findPlugin(type);

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

let element = document.body.querySelector('ExtSurface');
let fireEvent = element.fireEvent(eventName, args);

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

let element = document.body.querySelector('ExtSurface');
let fireEventArgs = element.fireEventArgs(eventName, args);

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

let element = document.body.querySelector('ExtSurface');
let fireEventedAction = element.fireEventedAction(eventName, args, fn, scope, fnArgs);

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

let element = document.body.querySelector('ExtSurface');
let focus = element.focus(selectText);

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

let element = document.body.querySelector('ExtSurface');
let getConfig = element.getConfig(name, peek, ifInitialized);

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

getInherited ( [inner] ) : Object

let element = document.body.querySelector('ExtSurface');
let getInherited = element.getInherited(inner);

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

Available since: 5.0.0

Parameters

Returns

getInheritedConfig ( property, [skipThis] ) : Mixed

let element = document.body.querySelector('ExtSurface');
let getInheritedConfig = element.getInheritedConfig(property, skipThis);

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

let element = document.body.querySelector('ExtSurface');
let getInitialConfig = element.getInitialConfig(name);

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

let element = document.body.querySelector('ExtSurface');
let getPlugin = element.getPlugin(id);

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