Wraps a collection of validation error responses and provides convenient functions for accessing and errors for specific fields.
Usually this class does not need to be instantiated directly - instances are instead created automatically when validate on a model instance:
//validate some existing model instance - in this case it returned 2 failures messages
var errors = myModel.validate();
errors.isValid(); //false
errors.length; //2
errors.getByField('name'); // [{field: 'name', error: 'must be present'}]
errors.getByField('title'); // [{field: 'title', error: 'is too short'}]
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 ExtJs Components
While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
is usually only done when extra value can be added. For example the DataView's
click
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({
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'); }
}
}
});
The key to associate with the item, or the new item.
If a getKey implementation was specified for this MixedCollection, or if the key of the stored items is in a property called id, the MixedCollection will be able to derive the key for the new item. In this case just pass the new item in this parameter.
allowFunctions
has been set to true.true
or the first event name string if multiple event names are being passed as separate parameters.this.addEvents('storeloaded', 'storecleared');
this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.This option is useful during Component construction to add DOM event listeners to elements of Components which will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:
new Ext.Panel({
title: 'The title',
listeners: {
click: this.handlePanelClick,
element: 'body'
}
});
When added in this way, the options available are the options applicable to Ext.core.Element.addListener
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener.
myPanel.on('hide', this.handleClick, this, {
single: true,
delay: 100
});
Attaching multiple handlers in 1 call
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,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
scope: this // Important. Ensure "this" is correct during handler execution
});
.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
ename
parameter was an event name, this
is the handler function.ename
parameter was an event name, this
is the scope (this
reference) in which the handler function is executed.ename
parameter was an event name, this
is the addListener options.this
reference) in which the function is executed. Defaults to the Observable firing the event.this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.The collection item
The item's index
The total number of items in the collection
this
reference) in which the function is executed. Defaults to the current item in the iteration.this
reference) in which the function is executed. Defaults to the browser window.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.override(Ext.form.Field, {
// Add functionality to Field's initComponent to enable the change event to bubble
initComponent : Ext.Function.createSequence(Ext.form.Field.prototype.initComponent, function() {
this.enableBubble('change');
}),
// We know that we want Field's events to bubble directly to the FormPanel.
getBubbleTarget : function() {
if (!this.formPanel) {
this.formPanel = this.findParentByType('form');
}
return this.formPanel;
}
});
var myForm = new Ext.formPanel({
title: 'User Details',
items: [{
...
}],
listeners: {
change: function() {
// Title goes red if form has been modified.
myForm.header.setStyle('color', 'red');
}
}
});
Filters the objects in this collection by a set of Filters, or by a single property/value pair with optional parameters for substring matching and case sensitivity. See Filter for an example of using Filter objects (preferred). Alternatively, MixedCollection can be easily filtered by property like this:
//create a simple store with a few people defined
var people = new Ext.util.MixedCollection();
people.addAll([
{id: 1, age: 25, name: 'Ed'},
{id: 2, age: 24, name: 'Tommy'},
{id: 3, age: 24, name: 'Arne'},
{id: 4, age: 26, name: 'Aaron'}
]);
//a new MixedCollection containing only the items where age == 24
var middleAged = people.filter('age', 24);
this
reference) in which the function is executed. Defaults to this MixedCollection.this
reference) in which the function is executed. Defaults to the browser window.this
reference) in which the function is executed. Defaults to this MixedCollection.Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
item.id
but you can provide your own implementation
to return a different value as in the following examples:// normal way
var mc = new Ext.util.MixedCollection();
mc.add(someEl.dom.id, someEl);
mc.add(otherEl.dom.id, otherEl);
//and so on
// using getKey
var mc = new Ext.util.MixedCollection();
mc.getKey = function(el){
return el.dom.id;
};
mc.add(someEl);
mc.add(otherEl);
// or via the constructor
var mc = new Ext.util.MixedCollection(false, function(el){
return el.dom.id;
});
mc.add(someEl);
mc.add(otherEl);
This makes any event fired on any instance of the passed class also fire a single event through the class allowing for central handling of events on many instances at once.
Usage:
Ext.util.Observable.observe(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
console.log('Ajax request made to ' + options.url);
});
this
.ename
parameter was an event name, this
is the handler function.ename
parameter was an event name, this
is the scope (this
reference) in which the handler function is executed.The key associated with the item to replace, or the replacement item.
If you supplied a getKey implementation for this MixedCollection, or if the key of your stored items is in a property called id, then the MixedCollection will be able to derive the key of the replacement item. If you want to replace an item with one having the same key value, then just pass the replacement item in this parameter.
queueSuspended
parameter, then all
events fired during event suspension will be sent to any listeners now.