<ExtCalendar_form-add/> xtype: calendar-form-add premium

activeChildTabIndex : Number

<ExtCalendar_form-add activeChildTabIndex="10" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.activeChildTabIndex = 10;
let activeChildTabIndex = element.activeChildTabIndex;

DOM tabIndex attribute to set on the active Focusable child of this container when using the "Roaming tabindex" technique.

Defaults to:

0

activeItem : <ExtComponent/> / Object / String / Number

bindable bind

<ExtCalendar_form-add activeItem="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.activeItem = 'value';
let activeItem = element.activeItem;

The item from the cfg-items collection that will be active first. This is usually only meaningful in a Ext.layout.Card, where only one item can be active at a time. If passed a string, it will be assumed to be a Ext.ComponentQuery selector. A number will reference an index or a <ExtComponent/> instance may be passed as well. An object config will be created as a new component.

Defaults to:

0

alignSelf : String

bindable bind

<ExtCalendar_form-add alignSelf="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.alignSelf = 'value';
let alignSelf = element.alignSelf;

Specifies the self alignment of this widget in a box layout

Defaults to:

null

allDayField : Object

bindable bind

<ExtCalendar_form-add allDayField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.allDayField = { };
let allDayField = element.allDayField;

The config for the all day field.

Defaults to:

{
    xtype: 'checkboxfield',
    itemId: 'allDay',
    name: 'allDay',
    label: 'All Day',
    listeners: {
        change: 'onAllDayChange'
    }
}

allowFocusingDisabledChildren : Boolean

<ExtCalendar_form-add allowFocusingDisabledChildren="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.allowFocusingDisabledChildren = true;
let allowFocusingDisabledChildren = element.allowFocusingDisabledChildren;

Set this to true to enable focusing disabled child items via keyboard.

Defaults to:

false

alwaysOnTop : Boolean / Number

bindable bind

<ExtCalendar_form-add alwaysOnTop="true" />

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

anchor : Boolean

bindable bind

<ExtCalendar_form-add anchor="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.anchor = true;
let anchor = element.anchor;

Configure true to show an anchor element pointing to the target component when this Panel is floating and shown by another component.

Defaults to:

false

api : Object

bindable bind

<ExtCalendar_form-add api="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.api = { };
let api = element.api;

If specified, load and submit (see formpanel) actions will be loaded and submitted via Ext Direct. Methods which have been imported by Ext.direct.Manager can be specified here to load and submit forms.

API methods may also be specified as strings and will be parsed into the actual functions when the first submit or load has occurred.

For example, instead of the following:

 api: {
     load: App.ss.MyProfile.load,
     submit: App.ss.MyProfile.submit
 }

You can use strings:

 api: {
     load: 'App.ss.MyProfile.load',
     submit: 'App.ss.MyProfile.submit'
 }

You can also use a prefix instead of fully qualified function names:

 api: {
     prefix: 'App.ss.MyProfile',
     load: 'load',
     submit: 'submit'
 }

Load actions can use paramOrder or paramsAsHash to customize how the load is invoked.

For formpanel, submit actions will always use a standard form submit. The formHandler configuration (see Ext.direct.RemotingProvider#action) must be set on the associated server-side method which has been imported by Ext.direct.Manager.

Defaults to:

null

ariaAttributes : Object

bindable bind

<ExtCalendar_form-add ariaAttributes="{ }" />

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

<ExtCalendar_form-add ariaDescribedBy="value" />

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

<ExtCalendar_form-add ariaLabel="value" />

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

<ExtCalendar_form-add ariaLabelledBy="value" />

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

bindable bind

<ExtCalendar_form-add autoDestroy="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.autoDestroy = true;
let autoDestroy = element.autoDestroy;

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

Defaults to:

true

autoSize : Boolean

bindable bind

<ExtCalendar_form-add autoSize="true" />

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

Ext.create({
    xtype: 'container',
    renderTo: Ext.getBody(),
    height: 200,
    width: 200,
    style: 'background: green',
    items: [{
        xtype: 'component',
        style: 'background: yellow',
        height: '50%',
        width: '50%'
    }]
});

All browsers except for Safari render the previous example correctly, but Safari does not assign a height to the component. To make percentage-sized items 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

bindable bind

<ExtCalendar_form-add axisLock="true" />

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

baseParams : Object

bindable bind

<ExtCalendar_form-add baseParams="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.baseParams = { };
let baseParams = element.baseParams;

Optional set of params to be sent.

For formpanel this only applies when standardSubmit is set to false.

Defaults to:

null

bbar : Object / Object[]

bindable bind

<ExtCalendar_form-add bbar="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.bbar = { };
let bbar = element.bbar;

Convenience config. Short for 'Bottom Bar'.

is equivalent to

Defaults to:

null

Available since: 6.5.0

bind : Object / String

bindable bind

<ExtCalendar_form-add bind="value" />

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

bodyBorder : Boolean

bindable bind

<ExtCalendar_form-add bodyBorder="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.bodyBorder = true;
let bodyBorder = element.bodyBorder;

Controls the border style of the panel body using the following values:

• true to enable the border around the panel body (as defined by the theme) Note that even when enabled, the bodyBorder is only visible when there are docked items around the edges of the panel. Where the bodyBorder touches the panel's outer border it is automatically collapsed into a single border.

• false to disable the body border

• null - use the value of border as the value for bodyBorder

Defaults to:

null

bodyCls : String / String[]

bindable bind

<ExtCalendar_form-add bodyCls="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.bodyCls = 'value';
let bodyCls = element.bodyCls;

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

Defaults to:

null

Available since: 7.0

bodyPadding : Number / Boolean / String

bindable bind

<ExtCalendar_form-add bodyPadding="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.bodyPadding = true;
let bodyPadding = element.bodyPadding;

A shortcut for setting a padding style on the body element. The value can either be a number to be applied to all sides, or a normal CSS string describing padding.

bodyPadding: 5 // 5px padding on all sides

bodyPadding: '10 20' // 10px top and bottom padding - 20px side padding

See the unitizeBox method for more information on what string values are valid

Defaults to:

null

bodyStyle : String / Object

bindable bind

<ExtCalendar_form-add bodyStyle="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.bodyStyle = 'value';
let bodyStyle = element.bodyStyle;

Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string or an object containing style property name/value pairs.

For example, these two formats are interpreted to be equivalent:

bodyStyle: 'background:#ffc; padding:10px;'

bodyStyle: {
    background: '#ffc',
    padding: '10px'
}

Defaults to:

null

Available since: 6.5.0

border : Boolean

bindable bind

<ExtCalendar_form-add border="true" />

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

false

bottom : Number / String

bindable bind

<ExtCalendar_form-add bottom="value" />

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

bubbleDirty : Boolean

bindable bind

<ExtCalendar_form-add bubbleDirty="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.bubbleDirty = true;
let bubbleDirty = element.bubbleDirty;

Set to false to disable dirty states affecting ancestor containers such as fieldpanel or formpanel. The dirty state of such containers is based on the presence of dirty descendants. In some cases, however, it may be desired to hide the dirty state of one of these containers from its ancestor containers.

Defaults to:

true

Available since: 7.0

buttonAlign : String

bindable bind

<ExtCalendar_form-add buttonAlign="value" />

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

'center'

Available since: 6.5.0

buttons : Object / Ext.Button[]

<ExtCalendar_form-add buttons="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.buttons = { };
let buttons = element.buttons;

The buttons for this panel to be displayed in the buttonToolbar as a keyed object (or array) of button configuration objects.

For buttons that are defined in standardButtons (such as 'ok'), there is a more convenient short-hand for this config:

The minButtonWidth is used as the default minWidth for the buttons in the buttons toolbar.

Available since: 6.5.0

buttonToolbar : Object / <ExtToolbar/>

bindable bind

<ExtCalendar_form-add buttonToolbar="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.buttonToolbar = { };
let buttonToolbar = element.buttonToolbar;

Configure the toolbar that holds the buttons inside.

Defaults to:

{
    xtype: 'toolbar',
    itemId: 'buttonToolbar',
    docked: 'bottom',
    defaultType: 'button',
    weighted: true,
    ui: 'footer',
    defaultButtonUI: 'action',
    layout: {
        type: 'box',
        vertical: false,
        pack: 'center'
    }
}

Available since: 6.5.0

calendarField : Object

bindable bind

<ExtCalendar_form-add calendarField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.calendarField = { };
let calendarField = element.calendarField;

The config for the calendar field.

Defaults to:

{
    xtype: 'calendar-calendar-picker',
    label: 'Calendar',
    name: 'calendarId',
    displayField: 'title',
    valueField: 'id'
}

cancelButton : Object

bindable bind

<ExtCalendar_form-add cancelButton="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.cancelButton = { };
let cancelButton = element.cancelButton;

The config for the cancel button.

Defaults to:

{
    text: 'Cancel',
    handler: 'onCancelTap'
}

centered : Boolean

bindable bind

<ExtCalendar_form-add centered="true" />

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

false

closable : Boolean

bindable bind

<ExtCalendar_form-add closable="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.closable = true;
let closable = element.closable;

True to display the 'close' tool button and allow the user to close the panel or false to hide the button and disallow closing the window.

By default, when close is requested by clicking the close button in the header, the method-close method will be called. This will destroy the Panel and its content meaning that it may not be reused.

To make closing a Panel hide the Panel so that it may be reused, set closeAction to 'hide'.

Defaults to:

null

closeAction : String

bindable bind

<ExtCalendar_form-add closeAction="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.closeAction = 'value';
let closeAction = element.closeAction;

The action to take when the close header tool is clicked:

• method-destroy :

  remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the method-show method.

• method-hide :

  method-hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the method-show method.

Note: This behavior has changed! setting does affect the method-close method which will invoke the appropriate closeAction.

Defaults to:

'destroy'

closeToolText : String

bindable bind

<ExtCalendar_form-add closeToolText="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.closeToolText = 'value';
let closeToolText = element.closeToolText;

Text to be announced by screen readers when the close <ExtTool/> <ExtPaneltool/> is focused. Will also be set as the close tool's tooltip text.

Note: Applicable when the panel is closable: true

Defaults to:

'Close panel'

cls : String / String[]

bindable bind

<ExtCalendar_form-add cls="value" />

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

collapsed : Boolean

bindable bind

<ExtCalendar_form-add collapsed="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.collapsed = true;
let collapsed = element.collapsed;

true to start collapsed.

Defaults to:

null

collapsible : 'top' / 'right' / 'bottom' / 'left' / Boolean / Object

bindable bind

<ExtCalendar_form-add collapsible="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.collapsible = true;
let collapsible = element.collapsible;

A configuration for a Ext.panel.Collapser.

True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area.

You can also set top/right/bottom/left to directly specify the collapse direction.

IMPORTANT: To use this config, the application must require the following class:

 requires: [
     'Ext.panel.Collapser'
 ]

Defaults to:

null

Available since: 6.5.0

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

bindable bind

<ExtCalendar_form-add constrainAlign="value" />

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

contentEl : Ext.dom.Element / HTMLElement / String

bindable bind

<ExtCalendar_form-add contentEl="value" />

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

control : Object

bindable bind

<ExtCalendar_form-add control="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.control = { };
let control = element.control;

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

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

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

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

Defaults to:

null

controller : String / Object / Ext.app.ViewController

bindable bind

<ExtCalendar_form-add controller="value" />

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

data : Object

bindable bind

<ExtCalendar_form-add data="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.data = { };
let data = element.data;

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

Note: Data will be appended to any existing data.

Defaults to:

null

defaultEndTime : Number[]

<ExtCalendar_form-add defaultEndTime="10" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.defaultEndTime = 10;
let defaultEndTime = element.defaultEndTime;

The default start time for events. Should be in the format [hour, minute].

Defaults to:

[
    10,
    0
]

defaultFocus : String

bindable bind

<ExtCalendar_form-add defaultFocus="value" />

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

null

defaultListenerScope : Boolean

bindable bind

<ExtCalendar_form-add defaultListenerScope="true" />

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

defaults : Object

bindable bind

<ExtCalendar_form-add defaults="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
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 items with similar configurations. For example here we can specify that each child is a panel and avoid repeating the xtype declaration for each one:

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

Defaults to:

null

defaultStartTime : Number[]

<ExtCalendar_form-add defaultStartTime="10" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.defaultStartTime = 10;
let defaultStartTime = element.defaultStartTime;

The default start time for events. Should be in the format [hour, minute].

Defaults to:

[
    9,
    0
]

defaultToolWeights : Object

bindable bind

<ExtCalendar_form-add defaultToolWeights="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.defaultToolWeights = { };
let defaultToolWeights = element.defaultToolWeights;

The default weight for tools in the header.

Defaults to:

{
    toggle: 10,
    gear: 20,
    prev: 30,
    next: 40,
    left: 50,
    right: 60,
    down: 70,
    up: 80,
    refresh: 90,
    disclosure: 100,
    // was originally defined in ListItem
    plus: 100,
    minus: 110,
    search: 120,
    edit: 125,
    save: 130,
    print: 140,
    expand: 150,
    collapse: 160,
    help: 170,
    pin: 180,
    unpin: 190,
    minimize: 200,
    maximize: 210,
    restore: 220,
    close: 230,
    trash: 240
}

Available since: 6.5.0

defaultType : String

bindable bind

<ExtCalendar_form-add defaultType="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.defaultType = 'value';
let defaultType = element.defaultType;

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

Defaults to:

container

descriptionField : Object

bindable bind

<ExtCalendar_form-add descriptionField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.descriptionField = { };
let descriptionField = element.descriptionField;

The config for the description field.

Defaults to:

{
    xtype: 'textareafield',
    label: 'Description',
    name: 'description',
    flex: 1,
    minHeight: '6em'
}

dirty : Boolean

bindable bind

<ExtCalendar_form-add dirty="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.dirty = true;
let dirty = element.dirty;

This config property describes the modified state of this component. In most cases this config's value is maintained by the component and should be considered readonly. The class implementor should be the only one to call the setter.

For containers, this config will be updated on a short delay in some cases.

Defaults to:

false

Available since: 7.0

disabled : Boolean

bindable bind

<ExtCalendar_form-add disabled="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.disabled = true;
let disabled = element.disabled;

Whether or not this component is disabled

Defaults to:

null

displayed : Boolean

bindable bind

<ExtCalendar_form-add displayed="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.displayed = true;
let displayed = element.displayed;

Set to true to call show and false to call hide. Unlike the hidden config, changing this config will potentially involve animations to show or hide the component.

Defaults to:

null

Available since: 6.5.0

docked : String

bindable bind

<ExtCalendar_form-add docked="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
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 : Boolean / Object / Ext.drag.Source

bindable bind

<ExtCalendar_form-add draggable="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.draggable = true;
let draggable = element.draggable;

Set to true to allow this component to be dragged. This can also be the config object for the Ext.drag.Source that will manage the drag.

Defaults to:

null

dropButton : Object

bindable bind

<ExtCalendar_form-add dropButton="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.dropButton = { };
let dropButton = element.dropButton;

The config for the drop button. null to not show this button.

Defaults to:

{
    text: 'Delete',
    handler: 'onDropTap'
}

enableSubmissionForm : Boolean

bindable bind

<ExtCalendar_form-add enableSubmissionForm="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.enableSubmissionForm = true;
let enableSubmissionForm = element.enableSubmissionForm;

The submission form is generated but never added to the dom. It is a submittable version of your form panel, allowing for fields that are not simple textfields to be properly submitted to servers. It will also send values that are easier to parse with server side code.

If this is false we will attempt to subject the raw form inside the form panel.

Defaults to:

true

enctype : String

bindable bind

<ExtCalendar_form-add enctype="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.enctype = 'value';
let enctype = element.enctype;

The enctype attribute for the form, specifies how the form should be encoded when submitting.

Defaults to:

null

endDateField : Object

bindable bind

<ExtCalendar_form-add endDateField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.endDateField = { };
let endDateField = element.endDateField;

The config for the end date field.

Defaults to:

{
    xtype: 'datepickerfield',
    label: 'To',
    itemId: 'endDate',
    name: 'endDate'
}

endTimeField : Object

bindable bind

<ExtCalendar_form-add endTimeField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.endTimeField = { };
let endTimeField = element.endTimeField;

The config for the end time field.

Defaults to:

{
    xtype: 'calendar-timefield',
    label: ' ',
    itemId: 'endTime',
    name: 'endTime'
}

event : Ext.calendar.model.EventBase

bindable bind

<ExtCalendar_form-add event="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.event = 'value';
let event = element.event;

The data for this form.

Defaults to:

null

fieldDefaults : Object

<ExtCalendar_form-add fieldDefaults="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.fieldDefaults = { };
let fieldDefaults = element.fieldDefaults;

The properties in this object are used as default config values for field instance.

fieldSeparators : Boolean

bindable bind

<ExtCalendar_form-add fieldSeparators="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.fieldSeparators = true;
let fieldSeparators = element.fieldSeparators;

Set to true to show separators between the fields in this form. Typically used together with inputBorders to create iOS-like forms

Defaults to true in the iOS theme

Defaults to:

false

flex : Number / String / Object

bindable bind

<ExtCalendar_form-add flex="value" />

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

<ExtCalendar_form-add floated="true" />

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

focusableContainer : Boolean

<ExtCalendar_form-add focusableContainer="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.focusableContainer = true;
let focusableContainer = element.focusableContainer;

Enable or disable navigation with arrow keys for this FocusableContainer. This option may be useful with nested FocusableContainers, when only the root container should handle keyboard events.

Defaults to:

false

focusCls : String

<ExtCalendar_form-add focusCls="value" />

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

fullscreen : Boolean

<ExtCalendar_form-add fullscreen="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.fullscreen = true;
let fullscreen = element.fullscreen;

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

header : Boolean / Object

bindable bind

<ExtCalendar_form-add header="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.header = true;
let header = element.header;

Pass as false to prevent a header from being created.

You may also assign a header with a config object (optionally containing an xtype) to custom-configure your panel's header.

See <ExtPanelheader/> for all the options that may be specified here.

Defaults to:

null

headerPosition : 'top' / 'right' / 'bottom' / 'left'

bindable bind

<ExtCalendar_form-add headerPosition="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.headerPosition = 'value';
let headerPosition = element.headerPosition;

The position of the header. Ignored if no cfg-header is created.

Defaults to:

'top'

Available since: 6.5.0

height : Number / String

bindable bind

<ExtCalendar_form-add height="value" />

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

<ExtCalendar_form-add hidden="true" />

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

bindable bind

<ExtCalendar_form-add hideAnimation="value" />

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

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

bindable bind

<ExtCalendar_form-add hideMode="value" />

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

hideOnMaskTap : Boolean

bindable bind

<ExtCalendar_form-add hideOnMaskTap="true" />

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

bindable bind

<ExtCalendar_form-add html="value" />

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

icon : String

bindable bind

<ExtCalendar_form-add icon="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.icon = 'value';
let icon = element.icon;

Path to an image to use as an icon.

For instructions on how you can use icon fonts including those distributed in the SDK see iconCls.

Defaults to:

null

iconAlign : 'top' / 'right' / 'bottom' / 'left'

bindable bind

<ExtCalendar_form-add iconAlign="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.iconAlign = 'value';
let iconAlign = element.iconAlign;

The side of the title to render the icon.

Defaults to:

'left'

iconCls : String

bindable bind

<ExtCalendar_form-add iconCls="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.iconCls = 'value';
let iconCls = element.iconCls;

One or more space separated CSS classes to be applied to the icon element. The CSS rule(s) applied should specify a background image to be used as the icon.

An example of specifying a custom icon class would be something like:

// specify the property in the config for the class:
iconCls: 'my-home-icon'

// css rule specifying the background image to be used as the icon image:
.my-home-icon {
    background-image: url(../images/my-home-icon.gif) !important;
}

In addition to specifying your own classes, you can use the font icons provided in the SDK using the following syntax:

// using Font Awesome
iconCls: 'x-fa fa-home'

// using Pictos
iconCls: 'pictos pictos-home'

Depending on the theme you're using, you may need include the font icon packages in your application in order to use the icons included in the SDK. For more information see:

• Font Awesome icons
• Pictos icons
• Theming Guide

Defaults to:

null

id : String

<ExtCalendar_form-add id="value" />

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

inactiveChildTabIndex : Number

<ExtCalendar_form-add inactiveChildTabIndex="10" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.inactiveChildTabIndex = 10;
let inactiveChildTabIndex = element.inactiveChildTabIndex;

DOM tabIndex attribute to set on inactive Focusable children of this container when using the "Roaming tabindex" technique. This value rarely needs to be changed from its default.

Defaults to:

-1

innerCls : String

bindable bind

<ExtCalendar_form-add innerCls="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.innerCls = 'value';
let innerCls = element.innerCls;

A string to add to the immediate parent element of the inner items of this container. That is, items that are not docked, positioned or floated. In some containers, positioned items may be in this same element.

Defaults to:

null

Available since: 6.5.0

inputBorders : Boolean

bindable bind

<ExtCalendar_form-add inputBorders="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.inputBorders = true;
let inputBorders = element.inputBorders;

false to suppress borders on the input elements of fields in this form. Typically used together with fieldSeparators to create iOS-like forms.

Defaults to false in the iOS theme

Defaults to:

true

itemId : String

bindable bind

<ExtCalendar_form-add itemId="value" />

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

items : Array / Object

bindable bind

<ExtCalendar_form-add items="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.items = { };
let items = element.items;

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

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

This may also be specified as an object, the property names of which are itemIds, and the property values are child Component config objects, for example:

Ext.create({
    xtype: 'tabpanel',
    items: {
        panel1: {
            xtype: 'panel',
            title: 'First panel'
        },
        panel2: {
            xtype: 'panel',
            title: 'Second panel'
        }
    }
});

Defaults to:

null

jsonSubmit : Boolean

<ExtCalendar_form-add jsonSubmit="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.jsonSubmit = true;
let jsonSubmit = element.jsonSubmit;

If set to true, the field values are sent as JSON in the request body. All of the field values, plus any additional params configured via baseParams and/or the options to submit, will be included in the values POSTed in the body of the request.

keyMap : Object

bindable bind

<ExtCalendar_form-add keyMap="{ }" />

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

<ExtCalendar_form-add keyMapEnabled="true" />

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

layout : Object / String

bindable bind

<ExtCalendar_form-add layout="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.layout = 'value';
let layout = element.layout;

Configuration for this Container's layout. Example:

Ext.create({
    xtype: 'container',
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    items: [{
        xtype: 'panel',
        flex: 1,
        bodyStyle: {
            background: "#000",
            color:"#fff"
        }
    }, {
       xtype: 'panel',
       flex: 2,
       bodyStyle: {
           background: "#f00",
           color:"#fff"
       }
    }]
});

Defaults to:

'auto'

lbar : Object / Object[]

bindable bind

<ExtCalendar_form-add lbar="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.lbar = { };
let lbar = element.lbar;

Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).

is equivalent to

Defaults to:

null

Available since: 6.5.0

left : Number / String

bindable bind

<ExtCalendar_form-add left="value" />

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

bindable bind

<ExtCalendar_form-add listeners="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
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 DataViews 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('ExtCalendar_form-add');
element.setListeners(listeners);

manageBorders : Boolean

<ExtCalendar_form-add manageBorders="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.manageBorders = true;
let manageBorders = element.manageBorders;

true to enable border management of docked items. When enabled, borders of docked items will collapse where they meet to avoid duplicated borders.

Defaults to:

true

margin : Number / String

bindable bind

<ExtCalendar_form-add margin="value" />

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

masked : Boolean / String / Object / <ExtMask/> / <ExtLoadmask/>

bindable bind

<ExtCalendar_form-add masked="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.masked = true;
let masked = element.masked;

A configuration to allow you to mask this container.

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

For more precise control over the mask, you can optionally pass an object block with and xtype of loadmask, and an optional message value to display a loading mask. Please refer to the <ExtLoadmask/> component to see other configurations.

Ext.create({
    xtype: 'container',
    fullscreen: true,
    html: 'Hello World',
    masked: {
        xtype: 'loadmask',
        message: 'My Message'
    }
});

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

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

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

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

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

Defaults to:

null

maxHeight : Number / String

bindable bind

<ExtCalendar_form-add maxHeight="value" />

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

maxWidth : Number / String

bindable bind

<ExtCalendar_form-add maxWidth="value" />

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

method : String

bindable bind

<ExtCalendar_form-add method="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.method = 'value';
let method = element.method;

The method which this form will be submitted. post or get.

Defaults to:

'post'

minButtonWidth : Number

bindable bind

<ExtCalendar_form-add minButtonWidth="10" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.minButtonWidth = 10;
let minButtonWidth = element.minButtonWidth;

Minimum width of all buttonToolbar buttons in pixels. If set, this will be used as the default value for the Ext.Button#minWidth config of each <ExtButton/> added to the `buttonToolbar via the buttons toolbar.

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:

75

Available since: 6.5.0

minHeight : Number / String

bindable bind

<ExtCalendar_form-add minHeight="value" />

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

bindable bind

<ExtCalendar_form-add minWidth="value" />

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

bindable bind

<ExtCalendar_form-add modal="true" />

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

modelValidation : Boolean

<ExtCalendar_form-add modelValidation="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.modelValidation = true;
let modelValidation = element.modelValidation;

This config enables binding to your Ext.data.Model#validators. This is only processed by form fields (e.g., Ext.field.*) at present, however, this setting is inherited and so can be set on a parent container.

When set to true by a component (or by an ancestor container), the validators of for any {@Ext.data.Model record} fields will be used wherever the value is bound to such data fields.

While this config can be set arbitrarily high in the component hierarchy, doing so can create a lot overhead if most of your form fields do not actually rely on validators in your data model.

Using this setting for a form that is bound to an Ext.data.Model might look like this:

 {
     xtype: 'panel',
     modelValidation: true,
     items: [{
         xtype: 'textfield',
         bind: '{theUser.firstName}'
     },{
         xtype: 'textfield',
         bind: '{theUser.lastName}'
     },{
         xtype: 'textfield',
         bind: '{theUser.phoneNumber}'
     },{
         xtype: 'textfield',
         bind: '{theUser.email}'
     }]
 }

Defaults to:

null

Available since: 6.5.0

multipartDetection : Boolean

bindable bind

<ExtCalendar_form-add multipartDetection="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.multipartDetection = true;
let multipartDetection = element.multipartDetection;

If this is enabled the form will automatically detect the need to use 'multipart/form-data' during submission.

Defaults to:

true

name : String

<ExtCalendar_form-add name="value" />

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

<ExtCalendar_form-add nameable="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.nameable = true;
let nameable = element.nameable;

Set to true for this component's name property to be tracked by its containing nameHolder. Forms can be assigned names to be used in parent forms.

Defaults to:

true

nameHolder : Boolean

<ExtCalendar_form-add nameHolder="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.nameHolder = true;
let nameHolder = element.nameHolder;

When true child components are tracked by their name property and can be retrieved using the lookupName method.

Defaults to:

true

padding : Number / String

bindable bind

<ExtCalendar_form-add padding="value" />

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

paramOrder : String / String[]

bindable bind

<ExtCalendar_form-add paramOrder="value" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.paramOrder = 'value';
let paramOrder = element.paramOrder;

A list of params to be executed server side. Only used for the api config.

Specify the params in the order in which they must be executed on the server-side as either (1) a String[], or (2) a String of params delimited by either whitespace, comma, or pipe.

For example, any of the following would be acceptable:

paramOrder: ['param1','param2','param3']
paramOrder: 'param1 param2 param3'
paramOrder: 'param1,param2,param3'
paramOrder: 'param1|param2|param'

Defaults to:

null

paramsAsHash : Boolean

bindable bind

<ExtCalendar_form-add paramsAsHash="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.paramsAsHash = true;
let paramsAsHash = element.paramsAsHash;

If true, parameters will be sent as a single hash collection of named arguments. Providing a paramOrder nullifies this configuration.

Only used for the api config.

Defaults to:

null

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

bindable bind

<ExtCalendar_form-add plugins="{ }" />

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

<ExtCalendar_form-add publishes="value" />

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

rbar : Object / Object[]

bindable bind

<ExtCalendar_form-add rbar="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.rbar = { };
let rbar = element.rbar;

Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).

is equivalent to

Defaults to:

null

Available since: 6.5.0

record : Ext.data.Model

bindable bind

<ExtCalendar_form-add record="value" />

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

reference : String

<ExtCalendar_form-add reference="value" />

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

referenceHolder : Boolean

<ExtCalendar_form-add referenceHolder="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.referenceHolder = true;
let referenceHolder = element.referenceHolder;

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

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

Defaults to:

false

relative : Boolean

bindable bind

<ExtCalendar_form-add relative="true" />

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

<ExtCalendar_form-add renderTo="value" />

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

resetFocusPosition : Boolean

<ExtCalendar_form-add resetFocusPosition="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.resetFocusPosition = true;
let resetFocusPosition = element.resetFocusPosition;

When true, FocusableContainer will reset last focused position whenever focus leaves the container. Subsequent tabbing into the container will always focus the first eligible child item.

When false, subsequent tabbing into the container will focus the child item that was last focused before.

Defaults to:

false

resizable : Object

bindable bind

<ExtCalendar_form-add resizable="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.resizable = { };
let resizable = element.resizable;

A configuration for a Ext.panel.Resizer.

IMPORTANT: To use this config, the application must require the following class:

 requires: [
     'Ext.panel.Resizer'
 ]

Defaults to:

null

Available since: 6.5.0

right : Number / String

bindable bind

<ExtCalendar_form-add right="value" />

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

ripple : Boolean / Object / String

bindable bind

<ExtCalendar_form-add ripple="true" />

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

saveButton : Object

bindable bind

<ExtCalendar_form-add saveButton="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.saveButton = { };
let saveButton = element.saveButton;

The config for the save button.

Defaults to:

{
    text: 'Save',
    handler: 'onSaveTap'
}

scrollable : Boolean / String / Object

bindable bind

<ExtCalendar_form-add scrollable="true" />

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

session : Boolean / Object / Ext.data.Session

bindable bind

<ExtCalendar_form-add session="true" />

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

<ExtCalendar_form-add shadow="true" />

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

<ExtCalendar_form-add shareableName="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
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. Forms can be assigned the same name as other forms in their parent form. This means that if a form is assigned a name it will be returned as an array from lookupName in its parent form.

Defaults to:

true

shim : Boolean

bindable bind

<ExtCalendar_form-add shim="true" />

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

showAnimation : String / Mixed

bindable bind

<ExtCalendar_form-add showAnimation="value" />

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

standardButtons : Object

bindable bind

<ExtCalendar_form-add standardButtons="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.standardButtons = { };
let standardButtons = element.standardButtons;

This object contains config objects for the standard buttons (such as OK and Cancel). This object is keyed by the itemId for the button and contains the text and a default weight for weighted containers to use. These default weights vary by OS to provide the user with a button order that is consistent for their platform. In particular, Windows and Linux (or rather all platforms other then Mac OS and iOS) present the OK button followed by Cancel while Mac OS and iOS present them in reverse order of 'Cancelfollowed byOK`.

The standard buttons, in weight order, are as follows:

• ok
• abort
• retry
• ignore
• yes
• no
• cancel
• apply
• save
• submit
• help
• close

On Mac OS and iOS this order is reversed with the exception of help which is the first button. The buttons are assigned weights from 10 to 200.

Defaults to:

{
    ok: {
        text: 'OK',
        weight: isMacOrAndroid ? 120 : 10
    },
    abort: {
        text: 'Abort',
        weight: isMacOrAndroid ? 110 : 20
    },
    retry: {
        text: 'Retry',
        weight: isMacOrAndroid ? 100 : 30
    },
    ignore: {
        text: 'Ignore',
        weight: isMacOrAndroid ? 90 : 40
    },
    yes: {
        text: 'Yes',
        weight: isMacOrAndroid ? 80 : 50
    },
    no: {
        text: 'No',
        weight: isMacOrAndroid ? 70 : 60
    },
    cancel: {
        text: 'Cancel',
        weight: isMacOrAndroid ? 60 : 70
    },
    apply: {
        text: 'Apply',
        weight: isMacOrAndroid ? 50 : 80
    },
    save: {
        text: 'Save',
        weight: isMacOrAndroid ? 40 : 90
    },
    submit: {
        text: 'Submit',
        weight: isMacOrAndroid ? 30 : 100
    },
    help: {
        text: 'Help',
        weight: isMacOrAndroid ? 10 : 110
    },
    close: {
        text: 'Close',
        weight: isMacOrAndroid ? 20 : 120
    }
}

Available since: 6.5.0

standardSubmit : Boolean

bindable bind

<ExtCalendar_form-add standardSubmit="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.standardSubmit = true;
let standardSubmit = element.standardSubmit;

Whether or not we want to perform a standard form submit.

Defaults to:

false

startDateField : Object

bindable bind

<ExtCalendar_form-add startDateField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.startDateField = { };
let startDateField = element.startDateField;

The config for the start date field.

Defaults to:

{
    xtype: 'datepickerfield',
    label: 'From',
    itemId: 'startDate',
    name: 'startDate'
}

startTimeField : Object

bindable bind

<ExtCalendar_form-add startTimeField="{ }" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.startTimeField = { };
let startTimeField = element.startTimeField;

The config for the start time field.

Defaults to:

{
    xtype: 'calendar-timefield',
    label: ' ',
    itemId: 'startTime',
    name: 'startTime'
}

stateful : Boolean / Object / String[]

bindable bind

<ExtCalendar_form-add stateful="true" />

let element = document.body.querySelector('ExtCalendar_form-add');
element.stateful = true;
let stateful = element.stateful;

This config specifies the config properties that will be persisted using the Ext.state.Provider. If this config is set to true, the configs specified by statefulDefaults will be assumed.

 stateful: true

Otherwise, this config can be an array of strings of the properties to save:

 stateful: [
     'width',
     'height',
     'collapsed'
 ]

The above is equivalent to:

 stateful: {
     width: true,
     height: true,
     collapsed: true
 }

Note: To be truly stateful, an id or stateId must also be assigned.

A stateful object will save its state when any of these config properties change value.

Defaults to:

false