<ExtTreegroupedgrid/> xtype: treegroupedgrid

columns : Ext.grid.column.Column[]

bindable bind required req

<ExtTreegroupedgrid columns="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.columns = 'value';
let columns = element.columns;

An array of column definition objects which define all columns that appear in this grid. Each column definition provides the header text for the column, and a definition of where the data for that column comes from.

This can also be a configuration object for a {Ext.grid.header.Container HeaderContainer} which may override certain default configurations if necessary. For example, the special layout may be overridden to use a simpler layout, or one can set default values shared by all columns:

 columns: {
     items: [
         {
             text: "Column A"
             dataIndex: "field_A",
             width: 200
         },{
             text: "Column B",
             dataIndex: "field_B",
             width: 150
         },
         ...
     ]
 }

Defaults to:

null

let element = document.body.querySelector('ExtTreegroupedgrid');
let getColumns = element.getColumns(selector);

store : Ext.data.Store / Object

bindable bind required req

<ExtTreegroupedgrid store="{ }" />

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

undefined

activeChildTabIndex : Number

<ExtTreegroupedgrid activeChildTabIndex="10" />

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

<ExtTreegroupedgrid activeItem="value" />

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

<ExtTreegroupedgrid alignSelf="value" />

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

Specifies the self alignment of this widget in a box layout

Defaults to:

null

allowFocusingDisabledChildren : Boolean

<ExtTreegroupedgrid allowFocusingDisabledChildren="true" />

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

<ExtTreegroupedgrid alwaysOnTop="true" />

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

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

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

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

Defaults to:

false

Available since: 6.2.0

ariaAttributes : Object

bindable bind

<ExtTreegroupedgrid ariaAttributes="{ }" />

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

<ExtTreegroupedgrid ariaDescribedBy="value" />

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

<ExtTreegroupedgrid ariaLabel="value" />

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

<ExtTreegroupedgrid ariaLabelledBy="value" />

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

associatedData : Boolean / Object

bindable bind

<ExtTreegroupedgrid associatedData="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.associatedData = true;
let associatedData = element.associatedData;

Set this config to false to limit rendering data to just the record's data or to an object to describe the desired associated data. This data is used to satisfy the itemTpl. The default of true will gather all associated data that is currently loaded. This can be expensive. If only a small amount of the available data is needed, this config can speed up the rendering process.

For example, if an OrderItem needs the Item data but not its parent Order, this config can be set like so:

 associatedData: {
     item: true
 }

Given the above, only the item association (to the Item record) will be gathered into the render data.

For more details, see getData.

Defaults to:

true

Available since: 6.5.0

autoDestroy : Boolean

bindable bind

<ExtTreegroupedgrid autoDestroy="true" />

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

<ExtTreegroupedgrid autoSize="true" />

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

null

axisLock : Boolean

bindable bind

<ExtTreegroupedgrid axisLock="true" />

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

bind : Object / String

bindable bind

<ExtTreegroupedgrid bind="value" />

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

bodyCls : String / String[]

bindable bind

<ExtTreegroupedgrid bodyCls="value" />

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

border : Boolean

bindable bind

<ExtTreegroupedgrid border="true" />

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

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

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

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

Using style:

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

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

Using CSS:

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

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

And your CSS file:

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

Defaults to:

null

bottom : Number / String

bindable bind

<ExtTreegroupedgrid bottom="value" />

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

bufferSize : Number

bindable bind

<ExtTreegroupedgrid bufferSize="10" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.bufferSize = 10;
let bufferSize = element.bufferSize;

The number of items an infinite list will render beyond those immediately visible.

To prevent the rendering of items while scrolling, these extra items are rendered out of view. When the scroller approaches within minimumBufferSize of the end of the rendered range, the extra items trailing the scroll will be repositioned (and reconfigured) ahead of the scroll.

Defaults to:

20

centered : Boolean

bindable bind

<ExtTreegroupedgrid centered="true" />

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

cls : String / String[]

bindable bind

<ExtTreegroupedgrid cls="value" />

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

collapseDefaults : Ext.dataview.ListCollapser / Object

bindable bind

<ExtTreegroupedgrid collapseDefaults="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.collapseDefaults = { };
let collapseDefaults = element.collapseDefaults;

This config object supplies default for the collapsible config. When that config is simply true, this is the complete config object for the group collapser.

NOTE: This config cannot be changed after instantiation. Instead, change the collapsible config.

Defaults to:

{
    xclass: 'Ext.dataview.ListCollapser'
}

Available since: 7.0

collapsible : Ext.dataview.ListCollapser / Object / Boolean

bindable bind

<ExtTreegroupedgrid collapsible="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.collapsible = true;
let collapsible = element.collapsible;

This object configures group collapse. It is only applicable when grouped. Set to false to disable group collapsibility. The default value of true uses the collapseDefaults config for the final collapser configuration object. If this config is an object, it is merged with collapseDefaults giving this object's properties priority over the defaults.

Defaults to:

true

Available since: 7.0

columnLines : Boolean

bindable bind

<ExtTreegroupedgrid columnLines="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.columnLines = true;
let columnLines = element.columnLines;

Configure as true to display lines between grid cells.

Defaults to:

false

columnMenu : Object

bindable bind

<ExtTreegroupedgrid columnMenu="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.columnMenu = { };
let columnMenu = element.columnMenu;

This is a config object which is used by columns in this grid to create their header menus.

The default column menu contains the following items.

• A "Sort Ascending" menu item
• A "Sort Descending" menu item
• A Columns menu item with each of the columns in a sub-menu of check items that is used to hide or show each column.
• A "Group by this field" menu item to enable grouping.
• A "Show in groups" check menu item to enable/disable grouping.

These items have weight of -100, -90 and -80 respectively to place them at the start of the menu.

This can be configured as null to prevent columns from showing a column menu.

Defaults to:

{
    xtype: 'menu',
    weighted: true,
    align: 'tl-bl?',
    hideOnParentHide: false,
    // Persists when owning Column is hidden
    items: {
        sortAsc: {
            xtype: 'gridsortascmenuitem',
            group: 'sortDir',
            weight: -100
        },
        // Wants to be the first
        sortDesc: {
            xtype: 'gridsortdescmenuitem',
            group: 'sortDir',
            weight: -90
        },
        // Wants to be the second
        //---------------------------------
        // Columns menu is inserted here
        //---------------------------------
        groupByThis: {
            xtype: 'gridgroupbythismenuitem',
            handler: 'column.onGroupByThis',
            separator: true,
            weight: -50
        },
        showInGroups: {
            xtype: 'gridshowingroupsmenuitem',
            handler: 'column.onToggleShowInGroups',
            weight: -40
        }
    }
}

columnResize : Boolean

bindable bind

<ExtTreegroupedgrid columnResize="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.columnResize = true;
let columnResize = element.columnResize;

Set to false to disable column resizing within this grid.

Defaults to:

true

columnsMenuItem : <ExtGridcolumnsmenu/>

bindable bind

<ExtTreegroupedgrid columnsMenuItem="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.columnsMenuItem = 'value';
let columnsMenuItem = element.columnsMenuItem;

The config object for the grid's column hide/show menu

Defaults to:

{
    xtype: 'gridcolumnsmenu',
    weight: -80,
    separator: true
}

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

bindable bind

<ExtTreegroupedgrid constrainAlign="value" />

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

<ExtTreegroupedgrid contentEl="value" />

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

<ExtTreegroupedgrid control="{ }" />

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

<ExtTreegroupedgrid controller="value" />

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

data : Object

bindable bind

<ExtTreegroupedgrid data="{ }" />

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

defaultFocus : String

bindable bind

<ExtTreegroupedgrid defaultFocus="value" />

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

<ExtTreegroupedgrid defaultListenerScope="true" />

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

<ExtTreegroupedgrid defaults="{ }" />

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

defaultType : Ext.enums.Widget

bindable bind

<ExtTreegroupedgrid defaultType="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.defaultType = 'value';
let defaultType = element.defaultType;

As a <ExtContainer/>, this config controls the default type of items that are added.

Non-data items can also be added to this container, and these will pick up this default. This config will only apply to data items if itemConfig does not contain an xtype property (which it does by default). This means that data items will not be affected by this config unless an itemConfig is set that nulls out the xtype (not recommended).

deferEmptyText : Boolean

bindable bind

<ExtTreegroupedgrid deferEmptyText="true" />

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

Set to false to not defer emptyText being applied until the store's first load.

Defaults to:

true

deselectOnContainerClick : Boolean

bindable bind

<ExtTreegroupedgrid deselectOnContainerClick="true" />

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

bindable bind

<ExtTreegroupedgrid disabled="true" />

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

Whether or not this component is disabled

Defaults to:

null

disableSelection : Boolean

bindable bind

<ExtTreegroupedgrid disableSelection="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.disableSelection = true;
let disableSelection = element.disableSelection;

Set to true to disable selection styling. This only affects the presentation of the selection not the internal selection state.

Defaults to:

false

disclosureProperty : String

bindable bind

<ExtTreegroupedgrid disclosureProperty="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.disclosureProperty = 'value';
let disclosureProperty = element.disclosureProperty;

A property to check on each record to display the disclosure on a per record basis. This property must be false to prevent the disclosure from being displayed on the item.

Defaults to:

'disclosure'

displayed : Boolean

bindable bind

<ExtTreegroupedgrid displayed="true" />

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

<ExtTreegroupedgrid docked="value" />

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

<ExtTreegroupedgrid draggable="true" />

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

emptyItemText : String

bindable bind

<ExtTreegroupedgrid emptyItemText="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.emptyItemText = 'value';
let emptyItemText = element.emptyItemText;

The text to render when the rendering of the item via itemTpl produces no text.

Defaults to:

'\xa0'

emptyText : String / Boolean

bindable bind

<ExtTreegroupedgrid emptyText="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.emptyText = true;
let emptyText = element.emptyText;

The text to display in the view when there is no data to display. Set this to true to display the default message.

Defaults to:

null

emptyTextDefaults : Object / <ExtComponent/>

bindable bind

<ExtTreegroupedgrid emptyTextDefaults="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.emptyTextDefaults = { };
let emptyTextDefaults = element.emptyTextDefaults;

This component config object is used to create the emptyText component.

Defaults to:

{
    xtype: 'emptytext'
}

Available since: 6.5.0

emptyTextProperty : String

<ExtTreegroupedgrid emptyTextProperty="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.emptyTextProperty = 'value';
let emptyTextProperty = element.emptyTextProperty;

The config to set on the emptyText component to contain the desired text.

Defaults to:

'html'

Available since: 6.5.0

enableColumnMove : Boolean

bindable bind

<ExtTreegroupedgrid enableColumnMove="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.enableColumnMove = true;
let enableColumnMove = element.enableColumnMove;

Set to false to disable column reorder.

Note: if gridviewoptions plugin is enabled on grids gets precedence over enableColumnMove for touch supported device.

Defaults to:

true

flex : Number / String / Object

bindable bind

<ExtTreegroupedgrid flex="value" />

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

<ExtTreegroupedgrid floated="true" />

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

<ExtTreegroupedgrid focusableContainer="true" />

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

<ExtTreegroupedgrid focusCls="value" />

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

<ExtTreegroupedgrid fullscreen="true" />

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

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

grouped : Boolean

bindable bind

<ExtTreegroupedgrid grouped="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.grouped = true;
let grouped = element.grouped;

Set to false turn off all grouping. This setting is only meaningful if the underlying store has a grouper.

Defaults to:

true

groupFooter : Object / <ExtItemheader/>

bindable bind

<ExtTreegroupedgrid groupFooter="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.groupFooter = { };
let groupFooter = element.groupFooter;

The counterpart to groupHeader, this config controls the footer that is displayed below each group in a grouped list.

Footers are typically hidden when a group is collapsed but this can be changed using the footer option:

 {
     xtype: 'list',
     collapsible: {
         footer: true  // show footers when collapsed
     }
 }

Defaults to:

null

Available since: 6.5.0

groupHeader : Object / <ExtItemheader/>

bindable bind

<ExtTreegroupedgrid groupHeader="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.groupHeader = { };
let groupHeader = element.groupHeader;

This config is used to configure a header to display above each group in a grouped list. One of the more common uses of this config is to set the tpl.

 groupHeader: {
     tpl: 'Group: {name}'
 }

Defaults to:

{
    xtype: 'rowheader'
}

height : Number / String

bindable bind

<ExtTreegroupedgrid height="value" />

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

<ExtTreegroupedgrid hidden="true" />

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

<ExtTreegroupedgrid hideAnimation="value" />

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

hideHeaders : Boolean

bindable bind

<ExtTreegroupedgrid hideHeaders="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.hideHeaders = true;
let hideHeaders = element.hideHeaders;

true to hide the grid column headers.

Defaults to:

false

Available since: 6.0.1

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

bindable bind

<ExtTreegroupedgrid hideMode="value" />

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

<ExtTreegroupedgrid hideOnMaskTap="true" />

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

<ExtTreegroupedgrid html="value" />

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

<ExtTreegroupedgrid id="value" />

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

inactiveChildTabIndex : Number

<ExtTreegroupedgrid inactiveChildTabIndex="10" />

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

indexBar : Boolean / Object / <ExtIndexbar/>

bindable bind

<ExtTreegroupedgrid indexBar="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.indexBar = true;
let indexBar = element.indexBar;

Set to true to render an alphabet IndexBar docked on the right. This can also be a config object for the <ExtIndexbar/> component.

Defaults to:

null

infinite : Boolean

bindable bind

<ExtTreegroupedgrid infinite="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.infinite = true;
let infinite = element.infinite;

Set to true to if this list should anticipate too many rows to render to the DOM at one time. When set to true, only a fixed number of rows is rendered at once, depending on the height or maxHeight of the list.

When using this mode in an auto-height situation (where the list should be the height of its items), a maxHeight setting is required. This is due to the fact that the rendered items are absolutely positioned. As such they do not directly contribute to the list's height.

When maxHeight is set, however, an infinite list uses that setting to decide how many items to render and will set an appropriate height on its innermost element, thereby allowing the list to achieve the proper height.

Note that this configuration can not be dynamically changed after the list has instantiated.

Defaults to:

true

inline : Boolean / Object

bindable bind

<ExtTreegroupedgrid inline="true" />

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

innerCls : String

bindable bind

<ExtTreegroupedgrid innerCls="value" />

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

itemButtonMode : Boolean

bindable bind

<ExtTreegroupedgrid itemButtonMode="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.itemButtonMode = true;
let itemButtonMode = element.itemButtonMode;

True to cause items to act like buttons for interaction styling. in ButtonMode items will maintain pressed state whenever pressed down. they will not remove this state for tap distance cancellation or mouse out.

Defaults to:

false

itemCls : String

bindable bind

<ExtTreegroupedgrid itemCls="value" />

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

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

Defaults to:

null

itemConfig : Object / <ExtGridrow/>

bindable bind

<ExtTreegroupedgrid itemConfig="{ }" />

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

The object is used to configure the <ExtGridrow/>.

See the body and expandedField configs on the class to easily add extra content to grid rows.

Be aware that if you specify a row body, you must configure the owning grid with variableHeights: true.

Defaults to:

{
    xtype: 'gridrow'
}

itemContentCls : String

bindable bind

<ExtTreegroupedgrid itemContentCls="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.itemContentCls = 'value';
let itemContentCls = element.itemContentCls;

A class to add to the element that immediate wraps the item content produced by the itemTpl (the "inner-html" element).

Defaults to:

null

Available since: 6.5.0

itemDataMap : Object

bindable bind

<ExtTreegroupedgrid itemDataMap="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.itemDataMap = { };
let itemDataMap = element.itemDataMap;

This object allows you to map Ext.data.Model fields to specific configs on component items.

The itemDataMap object's keys describe the target objects to receive data from the associated record. These keys are either '#' (for the item itself) or a reference to a component contained in the item.

For each target listed in itemDataMap, the value is another map describing the config name (in the key) and the data field name (as the value).

For example:

 itemDataMap: {
     '#': {
         title: 'fullName'
     },
     text: {
         html: 'name'
     }
 }

The above is equivalent to:

 item.setTitle(item.getRecord().get('fullName'));
 item.lookup('text').setHtml(item.getRecord().get('name'));

For more complex mapping of data to item, you should use the data binding as described in the class documentation.

Defaults to:

null

Available since: 6.5.0

itemId : String

bindable bind

<ExtTreegroupedgrid itemId="value" />

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

itemInnerCls : String

bindable bind

<ExtTreegroupedgrid itemInnerCls="value" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.itemInnerCls = 'value';
let itemInnerCls = element.itemInnerCls;

A class to add to the inner element of items.

Defaults to:

null

Available since: 6.5.0

itemRipple : Boolean / Object

bindable bind

<ExtTreegroupedgrid itemRipple="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.itemRipple = true;
let itemRipple = element.itemRipple;

Defaults to:

null

Available since: 6.5.0

Properties

color : String

The background color of the ripple. Default ripple Ext.Widget#ripple settings for each item in the data view

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

items : Array / Object

bindable bind

<ExtTreegroupedgrid items="{ }" />

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

itemTpl : String / String[] / Ext.XTemplate

bindable bind

<ExtTreegroupedgrid itemTpl="value" />

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

The tpl to use for each of the items displayed in this DataView. This template produces HTML and can use the follow CSS class names to influence the response to tapping/clicking child elements:

• x-no-ripple - Disables itemRipple (primarily for theme-material)
• x-item-no-select - Disables item selection
• x-item-no-tap - Disables all click or tap processing

For example:

 itemTpl: '<div>' +
              '...' +
              '<div class="x-item-no-select x-fa fa-gear"></div>' +
              '...' +
          '</div>'

Because this template produces HTML from record data it can expose applications to security issues if user-provided data is not properly encoded. For example, in previous releases this template was:

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

If the 'text' field contained HTML scripts, these would be evaluated into the application. The itemTpl in version 6.5 is now:

 itemTpl: '<div>{text:htmlEncode}</div>'

Defaults to:

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

keyMap : Object

bindable bind

<ExtTreegroupedgrid keyMap="{ }" />

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

<ExtTreegroupedgrid keyMapEnabled="true" />

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

<ExtTreegroupedgrid layout="value" />

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

left : Number / String

bindable bind

<ExtTreegroupedgrid left="value" />

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

<ExtTreegroupedgrid listeners="{ }" />

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

loadingHeight : Number

bindable bind

<ExtTreegroupedgrid loadingHeight="10" />

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

bindable bind

<ExtTreegroupedgrid loadingText="true" />

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

A string to display during data load operations. 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.

Note: For virtual stores, the load mask will be shown frequently as the user scrolls. To inhibit that, set loadingText to the empty string.

Defaults to:

'Loading...'

margin : Number / String

bindable bind

<ExtTreegroupedgrid margin="value" />

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

markDirty : Boolean

bindable bind

<ExtTreegroupedgrid markDirty="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.markDirty = true;
let markDirty = element.markDirty;

true to mark items as dirty when the underlying record has been modified.

By default there is no special styling for dirty items in data views and <ExtList/>. When this config is set to true each item's element will have a CSS class name of x-mark-dirty added to it. When the underlying record for an item has been modified the item will have the x-dirty CSS class.

<ExtGrid/> style "dirty" cells using a red triangle icon in the corner of the cell. See $gridcell-dirty-icon

Defaults to:

false

Available since: 6.5.1

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

bindable bind

<ExtTreegroupedgrid masked="true" />

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

<ExtTreegroupedgrid maxHeight="value" />

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

bindable bind

<ExtTreegroupedgrid maxItemCache="10" />

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

The number of components to cache when no longer needed (as opposed to calling destroy on them).

Defaults to:

20

maxWidth : Number / String

bindable bind

<ExtTreegroupedgrid maxWidth="value" />

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

minHeight : Number / String

bindable bind

<ExtTreegroupedgrid minHeight="value" />

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

minimumBufferDistance : Number

bindable bind

<ExtTreegroupedgrid minimumBufferDistance="10" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.minimumBufferDistance = 10;
let minimumBufferDistance = element.minimumBufferDistance;

The minimum number of items beyond the visible area of an infinite list to allow before repositioning items on the opposite side to balance the visible area inside the rendered range.

Defaults to:

5

minWidth : Number / String

bindable bind

<ExtTreegroupedgrid minWidth="value" />

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

<ExtTreegroupedgrid modal="true" />

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

<ExtTreegroupedgrid modelValidation="true" />

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

multiColumnSort : Boolean

bindable bind

<ExtTreegroupedgrid multiColumnSort="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.multiColumnSort = true;
let multiColumnSort = element.multiColumnSort;

Configure as true to have columns retain their sorted state after other columns have been clicked upon to sort.

As subsequent columns are clicked upon, they become the new primary sort key.

Clicking on an already sorted column which is not the primary sort key does not toggle its direction. Analogous to bringing a window to the top by clicking it, this makes that column's field the primary sort key. Subsequent clicks then toggle it.

Clicking on a primary key column toggles ASC -> DESC -> no sorter.

The column sorting menu items may be used to toggle the direction without affecting the sorter priority.

The maximum number of sorters allowed in a Store is configurable via its underlying data collection. See Ext.util.Collection#multiSortLimit

Defaults to:

false

name : String

<ExtTreegroupedgrid name="value" />

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

<ExtTreegroupedgrid nameable="true" />

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

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

Defaults to:

false

nameHolder : Boolean

<ExtTreegroupedgrid nameHolder="true" />

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

false

onItemDisclosure : Boolean / Function / String / Object

bindable bind

<ExtTreegroupedgrid onItemDisclosure="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.onItemDisclosure = true;
let onItemDisclosure = element.onItemDisclosure;

Set to true to display a disclosure icon on each list item. The list will then fire the disclose event, and the event can be stopped before childtap. By setting this config to a function, the function passed will be called when the disclosure is tapped. This can be either a function object or the name of a Ext.app.ViewController method.

Finally you can specify an object with a scope and handler property defined. This will also be bound to the tap event listener and is useful when you want to change the scope of the handler.

Defaults to:

null

padding : Number / String

bindable bind

<ExtTreegroupedgrid padding="value" />

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

pinFooters : Boolean

bindable bind

<ExtTreegroupedgrid pinFooters="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.pinFooters = true;
let pinFooters = element.pinFooters;

Whether or not to pin footers on bottom of item groups while scrolling.

Defaults to:

false

Available since: 6.5.0

pinHeaders : Boolean

bindable bind

<ExtTreegroupedgrid pinHeaders="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.pinHeaders = true;
let pinHeaders = element.pinHeaders;

Whether or not to pin headers on top of item groups while scrolling. Only applicable for infinite lists.

Defaults to:

true

pinnedFooter : Object

bindable bind

<ExtTreegroupedgrid pinnedFooter="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.pinnedFooter = { };
let pinnedFooter = element.pinnedFooter;

A config object for the pinned footer. Only applicable when pinFooters and grouped are true.

Defaults to:

null

Available since: 6.5.0

pinnedHeader : Object

bindable bind

<ExtTreegroupedgrid pinnedHeader="{ }" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.pinnedHeader = { };
let pinnedHeader = element.pinnedHeader;

A config object for the pinned header. Only applicable when pinHeaders and grouped are true.

Defaults to:

{
    xtype: 'rowheader'
}

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

bindable bind

<ExtTreegroupedgrid plugins="{ }" />

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

pressedDelay : Number

bindable bind

<ExtTreegroupedgrid pressedDelay="10" />

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

The amount of delay between the tapstart and adding the pressedCls.

Defaults to:

100

preventSelectionOnDisclose : Boolean

bindable bind

<ExtTreegroupedgrid preventSelectionOnDisclose="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.preventSelectionOnDisclose = true;
let preventSelectionOnDisclose = element.preventSelectionOnDisclose;

When true item selection is prevented when the user taps a disclose icon.

Defaults to:

true

preventSelectionOnTool : Boolean

bindable bind

<ExtTreegroupedgrid preventSelectionOnTool="true" />

let element = document.body.querySelector('ExtTreegroupedgrid');
element.preventSelectionOnTool = true;
let preventSelectionOnTool = element.preventSelectionOnTool;

When true item selection is prevented when the user taps on a tool. This can be overridden on specific tools by placing the preventSelection property on the tool:

 tools: [{
     type: 'gear',
     preventSelection: false
 }]

Defaults to:

true

Available since: 6.5.0

publishes : String / String[] / Object

bindable bind

<ExtTreegroupedgrid publishes="value" />

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

{
    selection: 1
}

record : Ext.data.Model

bindable bind