Ext.util.SorterCollection

decoder : Function

A function that can convert newly added items to a proper type before being added to this collection.

Defaults to:

null

defaultSortDirection : String

The default sort direction to use if one is not specified.

Defaults to:

'ASC'

extraKeys : Object

One or more Ext.util.CollectionKey configuration objects or key properties. Each property of the given object is the name of the CollectionKey instance that is stored on this collection. The value of each property configures the CollectionKey instance.

 var collection = new Ext.util.Collection({
     extraKeys: {
         byName: 'name' // based on "name" property of each item
     }
 });

Or equivalently:

 var collection = new Ext.util.Collection({
     extraKeys: {
         byName: {
             property: 'name'
         }
     }
 });

To provide a custom key extraction function instead:

 var collection = new Ext.util.Collection({
     extraKeys: {
         byName: {
             keyFn: function (item) {
                 return item.name;
             }
         }
     }
 });

Or to call a key getter method from each item:

 var collection = new Ext.util.Collection({
     extraKeys: {
         byName: {
             keyFn: 'getName'
         }
     }
 });

To use the above:

 var item = collection.byName.get('somename');

NOTE Either a property or keyFn must be be specified to define each key.

Defaults to:

null

Available since: 5.0.0

filters : Array / Ext.util.FilterCollection

The collection of Ext.util.Filter for this collection. At the time a collection is created filters can be specified as a unit. After that time the normal setFilters method can also be given a set of replacement filters for the collection.

Individual filters can be specified as an Ext.util.Filter instance, a config object for Ext.util.Filter or simply a function that will be wrapped in a instance with its filterFn set.

For fine grain control of the filters collection, call getFilters to return the Ext.util.Collection instance that holds this collection's filters.

 var collection = new Ext.util.Collection();
 var filters = collection.getFilters(); // an Ext.util.FilterCollection

 function legalAge (item) {
     return item.age >= 21;
 }

 filters.add(legalAge);

 //...

 filters.remove(legalAge);

Any changes to the filters collection will cause this collection to adjust its items accordingly (if autoFilter is true).

Defaults to:

null

Available since: 5.0.0

grouper : Object

A configuration object for this collection's Ext.util.Grouper.

For example, to group items by the first letter of the last name:

 var collection = new Ext.util.Collection({
     grouper: {
         groupFn: function (item) {
             return item.lastName.substring(0, 1);
         }
     }
 });

Defaults to:

null

groups : Ext.util.GroupCollection

The collection of to hold each group container. This collection is created and removed dynamically based on grouper. Application code should only need to call getGroups to retrieve the collection and not setGroups.

Defaults to:

null

keyFn : Function

A function to retrieve the key of an item in the collection. If provided, this replaces the default getKey method. The default getKey method handles items that have either an "id" or "_id" property or failing that a getId method to call.

Available since: 5.0.0

listeners : Object

A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.

DOM events from Ext JS Ext.Component

While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the Ext.view.View's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

multiSortLimit : Number

The maximum number of sorters which may be applied to this Sortable when using the "multi" insertion position when adding sorters.

New sorters added using the "multi" insertion position are inserted at the top of the sorters list becoming the new primary sort key.

If the sorters collection has grown to longer then multiSortLimit, then the it is trimmed.

Defaults to:

3

rootProperty : String

The root property to use for aggregation, filtering and sorting. By default this is null but when containing things like Ext.data.Model this config would likely be set to "data" so that property names are applied to the fields of each record.

Defaults to:

null

sorters : Array / Ext.util.SorterCollection

Array of Ext.util.Sorter for this collection. At the time a collection is created the sorters can be specified as a unit. After that time the normal setSorters method can be also be given a set of replacement sorters.

Individual sorters can be specified as an Ext.util.Sorter instance, a config object for Ext.util.Sorter or simply the name of a property by which to sort.

An alternative way to extend the sorters is to call the sort method and pass a property or sorter config to add to the sorters.

For fine grain control of the sorters collection, call getSorters to return the Ext.util.Collection instance that holds this collection's sorters.

 var collection = new Ext.util.Collection();
 var sorters = collection.getSorters(); // an Ext.util.SorterCollection

 sorters.add('name');

 //...

 sorters.remove('name');

Any changes to the sorters collection will cause this collection to adjust its items accordingly (if autoSort is true).

Defaults to:

null

Available since: 5.0.0

source : Ext.util.Collection

The base Collection. This collection contains the items to which filters are applied to populate this collection. In this configuration, only the root source collection can have items truly added or removed.

Defaults to:

null

Available since: 5.0.0

filtered : Boolean

readonly ro

A read-only flag indicating if this object is filtered.

Defaults to:

false

generation : Number

readonly ro

Mutation counter which is incremented when the collection changes.

Defaults to:

0

Available since: 5.0.0

grouped : Boolean

readonly ro

A read-only flag indicating if this object is grouped.

Defaults to:

false

hasListeners : Object

readonly ro

This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the Ext.app.EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event.

The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:

 if (this.hasListeners.foo) {
     this.fireEvent('foo', this, arg1);
 }

isCollection : Boolean

readonly ro

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

Defaults to:

true

isObservable : Boolean

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

Defaults to:

true

length : Number

readonly ro

The count of items in the collection.

Defaults to:

0

Available since: 5.0.0

sorted : Boolean

readonly ro

A read-only flag indicating if this object is sorted. This flag may not be correct during an update of the sorter collection but will be correct before onSortChange is called. This flag is true if grouped is true because the collection is at least sorted by the grouper.

Defaults to:

false

updating : Number

readonly ro

A counter that is increased by beginUpdate and decreased by endUpdate. When this transitions from 0 to 1 the beginupdate event is fired. When it transitions back from 1 to 0 the endupdate event is fired.

Defaults to:

0

Available since: 5.0.0

add ( item ) : Object/Object[]

Adds an item to the collection. If the item already exists or an item with the same key exists, the old item will be removed and the new item will be added to the end.

This method also accepts an array of items or simply multiple items as individual arguments. The following 3 code sequences have the same end result:

 // Call add() once per item (not optimal - best avoided):
 collection.add(itemA);
 collection.add(itemB);
 collection.add(itemC);
 collection.add(itemD);

 // Call add() with each item as an argument:
 collection.add(itemA, itemB, itemC, itemD);

 // Call add() with the items as an array:
 collection.add([ itemA, itemB, itemC, itemD ]);

The first form should be avoided where possible because the collection and all parties "watching" it will be updated 4 times.

Available since: 5.0.0

Parameters

Returns

addAfterListener

Alias for onAfter.

addBeforeListener

Alias for onBefore.

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

chainable ch

The on method is shorthand for addListener.

Appends an event handler to this object. For example:

myGridPanel.on("itemclick", this.onItemClick, this);

The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:

myGridPanel.on({
    cellclick: this.onCellClick,
    select: this.onSelect,
    viewready: this.onViewReady,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellclick: {fn: this.onCellClick, scope: this, single: true},
    viewready: {fn: panel.onViewReady, scope: panel}
});

Names of methods in a specified scope may also be used:

myGridPanel.on({
    cellclick: {fn: 'onCellClick', scope: this, single: true},
    viewready: {fn: 'onViewReady', scope: panel}
});

Parameters

  var panel = new Ext.panel.Panel({
      title: 'The title',
      listeners: {
          click: this.handlePanelClick,
          element: 'body'
      }
  });

 panel.body.un(...)

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

false

'current'

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

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

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

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

Returns

this.btnListeners =  = myButton.on({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

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

The addManagedListener method is used when some object (call it "A") is listening to an event on another observable object ("B") and you want to remove that listener from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because all of its listeners will be removed at that time.

Example:

Ext.define('Foo', {
    extend: 'Ext.Component',

    initComponent: function () {
        this.addManagedListener(MyApp.SomeGlobalSharedMenu, 'show', this.doSomething);
        this.callParent();
    }
});

As you can see, when an instance of Foo is destroyed, it ensures that the 'show' listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.

As of version 5.1 it is no longer necessary to use this method in most cases because listeners are automatically managed if the scope object provided to addListener is an Observable instance. However, if the observable instance and scope are not the same object you still need to use mon or addManagedListener if you want the listener to be managed.

Parameters

Returns

this.btnListeners = myButton.mon({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

aggregate ( property, operation, [begin], [end], [scope] ) : Object

Returns the result of the specified aggregation operation against all items in this collection.

This method is not typically called directly because there are convenience methods for each of the supported operation values. These are:

• average - Returns the average value.
• bounds - Returns an array of [min, max].
• max - Returns the maximum value or undefined if empty.
• min - Returns the minimum value or undefined if empty.
• sum - Returns the sum of all values.

For example:

 result = collection.aggregate('age', 'sum');

 result = collection.aggregate('age', 'sum', 2, 10); // the 8 items at index 2

To provide a custom operation function:

 function averageAgeOfMinors (items, values) {
     var sum = 0,
         count = 0;

     for (var i = 0; i < values.length; ++i) {
         if (values[i] < 18) {
             sum += values[i];
             ++count;
         }
     }

     return count ? sum / count : 0;
 }

 result = collection.aggregate('age', averageAgeOfMinors);

Parameters

Returns

aggregateByGroup ( property, operation, [scope] ) : Object

See aggregate. The functionality is the same, however the aggregates are provided per group. Assumes this collection has an active grouper.

Parameters

Returns

average ( property, [begin], [end] ) : Object

Averages property values from some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

averageByGroup ( property ) : Object

See average. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

beginUpdate

This method is called to indicate the start of multiple changes to the collection. Application code should seldom need to call this method as it is called internally when needed. If multiple collection changes are needed, consider wrapping them in an update call rather than calling beginUpdate directly.

Internally this method increments a counter that is decremented by endUpdate. It is important, therefore, that if you call beginUpdate directly you match that call with a call to endUpdate or you will prevent the collection from updating properly.

For example:

 var collection = new Ext.util.Collection();

 collection.beginUpdate();

 collection.add(item);
 // ...

 collection.insert(index, otherItem);
 //...

 collection.endUpdate();

Available since: 5.0.0

bounds ( property, [begin], [end] ) : Array

Determines the minimum and maximum values for the specified property over some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

boundsByGroup ( property ) : Object

See bounds. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

clear

Removes all items from the collection. This is similar to removeAll except that removeAll fire events to inform listeners. This means that this method should be called only when you are sure there are no listeners.

Available since: 5.0.0

clearListeners

Removes all listeners for this object including the managed listeners

clearManagedListeners

Removes all managed listeners for this object.

clone Ext.util.Collection

Creates a shallow copy of this collection

Available since: 5.0.0

Returns

collect ( property, [root], [allowNull] ) : Array

Collects unique values of a particular property in this Collection.

Available since: 5.0.0

Parameters

Returns

contains ( item ) : Boolean

Returns true if the collection contains the passed Object as an item.

Available since: 5.0.0

Parameters

Returns

containsKey ( key ) : Boolean

Returns true if the collection contains the passed Object as a key.

Available since: 5.0.0

Parameters

Returns

count Number

Determines the number of items in the collection.

Available since: 5.0.0

Returns

countByGroup Object

See count. The result is partitioned by group.

Available since: 5.0.0

Returns

createFiltered ( property, value, [anyMatch], [caseSensitive], [exactMatch] ) : Ext.util.Collection

Creates a new collection that is a filtered subset of this collection. The filter passed can be a function, a simple property name and value, an Ext.util.Filter instance, an array of Ext.util.Filter instances.

If the passed filter is a function the second argument is its "scope" (or "this" pointer). The function should return true given each item in the collection if that item should be included in the filtered collection.

 var people = new Ext.util.Collection();

 people.add([
     { id: 1, age: 25, name: 'Ed' },
     { id: 2, age: 24, name: 'Tommy' },
     { id: 3, age: 24, name: 'Arne' },
     { id: 4, age: 26, name: 'Aaron' }
 ]);

 // Create a collection of people who are older than 24:
 var oldPeople = people.createFiltered(function (item) {
     return item.age > 24;
 });

If the passed filter is a Ext.util.Filter instance or array of Ext.util.Filter instances the filter(s) are used to produce the filtered collection and there are no further arguments.

If the passed filter is a string it is understood as the name of the property by which to filter. The second argument is the "value" used to compare each item's property value. This comparison can be further tuned with the anyMatch and caseSensitive (optional) arguments.

// Create a new Collection containing only the items where age == 24 var middleAged = people.createFiltered('age', 24);

Alternatively you can apply filters to this Collection by calling setFilters or modifying the filter collection returned by getFilters.

Available since: 5.0.0

Parameters

Returns

destroy

Destroys this collection. This is only necessary if this collection uses a source collection as that relationship will keep a reference from the source to this collection and potentially leak memory.

Available since: 5.0.0

each ( fn, [scope] )

Executes the specified function once for every item in the collection. If the value returned by fn is false the iteration stops. In all cases, the last value that fn returns is returned by this method.

Available since: 5.0.0

Parameters

eachKey ( fn, [scope] )

Executes the specified function once for every key in the collection, passing each key, and its associated item as the first two parameters. If the value returned by fn is false the iteration stops. In all cases, the last value that fn returns is returned by this method.

Available since: 5.0.0

Parameters

enableBubble ( eventNames )

Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class.

This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component#getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly.

Example:

Ext.define('Ext.overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    //  Add functionality to Field's initComponent to enable the change event to bubble
    initComponent: function () {
        this.callParent();
        this.enableBubble('change');
    }
});

var myForm = Ext.create('Ext.form.Panel', {
    title: 'User Details',
    items: [{
        ...
    }],
    listeners: {
        change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
        }
    }
});

Parameters

endUpdate

This method is called after modifications are complete on a collection. For details see beginUpdate.

Available since: 5.0.0

extremes ( property, [begin], [end] ) : Array

Finds the items with the minimum and maximum for the specified property over some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

extremesByGroup ( property ) : Object

See extremes. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

filterBy ( fn, [scope] ) : Ext.util.Collection

Filter by a function. Returns a new collection that has been filtered. The passed function will be called with each object in the collection. If the function returns true, the value is included otherwise it is filtered.

Available since: 5.0.0

Parameters

Returns

find ( property, value, [start], [startsWith], [endsWith], [ignoreCase] ) : Object

Finds the first matching object in this collection by a specific property/value.

Available since: 5.0.0

Parameters

Returns

findBy ( fn, [scope], [start] ) : Object

Returns the first item in the collection which elicits a true return value from the passed selection function.

Available since: 5.0.0

Parameters

Returns

findIndex ( property, value, [start], [startsWith], [endsWith], [ignoreCase] ) : Number

Finds the index of the first matching object in this collection by a specific property/value.

Available since: 5.0.0

Parameters

Returns

findIndexBy ( fn, [scope], [start] ) : Number

Find the index of the first matching object in this collection by a function. If the function returns true it is considered a match.

Available since: 5.0.0

Parameters

Returns

fireEvent ( eventName, args ) : Boolean

Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener).

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component#getBubbleTarget) by calling enableBubble.

Parameters

Returns

fireEventArgs ( eventName, args ) : Boolean

Fires the specified event with the passed parameter list.

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component#getBubbleTarget) by calling enableBubble.

Parameters

Returns

fireEventedAction ( eventName, args, fn, [scope], [fnArgs] ) : Boolean

Fires the specified event with the passed parameters and executes a function (action). Evented Actions will automatically dispatch a 'before' event passing. This event will be given a special controller that allows for pausing/resuming of the event flow.

By pausing the controller the updater and events will not run until resumed. Pausing, however, will not stop the processing of any other before events.

Parameters

Returns

first ( [grouped] ) : Object

Returns the first item in the collection.

Available since: 5.0.0

Parameters

Returns

get ( key ) : Object

Returns the item associated with the passed key.

Available since: 5.0.0

Parameters

Returns

getAt ( index ) : Object

Returns the item at the specified index.

Available since: 5.0.0

Parameters

Returns

getByKey ( key ) : Object

Returns the item associated with the passed key.

Available since: 5.0.0

Parameters

Returns

getConfig ( [name], [peek] ) : Object

Returns a specified config property value. If the name parameter is not passed, all current configuration options will be returned as key value pairs.

Parameters

Returns

getCount Number

Returns the number of items in the collection.

Available since: 5.0.0

Returns

getFilterFn Function

Returns the filter function.

Returns

getFilters

getId String

Retrieves the id of this component. Will autogenerate an id if one has not already been set.

Returns

getInitialConfig ( [name] ) : Object/Mixed

Returns the initial configuration passed to the constructor when instantiating this class.

Given this example Ext.button.Button definition and instance:

Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});

Calling btn.getInitialConfig() would return an object including the config options passed to the create method:

xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'

Calling btn.getInitialConfig('text')returns 'Test Button'.

Parameters

Returns

getKey ( item ) : Object

A function which will be called, passing an object belonging to this collection. The function should return the key by which that object will be indexed. This key must be unique to this item as only one item with this key will be retained.

The default implementation looks basically like this (give or take special case handling of 0):

 function getKey (item) {
     return item.id || item._id || item.getId();
 }

You can provide your own implementation by passing the keyFn config.

For example, to hold items that have a unique "name" property:

var elementCollection = new Ext.util.Collection({
    keyFn: function (item) {
        return item.name;
    }
});

The collection can have extraKeys if items need to be quickly looked up by other (potentially non-unique) properties.

Available since: 5.0.0

Parameters

Returns

getRange ( [begin], [end] ) : Array

Returns a range of items in this collection

Available since: 5.0.0

Parameters

Returns

getSorters

getSource

getValues ( property, [root], [start], [end] ) : Array

Returns an array of values for the specified (sub) property.

For example, to get an array of "name" properties from a collection of records (of Ext.data.Model objects):

 var names = collection.getValues('name', 'data');

Available since: 5.0.0

Parameters

Returns

hasListener ( eventName ) : Boolean

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

Parameters

Returns

indexOf ( item ) : Number

Returns index within the collection of the passed Object.

Available since: 5.0.0

Parameters

Returns

indexOfKey ( key ) : Number

Returns index within the collection of the passed key.

Available since: 5.0.0

Parameters

Returns

insert ( index, item ) : Object/Object[]

Inserts one or more items to the collection. The index value is the position at which the first item will be placed. The items starting at that position will be shifted to make room.

Available since: 5.0.0

Parameters

Returns

isItemFiltered ( item ) : Boolean

This method can be used to conveniently test whether an individual item would be removed due to the current filter.

Parameters

Returns

isSuspended ( [event] ) : Boolean

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

Parameters

Returns

itemChanged ( item, [modified], [oldKey] )

This method should be called when an item in this collection has been modified. If the collection is sorted or filtered the result of modifying an item needs to be reflected in the collection. If the item's key is also being modified, it is best to pass the oldKey to this same call rather than call updateKey separately.

Available since: 5.0.0

Parameters

last ( [grouped] ) : Object

Returns the last item in the collection.

Available since: 5.0.0

Parameters

Returns

max ( property, [begin], [end] ) : Object

Determines the maximum value for the specified property over some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

maxByGroup ( property ) : Object

See max. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

maxItem ( property, [begin], [end] ) : Object

Finds the item with the maximum value for the specified property over some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

maxItemByGroup ( property ) : Object

See maxItem. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

min ( property, [begin], [end] ) : Object

Determines the minimum value for the specified property over some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

minByGroup ( property ) : Object

See min. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

minItem ( property, [begin], [end] ) : Object

Finds the item with the minimum value for the specified property over some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

minItemByGroup ( property ) : Object

See minItem. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

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

Shorthand for addManagedListener. The addManagedListener method is used when some object (call it "A") is listening to an event on another observable object ("B") and you want to remove that listener from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because all of its listeners will be removed at that time.

Example:

Ext.define('Foo', {
    extend: 'Ext.Component',

    initComponent: function () {
        this.addManagedListener(MyApp.SomeGlobalSharedMenu, 'show', this.doSomething);
        this.callParent();
    }
});

As you can see, when an instance of Foo is destroyed, it ensures that the 'show' listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.

As of version 5.1 it is no longer necessary to use this method in most cases because listeners are automatically managed if the scope object provided to addListener is an Observable instance. However, if the observable instance and scope are not the same object you still need to use mon or addManagedListener if you want the listener to be managed.

Parameters

Returns

this.btnListeners = myButton.mon({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

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

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

Parameters

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

The on method is shorthand for addListener.

Appends an event handler to this object. For example:

myGridPanel.on("itemclick", this.onItemClick, this);

The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:

myGridPanel.on({
    cellclick: this.onCellClick,
    select: this.onSelect,
    viewready: this.onViewReady,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellclick: {fn: this.onCellClick, scope: this, single: true},
    viewready: {fn: panel.onViewReady, scope: panel}
});

Names of methods in a specified scope may also be used:

myGridPanel.on({
    cellclick: {fn: 'onCellClick', scope: this, single: true},
    viewready: {fn: 'onViewReady', scope: panel}
});

Parameters

  var panel = new Ext.panel.Panel({
      title: 'The title',
      listeners: {
          click: this.handlePanelClick,
          element: 'body'
      }
  });

 panel.body.un(...)

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

false

'current'

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

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

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

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

Returns

this.btnListeners =  = myButton.on({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

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

Appends an after-event handler.

Same as addListener with order set to 'after'.

Parameters

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

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

Same as addListener with order set to 'before'.

Parameters

onFilterChange ( filters )

template tpl

Called after a change of the filter is complete.

For example:

 onFilterChange: function (filters) {
     if (this.filtered) {
         // process filters
     } else {
         // no filters present
     }
 }

Parameters

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

onSortChange ( sorters )

template tpl

Called after a change of the sort is complete.

For example:

 onSortChange: function (sorters) {
     if (this.sorted) {
         // process sorters
     } else {
         // no sorters present
     }
 }

Parameters

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

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

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

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

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

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

Parameters

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

Returns

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

Ext.destroy(this.storeRelayers);

remove ( item ) : Number

Remove an item from the collection.

Available since: 5.0.0

Parameters

Returns

removeAfterListener

Alias for unAfter.

removeAll Ext.util.Collection

chainable ch

Remove all items in the collection.

Available since: 5.0.0

Returns

removeAt ( index, [count] ) : Object/Number

Remove an item from a specified index in the collection.

Available since: 5.0.0

Parameters

Returns

removeBeforeListener

Alias for unBefore.

removeByKey ( key ) : Object

Removes the item associated with the passed key from the collection.

Available since: 5.0.0

Parameters

Returns

removeListener ( eventName, fn, [scope] ) :

chainable ch

Removes an event handler.

Parameters

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

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

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

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

Returns

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

Removes listeners that were added by the mon method.

Parameters

replaceAll ( item ) : Object/Object[]

Adds an item to the collection while removing any existing items. Similar to method-add.

Available since: 5.0.0

Parameters

Returns

resumeEvent ( eventName )

Resumes firing of the named event(s).

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

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

Parameters

resumeEvents ( [discardQueue] )

Resumes firing events (see suspendEvents).

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

Parameters

setConfig ( name, [value] ) : Ext.Base

chainable ch

Sets a single/multiple configuration options.

Parameters

Returns

setListeners

sort ( [property], [direction], [mode] ) : Ext.util.Collection

chainable ch

Updates the sorters collection and triggers sorting of this Sortable.

For example:

//sort by a single field
myStore.sort('myField', 'DESC');

//sorting by multiple fields
myStore.sort([{
    property : 'age',
    direction: 'ASC'
}, {
    property : 'name',
    direction: 'DESC'
}]);

When passing a single string argument to sort, the direction is maintained for each field and is toggled automatically. So this code:

store.sort('myField');
store.sort('myField');

Is equivalent to the following:

store.sort('myField', 'ASC');
store.sort('myField', 'DESC');

Parameters

Returns

sortBy ( sorterFn )

Sorts the collection by a single sorter function

Parameters

sortData ( data ) : Array

This method will sort an array based on the currently configured sorters.

Parameters

Returns

sortItems ( sortFn )

Sorts the items of the collection using the supplied function. This should only be called for collections that have no sorters defined.

Available since: 5.0.0

Parameters

splice ( index, toRemove, [toAdd] ) :

chainable ch

This method is basically the same as the JavaScript Array splice method.

Negative indexes are interpreted starting at the end of the collection. That is, a value of -1 indicates the last item, or equivalent to length - 1.

Available since: 5.0.0

Parameters

Returns

sum ( property, [begin], [end] ) : Object

Sums property values from some or all of the items in this collection.

Available since: 5.0.0

Parameters

Returns

sumByGroup ( property ) : Object

See sum. The result is partitioned by group.

Available since: 5.0.0

Parameters

Returns

suspendEvent ( eventName )

Suspends firing of the named event(s).

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

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

Parameters

suspendEvents ( queueSuspended )

Suspends the firing of all events. (see resumeEvents)

Parameters

un ( eventName, fn, [scope] ) :

Shorthand for removeListener. Removes an event handler.

Parameters

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

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

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

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

Returns

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

Removes a before-event handler.

Same as removeListener with order set to 'after'.

Parameters

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

Removes a before-event handler.

Same as removeListener with order set to 'before'.

Parameters

update ( fn, [scope] ) : Object

This method calls the supplied function fn between beginUpdate and endUpdate calls.

 collection.update(function () {
     // Perform multiple collection updates...

     collection.add(item);
     // ...

     collection.insert(index, otherItem);
     //...

     collection.remove(someItem);
 });

Available since: 5.0.0

Parameters