<ExtCalendar_list/> calendar-list premium

store : Ext.data.Store / Object

required req

<ExtCalendar_list store="{ }" />

let element = document.body.querySelector('ExtCalendar_list');
element.store = { };
let store = element.store;

Can be either a Store instance or a configuration object that will be turned into a Store. The Store is used to populate the set of items that will be rendered in the DataView. See the DataView intro documentation for more information about the relationship between Store and DataView.

Defaults to:

null

activeItem : Object / String / Number

<ExtCalendar_list activeItem="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.activeItem = 'value';
let activeItem = element.activeItem;

The item from the 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

alwaysOnTop : Boolean / Number

<ExtCalendar_list alwaysOnTop="true" />

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

null

Available since: 6.2.0

ariaAttributes : Object

<ExtCalendar_list ariaAttributes="{ }" />

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

ariaDescribedBy : String

immutable imm

<ExtCalendar_list ariaDescribedBy="value" />

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

immutable imm

<ExtCalendar_list ariaLabel="value" />

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

immutable imm

<ExtCalendar_list ariaLabelledBy="value" />

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

autoDestroy : Boolean

<ExtCalendar_list autoDestroy="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.autoDestroy = true;
let autoDestroy = element.autoDestroy;

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

Defaults to:

true

autoSize : Boolean

<ExtCalendar_list autoSize="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.autoSize = true;
let autoSize = element.autoSize;

May be set to false for improved layout performance if auto-sizing is not required.

Some versions of Safari, both desktop and mobile, have very slow performance if the application has deeply nested containers due to the following WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=150445

Applications that experience performance issues in the affected versions of Safari may need to turn off autoSizing globally for all <ExtContainer/> instances by placing the following override in the application's "overrides" directory:

Ext.define('MyApp.overrides.Container', {
    override: 'Ext.Container',
    config: {
        autoSize: false
    }
});

Once auto-sizing support has turned off by default, it can be selectively turned back on only on those container instances that explicitly need auto-sizing behavior by setting autoSize to true.

This option can also be used to allow children to be sized in percentage units as a workaround for the following browser bug: https://bugs.webkit.org/show_bug.cgi?id=137730

To illustrate, the following example should render a 200px by 200px green box (the container) with a yellow box inside of it (the child item). The child item's height and width are both set to '50%' so the child should render exactly 100px by 100px in size.

<Container
    height={200}
    width={200}
    style="background: green"
>
    <Component
        style="background: yellow"
        height="50%"
        width="50%"
    />
</Container>

All browsers except for Safari render the previous example correctly, but Safari does not assign a height to the component. To make percentage-sized children work in Safari, simply set autoSize to false on the container.

Since the underlying implementation works by absolutely positioning the container's body element, this option can only be used when the container is not "shrink wrapping" the content in either direction. When autoSize is set to false, shrink wrapped dimension(s) will collapse to 0.

Defaults to:

true

axisLock : Boolean

immutable imm

<ExtCalendar_list axisLock="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.axisLock = true;
let axisLock = element.axisLock;

If true, then, when showBy or alignTo fallback on constraint violation only takes place along the major align axis.

That is, if alignment "l-r" is being used, and axisLock: true is used, then if constraints fail, only fallback to "r-l" is considered.

Defaults to:

null

bodyCls : String / String[]

immutable imm

<ExtCalendar_list bodyCls="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.bodyCls = 'value';
let bodyCls = element.bodyCls;

The CSS class to add to this container's body element.

Available since: 7.0

border : Boolean

<ExtCalendar_list border="true" />

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

Defaults to:

null

bottom : Number / String

<ExtCalendar_list bottom="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.bottom = 'value';
let bottom = element.bottom;

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 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

buttonAlign : String

immutable imm

<ExtCalendar_list buttonAlign="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.buttonAlign = 'value';
let buttonAlign = element.buttonAlign;

The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).

NOTE: The preferred way to specify toolbars is to use the items config specifying the docked config on the item. Instead of buttonAlign you would add the layout: { pack: 'start' | 'center' | 'end' } option to the docked item config.

Defaults to:

null

Available since: 6.5.0

centered : Boolean

<ExtCalendar_list centered="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.centered = true;
let centered = element.centered;

Configure this as true to have this Component centered within its Container. Setting this value to true will make this Component become 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

constrainTo : Ext.dom.Element / Ext.util.Region

<ExtCalendar_list constrainTo="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.constrainTo = 'value';
let constrainTo = element.constrainTo;

The element into which floated or positioned items constrain their position.

Defaults to the parent container for positioned components, and to the viewport for floated components.

Defaults to:

null

contentEl : Ext.dom.Element / HTMLElement / String

<ExtCalendar_list contentEl="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.contentEl = 'value';
let contentEl = element.contentEl;

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

data : Object

<ExtCalendar_list data="{ }" />

let element = document.body.querySelector('ExtCalendar_list');
element.data = { };
let data = element.data;

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

Defaults to:

null

defaultFocus : String

immutable imm

<ExtCalendar_list defaultFocus="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.defaultFocus = 'value';
let defaultFocus = element.defaultFocus;

Specifies a child Component to receive focus when this Container's method-focus method is called. Should be a valid Ext.ComponentQuery selector.

defaults : Object

<ExtCalendar_list defaults="{ }" />

let element = document.body.querySelector('ExtCalendar_list');
element.defaults = { };
let defaults = element.defaults;

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 children with similar configurations. For example here we can specify that each child has a height of 20px and avoid repeating the declaration for each one:

<Container
    fullscreen
    defaults={{
        height: 20
    }}
>
    <Panel>Panel 1</Panel>
    <Panel>Panel 2</Panel>
</Container>

Defaults to:

null

deferEmptyText : Boolean

<ExtCalendar_list deferEmptyText="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.deferEmptyText = true;
let deferEmptyText = element.deferEmptyText;

true to defer emptyText being applied until the store's first load.

Defaults to:

true

deselectOnContainerClick : Boolean

<ExtCalendar_list deselectOnContainerClick="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.deselectOnContainerClick = true;
let deselectOnContainerClick = element.deselectOnContainerClick;

When set to true, tapping on the DataView's background (i.e. not on an item in the DataView) will deselect any currently selected items.

Defaults to:

true

disabled : Boolean

<ExtCalendar_list disabled="true" />

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

Whether or not this component is disabled

Defaults to:

null

docked : String

<ExtCalendar_list docked="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.docked = 'value';
let docked = element.docked;

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

<ExtCalendar_list draggable="{ }" />

let element = document.body.querySelector('ExtCalendar_list');
element.draggable = { };
let draggable = element.draggable;

Configuration options to make this Component draggable

Defaults to:

null

emptyText : String

<ExtCalendar_list emptyText="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.emptyText = 'value';
let emptyText = element.emptyText;

The text to display in the view when there is no data to display

Defaults to:

null

factoryConfig : Object

readonly ro

<ExtCalendar_list factoryConfig="{ }" />

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

flex : Number / String / Object

<ExtCalendar_list flex="value" />

let element = document.body.querySelector('ExtCalendar_list');
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 href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex" class="external-link" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/flex 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 with camel-cased names 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
}

floated : Boolean

<ExtCalendar_list floated="true" />

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

null

Available since: 6.2.0

focusCls : String

immutable imm

<ExtCalendar_list focusCls="value" />

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

focusClsEl : Ext.dom.Element

readonly ro

<ExtCalendar_list focusClsEl="value" />

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

readonly ro

<ExtCalendar_list focusEl="value" />

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

fullscreen : Boolean

immutable imm

<ExtCalendar_list fullscreen="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.fullscreen = true;
let fullscreen = element.fullscreen;

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

height : Number / String

<ExtCalendar_list height="value" />

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

<ExtCalendar_list hidden="true" />

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

hideAnimation : String / Mixed

<ExtCalendar_list hideAnimation="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.hideAnimation = 'value';
let hideAnimation = element.hideAnimation;

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

<ExtCalendar_list hideOnMaskTap="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.hideOnMaskTap = true;
let hideOnMaskTap = element.hideOnMaskTap;

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

<ExtCalendar_list html="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.html = 'value';
let html = element.html;

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

Defaults to:

null

id : String

<ExtCalendar_list id="value" />

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

inline : Boolean / Object

<ExtCalendar_list inline="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.inline = true;
let inline = element.inline;

When set to true the items within the DataView will have their display set to inline-block and be arranged horizontally. By default the items will wrap to the width of the DataView. Passing an object with { wrap: false } will turn off this wrapping behavior and overflowed items will need to be scrolled to horizontally.

Defaults to:

null

isDataView : Boolean

readonly ro

<ExtCalendar_list isDataView="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.isDataView = true;
let isDataView = element.isDataView;

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

Defaults to:

true

isObservable : Boolean

readonly ro

<ExtCalendar_list isObservable="true" />

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

itemCls : String

<ExtCalendar_list itemCls="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.itemCls = 'value';
let itemCls = element.itemCls;

An additional CSS class to apply to items within the DataView.

Defaults to:

null

itemConfig : Object

<ExtCalendar_list itemConfig="{ }" />

let element = document.body.querySelector('ExtCalendar_list');
element.itemConfig = { };
let itemConfig = element.itemConfig;

A configuration object that is passed to every item created by a component based DataView. Because each item that a DataView renders is a Component, we can pass configuration options to each component to easily customize how each child component behaves.

Note: this is only used when useComponents is true.

Defaults to:

null

itemId : String

<ExtCalendar_list itemId="value" />

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

itemTpl : String / String[] / Ext.XTemplate

<ExtCalendar_list itemTpl="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.itemTpl = 'value';
let itemTpl = element.itemTpl;

The tpl to use for each of the items displayed in this DataView.

Defaults to:

'<div>{text}</div>'

keyMap : Object

<ExtCalendar_list keyMap="{ }" />

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

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

<ExtCalendar_list keyMapEnabled="true" />

let element = document.body.querySelector('ExtCalendar_list');
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 Ext.Component at the proper time, this is not something application code normally handles.

Defaults to:

null

layout : Object / String

<ExtCalendar_list layout="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.layout = 'value';
let layout = element.layout;

Configuration for this Container's layout. Example:

<Container
    layout={{
        type: "hbox",
        align: "middle"
    }}
>
    <Panel
        html="hello"
        flex={1}
        bodyStyle={{
            background: "#000",
            color: "#fff"
        }}
    />
    <Panel
        html="world"
        flex={2}
        bodyStyle={{
            background: "#f00",
            color: "#fff"
        }}
    />
</Container>

Defaults to:

auto

left : Number / String

<ExtCalendar_list left="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.left = 'value';
let left = element.left;

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 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

listeners : Object

<ExtCalendar_list listeners="{ }" />

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

loadingHeight : Number

<ExtCalendar_list loadingHeight="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.loadingHeight = 10;
let loadingHeight = element.loadingHeight;

If specified, gives an explicit height for a floated data view when it is showing the loadingText, if that is specified. This is useful to prevent the view's height from collapsing to zero when the loading mask is applied and there are no other contents in the data view.

Defaults to:

null

loadingText : String / Boolean

immutable imm

<ExtCalendar_list loadingText="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.loadingText = true;
let loadingText = element.loadingText;

A string to display during data load operations. If specified, this text will be displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's contents will continue to display normally until the new data is loaded and the contents are replaced.

Defaults to:

'Loading...'

margin : Number / String

immutable imm

<ExtCalendar_list margin="value" />

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

masked : Boolean / Object / Ext.Mask / <ExtLoadmask/>

<ExtCalendar_list masked="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.masked = true;
let masked = element.masked;

A configuration to allow you to mask this container.

If the value is a boolean, a plain mask will be displayed without a message.

<Container masked>
    Hello World
</Container>

If the value is a string, it will be used as the message config for an <ExtLoadmask/>.

<Container masked="Please wait...">
    Hello World
</Container>

For more precise control over the mask, you add a <LoadMask/> as a child of the container. Please refer to the <ExtLoadmask/> component to see the props it supports.

<Container>
    <LoadMask message="Please wait..."/>
</Container>

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

Defaults to:

null

maxHeight : Number / String

<ExtCalendar_list maxHeight="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.maxHeight = 'value';
let maxHeight = element.maxHeight;

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 'positioned' (absolutely positioned or centered)

Defaults to:

null

maxItemCache : Number

<ExtCalendar_list maxItemCache="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.maxItemCache = 10;
let maxItemCache = element.maxItemCache;

Maintains a cache of reusable components when using a component based DataView. Improving performance at the cost of memory.

Note: this is currently only used when useComponents is true.

Defaults to:

20

maxWidth : Number / String

<ExtCalendar_list maxWidth="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.maxWidth = 'value';
let maxWidth = element.maxWidth;

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 'positioned' (absolutely positioned or centered)

Defaults to:

null

minButtonWidth : Number

immutable imm

<ExtCalendar_list minButtonWidth="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.minButtonWidth = 10;
let minButtonWidth = element.minButtonWidth;

Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default value for the Ext.Button#minWidth config of each Button added to the footer toolbar via the fbar or buttons configurations. It will be ignored for buttons that have a minWidth configured some other way, e.g. in their own config object or via the defaults of their parent container.

Defaults to:

null

Available since: 6.5.0

minHeight : Number / String

<ExtCalendar_list minHeight="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.minHeight = 'value';
let minHeight = element.minHeight;

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

<ExtCalendar_list minWidth="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.minWidth = 'value';
let minWidth = element.minWidth;

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

<ExtCalendar_list modal="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.modal = true;
let modal = element.modal;

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

Defaults to:

null

name : String

immutable imm

<ExtCalendar_list name="value" />

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

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

Defaults to:

null

padding : Number / String

<ExtCalendar_list padding="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.padding = 'value';
let padding = element.padding;

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

<ExtCalendar_list plugins="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.plugins = 'value';
let plugins = element.plugins;

An object or array of objects that will provide custom functionality for this component. If a string is provided or a string is one of the elements of the array, that string is treated as the type alias. For example, "listpaging" is the type alias for Ext.plugin.ListPaging. The full alias includes the "plugin." prefix (i.e., 'plugin.listpaging').

Plugins should derive from Ext.plugin.Abstract but this is not required. The only requirement for a valid plugin is that it contain an init() method that accepts a reference to the owning 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.

Example code

A plugin by alias:

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

     plugins: 'listpaging'
 });

Multiple plugins by alias:

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

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

Single plugin by class name with config options:

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

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

Multiple plugins by type and class name with config options:

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

     plugins: [{
         xclass: 'Ext.plugin.PullRefresh',
         pullRefreshText: 'Pull to refresh...'
     }, {
         type: 'listpaging',
         autoPaging: true
     }]
 });

pressedDelay : Number

<ExtCalendar_list pressedDelay="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.pressedDelay = 10;
let pressedDelay = element.pressedDelay;

The amount of delay between the tapstart and the moment we add the pressedCls.

Defaults to:

100

record : Ext.data.Model

<ExtCalendar_list record="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.record = 'value';
let record = element.record;

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

relative : Boolean

<ExtCalendar_list relative="true" />

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

null

Available since: 6.2.0

right : Number / String

<ExtCalendar_list right="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.right = 'value';
let right = element.right;

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 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

scrollToTopOnRefresh : Boolean

<ExtCalendar_list scrollToTopOnRefresh="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.scrollToTopOnRefresh = true;
let scrollToTopOnRefresh = element.scrollToTopOnRefresh;

Scroll the DataView to the top when the DataView is refreshed.

Defaults to:

true

scrollable : Boolean / String / Object

<ExtCalendar_list scrollable="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.scrollable = true;
let scrollable = element.scrollable;

Configuration options to make this Component scrollable. Acceptable values are:

• true to enable auto scrolling.
• false (or null) to disable scrolling - this is the default.
• x or horizontal to enable horizontal scrolling only
• y or vertical to enable vertical scrolling only

Also accepts a configuration object for a Ext.scroll.Scroller if if advanced configuration is needed.

The getter for this config returns the Ext.scroll.Scroller instance. You can use the Scroller API to read or manipulate the scroll position:

// scrolls the component to 5 on the x axis and 10 on the y axis
component.getScrollable().scrollTo(5, 10);

Defaults to:

true

shadow : Boolean

<ExtCalendar_list shadow="true" />

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

shim : Boolean

<ExtCalendar_list shim="true" />

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

null

Available since: 6.2.0

showAnimation : String / Mixed

<ExtCalendar_list showAnimation="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.showAnimation = 'value';
let showAnimation = element.showAnimation;

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

<ExtCalendar_list style="value" />

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

tabIndex : Number

<ExtCalendar_list tabIndex="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.tabIndex = 10;
let tabIndex = element.tabIndex;

DOM tabIndex attribute for this component's focusEl.

Defaults to:

null

toFrontOnShow : Boolean

<ExtCalendar_list toFrontOnShow="true" />

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

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

Defaults to:

true

top : Number / String

<ExtCalendar_list top="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.top = 'value';
let top = element.top;

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 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

touchAction : Object

immutable imm

<ExtCalendar_list touchAction="{ }" />

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

Defaults to:

null

tpl : Function / String / String[]

<ExtCalendar_list tpl="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.tpl = 'value';
let tpl = element.tpl;

A string, array of strings, or a function that returns JSX.

tpl = data =>

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

<ExtCalendar_list tplWriteMode="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.tplWriteMode = 'value';
let tplWriteMode = element.tplWriteMode;

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'

triggerCtEvent : String

<ExtCalendar_list triggerCtEvent="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.triggerCtEvent = 'value';
let triggerCtEvent = element.triggerCtEvent;

Determines what type of touch event is recognized as a touch on the container. Valid options are 'tap' and 'singletap'.

Defaults to:

'tap'

triggerEvent : String

<ExtCalendar_list triggerEvent="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.triggerEvent = 'value';
let triggerEvent = element.triggerEvent;

Determines what type of touch event causes an item to be selected. Valid options are: 'itemtap', 'itemsingletap', 'itemdoubletap', 'itemswipe', 'itemtaphold', 'itemlongpress'.

Defaults to:

'itemtap'

ui : String / String[]

immutable imm

<ExtCalendar_list ui="value" />

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

useComponents : Boolean

<ExtCalendar_list useComponents="true" />

let element = document.body.querySelector('ExtCalendar_list');
element.useComponents = true;
let useComponents = element.useComponents;

Flag the use a component based DataView implementation. This allows the full use of components in the DataView at the cost of some performance.

Defaults to:

null

userCls : String / String[]

immutable imm

<ExtCalendar_list userCls="value" />

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

Defaults to:

null

weight : Number

immutable imm

<ExtCalendar_list weight="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.weight = 10;
let weight = element.weight;

This value controls this item's order in a weighted <ExtContainer/> (see parent).

Lower values gravitate towards the start of the container - the top in vertical layouts, the locale start side in horizontal layouts.

Defaults to:

null

width : Number / String

<ExtCalendar_list width="value" />

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

<ExtCalendar_list x="10" />

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

xtype : String

immutable imm

<ExtCalendar_list xtype="value" />

let element = document.body.querySelector('ExtCalendar_list');
element.xtype = 'value';
let xtype = element.xtype;

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.

Defaults to:

"component"

y : Number

<ExtCalendar_list y="10" />

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

zIndex : Number

<ExtCalendar_list zIndex="10" />

let element = document.body.querySelector('ExtCalendar_list');
element.zIndex = 10;
let zIndex = element.zIndex;

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

Not valid for cfg-floated Components. The Z ordering of cfg-floated Components is managed by ordering of the DOM elements.

Defaults to:

null

addAfterListener

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

Alias for onAfter.

addBeforeListener

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

Alias for onBefore.

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

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

false

'current'

myPanel.on('hide', this.handleClick, this, {
    single: true,
    delay: 100
});

grid.on({
    itemclick: 'onItemClick',
    itemcontextmenu: grid.onItemContextmenu,
    destroy: {
        fn: function () {
            // function called within the 'altCmp' scope instead of grid
        },
        scope: altCmp // unique scope for the destroy handler
    },
    scope: grid       // default scope - provided for example clarity
});

var panel = Ext.create({
    xtype: 'panel',
    renderTo: document.body,
    title: 'Delegate Handler Example',
    frame: true,
    height: 220,
    width: 220,
    html: '<h1 class="myTitle">BODY TITLE</h1>Body content'
});

// The click handler will only be called when the click occurs on the
// delegate: h1.myTitle ("h1" tag with class "myTitle")
panel.on({
    click: function (e) {
        console.log(e.getTarget().innerHTML);
    },
    element: 'body',
    delegate: 'h1.myTitle'
 });

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('ExtCalendar_list');
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.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 )

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

clearListeners

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

Removes all listeners for this object including the managed listeners

clearManagedListeners

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

Removes all managed listeners for this object.

destroyPlugin ( plugin ) : Ext.plugin.Abstract

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

enableBubble ( eventNames )

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

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

focus ( [selectText] ) : Boolean

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

getInherited ( [inner] ) : Object

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

getItemAt ( index ) : HTMLElement/Ext.dataview.component.DataItem

let element = document.body.querySelector('ExtCalendar_list');
let getItemAt = element.getItemAt(index);

Returns an item at the specified index.

Parameters

Returns

getItemIndex ( item ) : Number

let element = document.body.querySelector('ExtCalendar_list');
let getItemIndex = element.getItemIndex(item);

Returns an index for the specified item.

Parameters

Returns

getParent Ext.Component

let element = document.body.querySelector('ExtCalendar_list');
let getParent = element.getParent();

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

Returns

getPlugin ( id ) : Ext.plugin.Abstract

let element = document.body.querySelector('ExtCalendar_list');
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: {
         xclass: 'Ext.plugin.PullRefresh',
         id: 'foo'
     }
 });

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

Note: See also findPlugin.

Available since: 6.2.0

Parameters

Returns

getTabIndex Number

let element = document.body.querySelector('ExtCalendar_list');
let getTabIndex = element.getTabIndex();

Return the actual tabIndex for this Focusable.

Returns

getViewItems HTMLElement[]/Ext.dataview.component.DataItem[]

let element = document.body.querySelector('ExtCalendar_list');
let getViewItems = element.getViewItems();

Returns an array of the current items in the DataView. Depends on the cfg-useComponents configuration.

Returns

hasListener ( eventName ) : Boolean

let element = document.body.querySelector('ExtCalendar_list');
let hasListener = element.hasListener(eventName);

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

hasParent Boolean

let element = document.body.querySelector('ExtCalendar_list');
let hasParent = element.hasParent();

Returns true if this component has a parent.

Returns

is Boolean

template tpl

let element = document.body.querySelector('ExtCalendar_list');
let is = element.is();

Selector processing function for use by nextSibling,previousibling, nextNode,and previousNode, to filter candidate nodes.

The base implementation returns true. Classes which mix in Traversable may implement their own implementations. @link{Ext.Widget} does this to implement Ext.ComponentQuery based filterability.

Returns

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

isAncestor ( possibleDescendant )

let element = document.body.querySelector('ExtCalendar_list');
element.isAncestor(possibleDescendant);

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

isDescendantOf ( ancestor ) : Boolean

let element = document.body.querySelector('ExtCalendar_list');
let isDescendantOf = element.isDescendantOf(ancestor);

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

Parameters

Returns

isFocusable ( [deep] ) : Boolean

let element = document.body.querySelector('ExtCalendar_list');
let isFocusable = element.isFocusable(deep);

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 <ExtContainer/> for more information.

Parameters

Returns

isSuspended ( [event] ) : Boolean

let element = document.body.querySelector('ExtCalendar_list');
let isSuspended = element.isSuspended(event);

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

Parameters

Returns

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

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

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

let element = document.body.querySelector('ExtCalendar_list');
element.mun(item, ename, fn, scope);

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

Parameters

nextNode ( [selector] ) : Ext.Component

let element = document.body.querySelector('ExtCalendar_list');
let nextNode = element.nextNode(selector);

Returns the next node in the Component tree in tree traversal order.

Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with nextSibling.

Parameters

Returns

nextSibling ( [selector] ) : Ext.Component

let element = document.body.querySelector('ExtCalendar_list');
let nextSibling = element.nextSibling(selector);

Returns the next sibling of this Component.

Optionally selects the next sibling which matches the passed Ext.ComponentQuery selector.

May also be referred to as next()

Note that this is limited to siblings, and if no siblings of the item match, null is returned. Contrast with nextNode

Parameters

Returns

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

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

false

'current'

myPanel.on('hide', this.handleClick, this, {
    single: true,
    delay: 100
});

grid.on({
    itemclick: 'onItemClick',
    itemcontextmenu: grid.onItemContextmenu,
    destroy: {
        fn: function () {
            // function called within the 'altCmp' scope instead of grid
        },
        scope: altCmp // unique scope for the destroy handler
    },
    scope: grid       // default scope - provided for example clarity
});

var panel = Ext.create({
    xtype: 'panel',
    renderTo: document.body,
    title: 'Delegate Handler Example',
    frame: true,
    height: 220,
    width: 220,
    html: '<h1 class="myTitle">BODY TITLE</h1>Body content'
});

// The click handler will only be called when the click occurs on the
// delegate: h1.myTitle ("h1" tag with class "myTitle")
panel.on({
    click: function (e) {
        console.log(e.getTarget().innerHTML);
    },
    element: 'body',
    delegate: 'h1.myTitle'
 });

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

let element = document.body.querySelector('ExtCalendar_list');
element.onAfter(eventName, fn, scope, options);

Appends an after-event handler.

Same as addListener with order set to 'after'.

Parameters

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

let element = document.body.querySelector('ExtCalendar_list');
element.onBefore(eventName, fn, scope, options);

Appends a before-event handler. Returning false from the handler will stop the event.

Same as addListener with order set to 'before'.

Parameters

onNavigate ( e )

let element = document.body.querySelector('ExtCalendar_list');
element.onNavigate(e);

This method is called by the navigationModel when navigation events are detected within this DataView.

It may be overridden to control the linkage of navigation events such as taps, clicks or keystrokes detected by the navigationModel to the selectionModel.

callParent if you wish selection to proceed from the passed event.

Parameters

prepareData ( data, index, record ) : Array/Object

let element = document.body.querySelector('ExtCalendar_list');
let prepareData = element.prepareData(data, index, record);

Function which can be overridden to provide custom formatting for each Record that is used by this DataView's template to render each node.

Parameters

Returns

previousNode ( [selector] ) : Ext.Component

let element = document.body.querySelector('ExtCalendar_list');
let previousNode = element.previousNode(selector);

Returns the previous node in the Component tree in tree traversal order.

Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with previousSibling.

Parameters

Returns

previousSibling ( [selector] ) : Ext.Component

let element = document.body.querySelector('ExtCalendar_list');
let previousSibling = element.previousSibling(selector);

Returns the previous sibling of this Component.

Optionally selects the previous sibling which matches the passed Ext.ComponentQuery selector.

May also be referred to as prev()

Note that this is limited to siblings, and if no siblings of the item match, null is returned. Contrast with previousNode

Parameters

Returns

refresh

let element = document.body.querySelector('ExtCalendar_list');
element.refresh();

Refreshes the view by reloading the data from the store and re-rendering the template.

relayEvents ( origin, events, [prefix] ) : Object

let element = document.body.querySelector('ExtCalendar_list');
let relayEvents = element.relayEvents(origin, events, prefix);

Relays selected events from the specified Observable as if the events were fired by this.

For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent:

this.relayEvents(this.getStore(), ['load']);

The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the this keyword (unless the event is handled by a controller's control/listen event listener in which case 'this' will be the controller rather than the grid).

Parameters

this.relayEvents(this.getStore(), ['load', 'clear'], 'store');

Returns

this.storeRelayers = this.relayEvents(this.getStore(), ['load', 'clear'], 'store');

Ext.destroy(this.storeRelayers);

removeAfterListener

let element = document.body.querySelector('ExtCalendar_list');
element.removeAfterListener();

Alias for unAfter.

removeBeforeListener

let element = document.body.querySelector('ExtCalendar_list');
element.removeBeforeListener();

Alias for unBefore.

removeListener ( eventName, fn, [scope] )

let element = document.body.querySelector('ExtCalendar_list');
element.removeListener(eventName, fn, scope);

Removes an event handler.

Parameters

var listeners = cmp.on({
    scope: cmp,
    afterrender: cmp.onAfterrender,
    beforehide: cmp.onBeforeHide,
    destroyable: true
});

// Remove listeners
listeners.destroy();
// or
cmp.un(
    scope: cmp,
    afterrender: cmp.onAfterrender,
    beforehide: cmp.onBeforeHide
);

panel.on({
    element: 'body',
    click: 'onBodyCLick'
});

panel.body.un({
    click: 'onBodyCLick'
});

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

let element = document.body.querySelector('ExtCalendar_list');
element.removeManagedListener(item, ename, fn, scope);

Removes listeners that were added by the mon method.

Parameters

removePlugin ( plugin, [destroy] ) : Ext.plugin.Abstract

let element = document.body.querySelector('ExtCalendar_list');
let removePlugin = element.removePlugin(plugin, destroy);

Removes and (optionally) 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

resumeEvent ( eventName )

let element = document.body.querySelector('ExtCalendar_list');
element.resumeEvent(eventName);

Resumes firing of the named event(s).

After calling this method to resume events, the events will fire when requested to fire.

Note that if the suspendEvent method is called multiple times for a certain event, this converse method will have to be called the same number of times for it to resume firing.

Parameters

resumeEvents ( [discardQueue] )

let element = document.body.querySelector('ExtCalendar_list');
element.resumeEvents(discardQueue);

Resumes firing events (see suspendEvents).

If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.

Parameters

setListeners ( listeners )

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

An alias for addListener. In versions prior to 5.1, listeners had a generated setter which could be called to add listeners. In 5.1 the listeners config is not processed using the config system and has no generated setter, so this method is provided for backward compatibility. The preferred way of adding listeners is to use the on method.

Parameters

setTabIndex ( newTabIndex )

let element = document.body.querySelector('ExtCalendar_list');
element.setTabIndex(newTabIndex);

Set the tabIndex property for this Focusable. If the focusEl is available, set tabIndex attribute on it, too.

Parameters

suspendEvent ( eventName )

let element = document.body.querySelector('ExtCalendar_list');
element.suspendEvent(eventName);

Suspends firing of the named event(s).

After calling this method to suspend events, the events will no longer fire when requested to fire.

Note that if this is called multiple times for a certain event, the converse method resumeEvent will have to be called the same number of times for it to resume firing.

Parameters

suspendEvents ( queueSuspended )

let element = document.body.querySelector('ExtCalendar_list');
element.suspendEvents(queueSuspended);

Suspends the firing of all events. (see resumeEvents)

Parameters

un ( eventName, fn, [scope] )

let element = document.body.querySelector('ExtCalendar_list');
element.un(eventName, fn, scope);

Shorthand for removeListener. Removes an event handler.

Parameters

var listeners = cmp.on({
    scope: cmp,
    afterrender: cmp.onAfterrender,
    beforehide: cmp.onBeforeHide,
    destroyable: true
});

// Remove listeners
listeners.destroy();
// or
cmp.un(
    scope: cmp,
    afterrender: cmp.onAfterrender,
    beforehide: cmp.onBeforeHide
);

panel.on({
    element: 'body',
    click: 'onBodyCLick'
});

panel.body.un({
    click: 'onBodyCLick'
});

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

let element = document.body.querySelector('ExtCalendar_list');
element.unAfter(eventName, fn, scope, options);

Removes a before-event handler.

Same as removeListener with order set to 'after'.

Parameters

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

let element = document.body.querySelector('ExtCalendar_list');
element.unBefore(eventName, fn, scope, options);

Removes a before-event handler.

Same as removeListener with order set to 'before'.

Parameters

up ( [selector], [limit] ) : Ext.Container

let element = document.body.querySelector('ExtCalendar_list');
let up = element.up(selector, limit);

Walks up the ownership hierarchy looking for an ancestor Component which matches the passed simple selector.

Example:

var owningTabPanel = grid.up('tabpanel');

Parameters

Returns