Ext.data.Store
Hierarchy
Ext.BaseExt.EventedExt.data.StoreInherited mixins
Requires
Subclasses
Files
Guide
Using StoresThe Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.
Creating a Store is easy - we just tell it the Model and the Proxy to use to load and save its data:
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
}
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true
});
In the example above we configured an AJAX proxy to load data from the url '/users.json'. We told our Proxy to use a JsonReader to parse the response from the server into Model object - see the docs on JsonReader for details.
Inline data
Stores can also load data inline. Internally, Store converts each of the objects we pass in as data into Model instances:
Ext.create('Ext.data.Store', {
model: 'User',
data : [
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Jamie', lastName: 'Avins'}
]
});
Loading inline data using the method above is great if the data is in the correct format already (e.g. it doesn't need to be processed by a reader). If your inline data requires processing to decode the data structure, use a MemoryProxy instead (see the MemoryProxy docs for an example).
Additional data can also be loaded locally using add.
Loading Nested Data
Applications often need to load sets of associated data - for example a CRM system might load a User and her Orders. Instead of issuing an AJAX request for the User and a series of additional AJAX requests for each Order, we can load a nested dataset and allow the Reader to automatically populate the associated models. Below is a brief example, see the Ext.data.reader.Reader intro docs for a full explanation:
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: "User",
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
rootProperty: 'users'
}
}
});
Which would consume a response like this:
{
"users": [
{
"id": 1,
"name": "Ed",
"orders": [
{
"id": 10,
"total": 10.76,
"status": "invoiced"
},
{
"id": 11,
"total": 13.45,
"status": "shipped"
}
]
}
]
}
See the Ext.data.reader.Reader intro docs for a full explanation.
Filtering and Sorting
Stores can be sorted and filtered - in both cases either remotely or locally. The sorters and filters are held inside MixedCollection instances to make them easy to manage. Usually it is sufficient to either just specify sorters and filters in the Store configuration or call sort or filter:
var store = Ext.create('Ext.data.Store', {
model: 'User',
sorters: [
{
property : 'age',
direction: 'DESC'
},
{
property : 'firstName',
direction: 'ASC'
}
],
filters: [
{
property: 'firstName',
value : /Ed/
}
]
});
The new Store will keep the configured sorters and filters in the MixedCollection instances mentioned above. By default, sorting and filtering are both performed locally by the Store - see remoteSort and remoteFilter to allow the server to perform these operations instead.
Filtering and sorting after the Store has been instantiated is also easy. Calling filter adds another filter to the Store and automatically filters the dataset (calling filter with no arguments simply re-applies all existing filters). Note that by default your sorters are automatically reapplied if using local sorting.
store.filter('eyeColor', 'Brown');
Change the sorting at any time by calling sort:
store.sort('height', 'ASC');
Note that all existing sorters will be removed in favor of the new sorter data (if sort is called with no arguments, the existing sorters are just reapplied instead of being removed). To keep existing sorters and add new ones, just add them to the MixedCollection:
store.sorters.add(new Ext.util.Sorter({
property : 'shoeSize',
direction: 'ASC'
}));
store.sort();
Registering with StoreManager
Any Store that is instantiated with a storeId will automatically be registed with the StoreManager. This makes it easy to reuse the same store in multiple views:
//this store can be used several times
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'usersStore'
});
new Ext.List({
store: 'usersStore',
//other config goes here
});
new Ext.view.View({
store: 'usersStore',
//other config goes here
});
Further Reading
Stores are backed up by an ecosystem of classes that enables their operation. To gain a full understanding of these pieces and how they fit together, see:
- Proxy - overview of what Proxies are and how they are used
- Model - the core class in the data package
- Reader - used by any subclass of ServerProxy to read a response
Available since: 1.1.0
Config options
This is a private configuration used in the framework whether this Store can be destroyed.
Defaults to: false
Available since: 2.0.0
If data is not specified, and if autoLoad is true or an Object, this store's load method is automatically called after creation. If the value of autoLoad is an Object, this Object will be passed to the store's load method. Defaults to false.
Available since: 1.1.0
True to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.
Defaults to: false
Available since: 2.0.0
The event name to bubble, or an Array of event names.
The event name to bubble, or an Array of event names.
Available since: 2.0.0
True to empty the store when loading another page via loadPage, nextPage or previousPage (defaults to true). Setting to false keeps existing records, allowing large data sets to be loaded one page at a time but rendered all together.
Defaults to: true
Available since: 1.1.0
Array of Model instances or data objects to load locally. See "Inline data" above for details.
Available since: 1.1.0
This configuation allows you to prevent destroying record instances when they are removed from this store and are not in any other store.
Defaults to: true
Available since: 2.0.1
This may be used in place of specifying a model configuration. The fields should be a set of Ext.data.Field configuration objects. The store will automatically create a Ext.data.Model with these fields. In general this configuration option should be avoided, it exists for the purposes of backwards compatibility. For anything more complicated, such as specifying a particular id property or associations, a Ext.data.Model should be defined and specified for the model config.
Available since: 2.0.0
Array of Filters for this store. This configuration is handled by the Filterable mixin of the data collection.
Available since: 2.0.0
This function will be passed to the grouper configuration as it's groupFn. Note that this configuration is deprecated and grouper: {groupFn: yourFunction}} is preferred.
This cfg has been deprecated
Available since: 2.0.0
The direction in which sorting should be applied when grouping. If you specify a grouper by using the groupField configuration, this will automatically default to "ASC" - the other supported value is "DESC"
Available since: 2.0.0
A configuration object for this Store's grouper.
For example, to group a store's items by the first letter of the last name:
Ext.define('People', {
extend: 'Ext.data.Store',
config: {
fields: ['first_name', 'last_name'],
grouper: {
groupFn: function(record) {
return record.get('last_name').substr(0, 1);
},
sortProperty: 'last_name'
}
}
});
Available since: 2.0.0
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.
See the Event guide for more
Note it is bad practice to specify a listeners config when you are defining a class using Ext.define. Instead, only specify listeners when you are instantiating your class with Ext.create.
Available since: 1.1.0
Name of the Model associated with this store. The string is used as an argument for Ext.ModelManager.getModel.
Available since: 2.0.0
The number of records considered to form a 'page'. This is used to power the built-in paging using the nextPage and previousPage functions. Defaults to 25.
Defaults to: 25
Available since: 2.0.0
The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance - see setProxy for details.
Available since: 1.1.0
True to defer any grouping operation to the server. If false, grouping is done locally on the client. Defaults to false
Defaults to: false
Available since: 2.0.0
Unique identifier for this store. If present, this Store will be registered with the Ext.data.StoreManager, making it easy to reuse elsewhere.
Available since: 1.1.0
This configuration allows you to disable the synchronization of removed records on this Store. By default, when you call removeAll or remove, records will be added to an internal removed array. When you then sync the Store, we send a destroy request for these records. If you don't want this to happen, you can set this configuration to false.
Defaults to: true
Available since: 2.0.0
The total number of records in the full dataset, as indicated by a server. If the server-side dataset contains 5000 records but only returns pages of 50 at a time, totalCount will be set to 5000 and getCount will return 50
Available since: 2.0.0
Properties
Instance Properties The page that the Store has most recently loaded (see loadPage) ...The page that the Store has most recently loaded (see loadPage)
Defaults to: 1
Available since: 1.1.0
listenerOptionsRegex : RegExpprivate ...
Defaults to: /^(?:delegate|single|delay|buffer|args|prepend)$/
Available since: 2.0.0
mixinConfig : Objectprivate ...
Defaults to: {id: 'observable', hooks: {destroy: 'destroy'}}
Available since: 2.0.0
Get the reference to the current class from which this object was instantiated. ...Get the reference to the current class from which this object was instantiated. Unlike statics,
this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics
for a detailed comparison
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); / dependentOL on 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
Available since: 2.0.0
The page that the Store has most recently loaded (see loadPage)
Defaults to: 1
Available since: 1.1.0
Defaults to: /^(?:delegate|single|delay|buffer|args|prepend)$/
Available since: 2.0.0
Defaults to: {id: 'observable', hooks: {destroy: 'destroy'}}
Available since: 2.0.0
Get the reference to the current class from which this object was instantiated. Unlike statics,
this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics
for a detailed comparison
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); / dependentOL on 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
Available since: 2.0.0
Static Properties
Methods
Instance Methods ... Adds Model instance to the Store. ...Adds Model instance to the Store. This method accepts either:
- An array of Model instances or Model configuration objects.
- Any number of Model instance or Model configuration object arguments.
The new Model instances will be added at the end of the existing collection.
Sample usage:
myStore.add({some: 'data2'}, {some: 'other data2'});
Available since: 1.1.0
Parameters
- model : Ext.data.Model[]/Ext.data.Model...
An array of Model instances
or Model configuration objects, or variable number of Model instance or config arguments.
Returns
- Ext.data.Model[]
The model instances that were added
addAfterListener( eventName, fn, [scope], [options] )Appends an after-event handler. ...Appends an after-event handler.
Same as addListener with order set to 'after'.
Available since: 2.0.0
Parameters
addBeforeListener( eventName, fn, [scope], [options] )Appends a before-event handler. ...Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set to 'before'.
Available since: 2.0.0
Parameters
addDispatcherListener( selector, name, fn, scope, options, order )private addEvents( eventNames )deprecatedAdds the specified events to the list of events which this Observable may fire. ...Adds the specified events to the list of events which this Observable may fire.
This method has been deprecated since 2.0
It's no longer needed to add events before firing.
Available since: 1.1.0
Parameters
addListener( eventName, fn, [scope], [options], [order] )Appends an event handler to this object. ...Appends an event handler to this object. You can review the available handlers by looking at the 'events'
section of the documentation for the component you are working with.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener:
container.on('tap', this.handleTap, 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:
container.on({
tap : this.onTap,
swipe: this.onSwipe,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
container.on({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to listen for. May also be an object who's property names are
event names.
- fn : Function
The method the event invokes. Will be called with arguments given to
fireEvent plus the options parameter described below.
- scope : Object (optional)
The scope (this reference) in which the handler function is executed. If
omitted, defaults to the object which fired the event.
- options : Object (optional)
An object containing handler configuration.
This object may contain any of the following properties:
scope : Object
The scope (this reference) in which the handler function is executed. If omitted, defaults to the object
which fired the event.
delay : Number
The number of milliseconds to delay the invocation of the handler after the event fires.
single : Boolean
True to add a handler to handle just the next firing of the event, and then remove itself.
order : String
The order of when the listener should be added into the listener queue.
If you set an order of before and the event you are listening to is preventable, you can return false and it will stop the event.
Available options are before, current and after. Defaults to current.
buffer : Number
Causes the handler to be delayed by the specified number of milliseconds. If the event fires again within that
time, the original handler is not invoked, but the new handler is scheduled in its place.
element : String
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', {
listeners: {
element: 'element',
tap: function() {
console.log('element tap!');
}
}
});
All components have the element reference, which is the outer most element of the component. Ext.Container also has the
innerElement element which contains all children. In most cases element is adequate.
delegate : String
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar
var container = Ext.create('Ext.Container', {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My Toolbar'
},
{
xtype: 'button',
text: 'My Button'
}
]
});
container.on({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
delegate: 'button',
tap: function() {
alert('Button tapped!');
}
});
- order : String (optional)
The order of when the listener should be added into the listener queue.
Possible values are before, current and after.
Defaults to: 'current'
addManagedListener( object, eventName, [fn], [scope], [options] )deprecatedAdds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed. ...Adds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use addListener.
Available since: 1.1.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the eventName parameter was an event name, this is the handler function.
- scope : Object (optional)
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
- options : Object (optional)
If the eventName parameter was an event name, this is the
addListener options.
afterCommit( record )privateA model instance should call this method on the Store it has been joined to. ...A model instance should call this method on the Store it has been joined to.
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The model instance that was edited
afterEdit( record, modifiedFieldNames )privateA model instance should call this method on the Store it has been joined to. ...A model instance should call this method on the Store it has been joined to.
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The model instance that was edited
- modifiedFieldNames : String[]
Array of field names changed during edit.
afterErase( record )privateThis gets called by a record after is gets erased from the server. ...This gets called by a record after is gets erased from the server.
Available since: 2.0.0
Parameters
- record : Object
afterReject( record )privateA model instance should call this method on the Store it has been joined to.. ...A model instance should call this method on the Store it has been joined to..
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The model instance that was edited
applyData( data )We are using applyData so that we can return nothing and prevent the this.data
property to be overridden. ...We are using applyData so that we can return nothing and prevent the this.data
property to be overridden.
Available since: 2.0.0
Parameters
- data : Object
applyProxy( proxy, currentProxy )private Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: functi...Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 2.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callOverridden(arguments)
Returns
- Object
Returns the result of calling the overridden method
Call the "parent" method of the current method. ...Call the "parent" method of the current method. That is the method previously
overridden by derivation or by an override (see Ext.define).
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
This can be used with an override as follows:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // calls original My.Derived constructor
}
});
var obj = new My.Derived();
alert(obj.x); // now alerts 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
Lastly, it also works with overridden static methods.
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // now alerts 40
Available since: 2.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
Returns
- Object
Returns the result of calling the parent method
changeListener( operation, eventName, fn, scope, options, order )private clearFilter( [suppressEvent] )Reverts to a view of the Record cache with no filtering applied. ...Reverts to a view of the Record cache with no filtering applied.
Available since: 1.1.0
Parameters
- suppressEvent : Boolean (optional)
True to clear silently without firing the refresh event.
Defaults to: false
Removes all listeners for this object. ...Removes all listeners for this object.
Available since: 1.1.0
doAddListener( name, fn, scope, options )private doDataRefresh( store, data, operation )private doFireEvent( eventName, args, action, connectedController )private doRemoveListener( name, fn, scope, options, order )private doSet( me, value, oldValue, options )private each( fn, [scope] )Calls the specified function for each of the Records in the cache. ...Calls the specified function for each of the Records in the cache.
Available since: 1.1.0
Parameters
enableBubble( events )Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if
present. ... filter( filters, [value], [anyMatch], [caseSensitive] )Filters the loaded set of records by a given set of filters. ...Filters the loaded set of records by a given set of filters.
Filtering by single field:
store.filter("email", /\.com$/);
Using multiple filters:
store.filter([
{property: "email", value: /\.com$/},
{filterFn: function(item) { return item.get("age") > 10; }}
]);
Using Ext.util.Filter instances instead of config objects
(note that we need to specify the root config option in this case):
store.filter([
Ext.create('Ext.util.Filter', {property: "email", value: /\.com$/, root: 'data'}),
Ext.create('Ext.util.Filter', {filterFn: function(item) { return item.get("age") > 10; }, root: 'data'})
]);
If the remoteFilter configuration has been set to true, you will have to manually call the load
method after you filter to retrieve the filtered data from the server.
Available since: 1.1.0
Parameters
- filters : Object[]/Ext.util.Filter[]/String
The set of filters to apply to the data.
These are stored internally on the store, but the filtering itself is done on the Store's
MixedCollection. See MixedCollection's
filter method for filter syntax.
Alternatively, pass in a property string.
- value : String (optional)
value to filter by (only if using a property string as the first argument).
- anyMatch : Boolean (optional)
True to allow any match, false to anchor regex beginning with ^.
Defaults to: false
- caseSensitive : Boolean (optional)
True to make the filtering regex case sensitive.
Defaults to: false
filterBy( fn, [scope] )Filter by a function. ...Filter by a function. The specified function will be called for each
Record in this Store. If the function returns true the Record is included,
otherwise it is filtered out.
Available since: 1.1.0
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
- record : Ext.data.Model
The record
to test for filtering. Access field values using Ext.data.Model.get.
- id : Object
The ID of the Record passed.
- scope : Object (optional)
The scope (this reference) in which the function is executed. Defaults to this Store.
Finds the index of the first matching Record in this store by a specific field value. ...Finds the index of the first matching Record in this store by a specific field value.
Available since: 1.1.0
Parameters
- fieldName : String
The name of the Record field to test.
- value : String/RegExp
Either a string that the field value
should begin with, or a RegExp to test against the field.
- startIndex : Number (optional)
The index to start searching at
- anyMatch : Boolean (optional)
True to match any part of the string, not just the beginning
- caseSensitive : Boolean (optional)
True for case sensitive comparison
- exactMatch : Boolean (optional)
True to force exact match (^ and $ characters added to the regex). Defaults to false.
Returns
- Number
The matched index or -1
Find the index of the first matching Record in this Store by a function. ...Find the index of the first matching Record in this Store by a function.
If the function returns true it is considered a match.
Available since: 1.1.0
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
- record : Ext.data.Model
The record
to test for filtering. Access field values using Ext.data.Model.get.
- id : Object
The ID of the Record passed.
- scope : Object (optional)
The scope (this reference) in which the function is executed. Defaults to this Store.
- startIndex : Number (optional)
The index to start searching at
Returns
- Number
The matched index or -1
Finds the index of the first matching Record in this store by a specific field value. ...Finds the index of the first matching Record in this store by a specific field value.
Available since: 1.1.0
Parameters
- fieldName : String
The name of the Record field to test.
- value : Object
The value to match the field against.
- startIndex : Number (optional)
The index to start searching at
Returns
- Number
The matched index or -1
findRecord( fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] ) : Ext.data.ModelFinds the first matching Record in this store by a specific field value. ...Finds the first matching Record in this store by a specific field value.
Available since: 1.1.0
Parameters
- fieldName : String
The name of the Record field to test.
- value : String/RegExp
Either a string that the field value
should begin with, or a RegExp to test against the field.
- startIndex : Number (optional)
The index to start searching at
- anyMatch : Boolean (optional)
True to match any part of the string, not just the beginning
- caseSensitive : Boolean (optional)
True for case sensitive comparison
- exactMatch : Boolean (optional)
True to force exact match (^ and $ characters added to the regex). Defaults to false.
Returns
- Ext.data.Model
The matched record or null
fireAction( eventName, args, fn, scope )Fires the specified event with the passed parameters and execute a function (action)
at the end if there are no liste...Fires the specified event with the passed parameters and execute a function (action)
at the end if there are no listeners that return false.
Available since: 2.0.0
Parameters
Fires the specified event with the passed parameters (minus the event name, plus the options object passed
to addList...Fires the specified event with the passed parameters (minus the event name, plus the options object passed
to addListener).
The first argument is the name of the event. Every other argument passed will be available when you listen for
the event.
Example
Firstly, we set up a listener for our new event.
this.on('myevent', function(arg1, arg2, arg3, arg4, options, e) {
console.log(arg1); // true
console.log(arg2); // 2
console.log(arg3); // { test: 'foo' }
console.log(arg4); // 14
console.log(options); // the options added when adding the listener
console.log(e); // the event object with information about the event
});
And then we can fire off the event.
this.fireEvent('myevent', true, 2, { test: 'foo' }, 14);
An event may be set to bubble up an Observable parent hierarchy by calling enableBubble.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to fire.
- args : Object...
Variable number of parameters are passed to handlers.
Returns
- Boolean
returns false if any of the handlers return false otherwise it returns true.
first( ) : Ext.data.Model/undefinedConvenience function for getting the first model instance in the store ...Convenience function for getting the first model instance in the store
Available since: 1.1.0
Returns
- Ext.data.Model/undefined
The first model instance in the store, or undefined
getAllCount( ) : Number★Gets the number of all cached records including the ones currently filtered
If using paging, this may not be the tota...Gets the number of all cached records including the ones currently filtered
If using paging, this may not be the total size of the dataset.
Available since: Touch 2.0.2
Returns
- Number
The number of all Records in the Store's cache.
Get the Record at the specified index. ...Get the Record at the specified index.
Available since: 1.1.0
Parameters
- index : Number
The index of the Record to find.
Returns
- Ext.data.Model
The Record at the passed index. Returns undefined if not found.
getAutoSync( ) : Boolean getBatchListeners( ) : ObjectprivateReturns an object which is passed in as the listeners argument to proxy.batch inside this.sync. ...Returns an object which is passed in as the listeners argument to proxy.batch inside this.sync.
This is broken out into a separate function to allow for customisation of the listeners
Available since: 1.1.0
Returns
- Object
The listeners object
Get the Record with the specified id. ...Get the Record with the specified id.
Available since: 1.1.0
Parameters
- id : String
The id of the Record to find.
Returns
- Ext.data.Model
The Record with the passed id. Returns undefined if not found.
Gets the number of cached records. ...Gets the number of cached records. Note that filtered records are not included in this count
If using paging, this may not be the total size of the dataset.
Available since: 1.1.0
Returns
- Number
The number of Records in the Store's cache.
getGetGroupString( ) : FunctiondeprecatedReturns the value of getGroupString. ... getGroupDir( ) : String getGrouper( ) : Object[] Returns an array containing the result of applying the grouper to the records in this store. ...Returns an array containing the result of applying the grouper to the records in this store. See groupField,
groupDir and grouper. Example for a store containing records with a color field:
var myStore = Ext.create('Ext.data.Store', {
groupField: 'color',
groupDir : 'DESC'
});
myStore.getGroups(); //returns:
[
{
name: 'yellow',
children: [
//all records where the color field is 'yellow'
]
},
{
name: 'red',
children: [
//all records where the color field is 'red'
]
}
]
Available since: 1.1.0
Parameters
- groupName : String (optional)
Pass in an optional groupName argument to access a specific group as defined by grouper
Returns
Retrieves the id of this component. ...Retrieves the id of this component. Will autogenerate an id if one has not already been set.
Available since: 2.0.0
Returns
- String
id
getListeners( ) : Object getManagedListeners( object, eventName )private getNewRecords( ) : Ext.data.Model[]Returns all Model instances that are either currently a phantom (e.g. ...Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not
yet been saved on this Store (this happens when adding a non-phantom record from another Store into this one).
Available since: 1.1.0
Returns
- Ext.data.Model[]
The Model instances.
getPageSize( ) : Number Returns a range of Records between specified indices. ...Returns a range of Records between specified indices.
Available since: 1.1.0
Parameters
- startIndex : Number (optional)
The starting index (defaults to 0)
- endIndex : Number (optional)
The ending index (defaults to the last Record in the Store)
Returns
- Ext.data.Model[]
An array of Records
getRemovedRecords( ) : Ext.data.Model[]Returns any records that have been removed from the store but not yet destroyed on the proxy. ...Returns any records that have been removed from the store but not yet destroyed on the proxy.
Available since: 1.1.0
Returns
- Ext.data.Model[]
The removed Model instances
getStoreId( ) : String getUpdatedRecords( ) : Ext.data.Model[]Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy. ...Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy.
Available since: 1.1.0
Returns
- Ext.data.Model[]
The updated Model instances.
Get the index within the cache of the passed Record. ...Get the index within the cache of the passed Record.
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The Ext.data.Model object to find.
Returns
- Number
The index of the passed Record. Returns -1 if not found.
Initialize configuration for this class. ...Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 2.0.0
Parameters
- instanceConfig : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
insert( index, records )Inserts Model instances into the Store at the given index and fires the add event. ...Inserts Model instances into the Store at the given index and fires the add event.
See also add.
Available since: 1.1.0
Parameters
- index : Number
The start index at which to insert the passed Records.
- records : Ext.data.Model[]
An Array of Ext.data.Model objects to add to the cache.
isAutoLoading( ) : BooleanReturns true if the Store is set to autoLoad or is a type which loads upon instantiation. ...Returns true if the Store is set to autoLoad or is a type which loads upon instantiation.
Available since: 2.0.0
Returns
This method tells you if this store has a grouper defined on it. ...This method tells you if this store has a grouper defined on it.
Available since: 2.0.0
Returns
- Boolean
true if this store has a grouper defined.
Returns true if the Store has been loaded. ...Returns true if the Store has been loaded.
Available since: 2.0.0
Returns
- Boolean
True if the Store has been loaded
Returns true if the Store is currently performing a load operation ...Returns true if the Store is currently performing a load operation
Available since: 1.1.0
Returns
- Boolean
True if the Store is currently loading
last( ) : Ext.data.Model/undefinedConvenience function for getting the last model instance in the store ...Convenience function for getting the last model instance in the store
Available since: 1.1.0
Returns
- Ext.data.Model/undefined
The last model instance in the store, or undefined
load( [options], [scope] )Loads data into the Store via the configured proxy. ...Loads data into the Store via the configured proxy. This uses the Proxy to make an
asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved
instances into the Store and calling an optional callback if required. Example usage:
store.load({
callback: function(records, operation, success) {
// the operation object contains all of the details of the load operation
console.log(records);
},
scope: this
});
If only the callback and scope options need to be specified, then one can call it simply like so:
store.load(function(records, operation, success) {
console.log('loaded records');
}, this);
Available since: 1.1.0
Parameters
- options : Object/Function (optional)
config object, passed into the Ext.data.Operation object before loading.
- scope : Object (optional)
Scope for the function.
loadData( data, append )deprecatedLoads an array of data straight into the Store ...Loads an array of data straight into the Store
Available since: 1.1.0
Parameters
- data : Ext.data.Model[]/Object[]
Array of data to load. Any non-model instances will be cast into model instances first
- append : Boolean
True to add the records to the existing records in the store, false to remove the old ones first
loadPage( page, options )Loads a given 'page' of data by setting the start and limit values appropriately. ... Adds Model instance to the Store. ...Adds Model instance to the Store. This method accepts either:
- An array of Model instances or Model configuration objects.
- Any number of Model instance or Model configuration object arguments.
The new Model instances will be added at the end of the existing collection.
Sample usage:
myStore.add({some: 'data2'}, {some: 'other data2'});
This method has been deprecated since 2.0.0
Please use add instead.
Available since: 1.1.0
Parameters
- model : Ext.data.Model[]/Ext.data.Model...
An array of Model instances
or Model configuration objects, or variable number of Model instance or config arguments.
Returns
- Ext.data.Model[]
The model instances that were added
mon( object, eventName, [fn], [scope], [options] )deprecatedAlias for addManagedListener. ...Alias for addManagedListener.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed.
This method has been deprecated since 2.0.0
This is now done automatically
Available since: 2.0.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the eventName parameter was an event name, this is the handler function.
- scope : Object (optional)
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
- options : Object (optional)
If the eventName parameter was an event name, this is the
addListener options.
mun( object, eventName, [fn], [scope] )deprecatedAlias for removeManagedListener. ...Alias for removeManagedListener.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed.
This method has been deprecated since 2.0.0
This is now done automatically
Available since: 2.0.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the eventName parameter was an event name, this is the handler function.
- scope : Object (optional)
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
nextPage( options ) on( eventName, fn, [scope], [options], [order] )Alias for addListener. ...Alias for addListener.
Appends an event handler to this object. You can review the available handlers by looking at the 'events'
section of the documentation for the component you are working with.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener:
container.on('tap', this.handleTap, 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:
container.on({
tap : this.onTap,
swipe: this.onSwipe,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
container.on({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to listen for. May also be an object who's property names are
event names.
- fn : Function
The method the event invokes. Will be called with arguments given to
fireEvent plus the options parameter described below.
- scope : Object (optional)
The scope (this reference) in which the handler function is executed. If
omitted, defaults to the object which fired the event.
- options : Object (optional)
An object containing handler configuration.
This object may contain any of the following properties:
scope : Object
The scope (this reference) in which the handler function is executed. If omitted, defaults to the object
which fired the event.
delay : Number
The number of milliseconds to delay the invocation of the handler after the event fires.
single : Boolean
True to add a handler to handle just the next firing of the event, and then remove itself.
order : String
The order of when the listener should be added into the listener queue.
If you set an order of before and the event you are listening to is preventable, you can return false and it will stop the event.
Available options are before, current and after. Defaults to current.
buffer : Number
Causes the handler to be delayed by the specified number of milliseconds. If the event fires again within that
time, the original handler is not invoked, but the new handler is scheduled in its place.
element : String
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', {
listeners: {
element: 'element',
tap: function() {
console.log('element tap!');
}
}
});
All components have the element reference, which is the outer most element of the component. Ext.Container also has the
innerElement element which contains all children. In most cases element is adequate.
delegate : String
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar
var container = Ext.create('Ext.Container', {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My Toolbar'
},
{
xtype: 'button',
text: 'My Button'
}
]
});
container.on({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
delegate: 'button',
tap: function() {
alert('Button tapped!');
}
});
- order : String (optional)
The order of when the listener should be added into the listener queue.
Possible values are before, current and after.
Defaults to: 'current'
onAfter( eventName, fn, [scope], [options] )Alias for addAfterListener. ...Alias for addAfterListener.
Appends an after-event handler.
Same as addListener with order set to 'after'.
Available since: 2.0.0
Parameters
onBatchComplete( batch )privateAttached as the 'complete' event listener to a proxy's Batch object. ...Attached as the 'complete' event listener to a proxy's Batch object. Iterates over the batch operations
and updates the Store's internal data MixedCollection.
Available since: 1.1.0
Parameters
- batch : Object
onBatchException( batch, operation )private onBefore( eventName, fn, [scope], [options] )Alias for addBeforeListener. ...Alias for addBeforeListener.
Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set to 'before'.
Available since: 2.0.0
Parameters
onConfigUpdate( names, callback, scope )private onCreateRecords( records, operation, success )privateThese methods are now just template methods since updating the records etc is all taken care of
by the operation itself. ... onDestroyRecords( records, operation, success )private onProxyLoad( operation )privateCalled internally when a Proxy has completed a load request ...Called internally when a Proxy has completed a load request
Available since: 1.1.0
Parameters
- operation : Object
onProxyWrite( operation )privateCallback for any write Operation over the Proxy. ...Callback for any write Operation over the Proxy. Updates the Store's MixedCollection to reflect
the updates provided by the Proxy
Available since: 1.1.0
Parameters
- operation : Object
onUpdateRecords( records, operation, success )private previousPage( options ) Query the cached records in this Store using a filtering function. ...Query the cached records in this Store using a filtering function. The specified function
will be called with each record in this Store. If the function returns true the record is
included in the results.
Available since: 1.1.0
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
- record : Ext.data.Model
The record
to test for filtering. Access field values using Ext.data.Model.get.
- id : Object
The ID of the Record passed.
- scope : Object (optional)
The scope (this reference) in which the function is executed. Defaults to this Store.
Returns
- Ext.util.MixedCollection
Returns an Ext.util.MixedCollection of the matched records
Relays selected events from the specified Observable as if the events were fired by this. ... remove( records )Removes the given record from the Store, firing the 'removerecords' event passing all the instances that are removed. ...Removes the given record from the Store, firing the 'removerecords' event passing all the instances that are removed.
Available since: 1.1.0
Parameters
- records : Ext.data.Model/Ext.data.Model[]
Model instance or array of instances to remove
removeAfterListener( eventName, fn, [scope], [options] )Removes a before-event handler. ...Removes a before-event handler.
Same as removeListener with order set to 'after'.
Available since: 2.0.0
Parameters
removeAll( silent )Remove all items from the store. ...Remove all items from the store.
Available since: 1.1.0
Parameters
- silent : Boolean
Prevent the clear event from being fired.
removeAt( index )Removes the model instance at the given index ...Removes the model instance at the given index
Available since: 1.1.0
Parameters
- index : Number
The record index
removeBeforeListener( eventName, fn, [scope], [options] )Removes a before-event handler. ...Removes a before-event handler.
Same as removeListener with order set to 'before'.
Available since: 2.0.0
Parameters
removeDispatcherListener( selector, name, fn, scope, order )private removeListener( eventName, fn, [scope], [options], [order] )Removes an event handler. ...Removes an event handler.
Available since: 1.1.0
Parameters
- eventName : String
The type of event the handler was associated with.
- fn : Function
The handler to remove. This must be a reference to the function passed into the
addListener call.
- scope : Object (optional)
The scope originally specified for the handler. It must be the same as the
scope argument specified in the original call to addListener or the listener will not be removed.
- options : Object (optional)
Extra options object. See addListener for details.
- order : String (optional)
The order of the listener to remove.
Possible values are before, current and after.
Defaults to: 'current'
removeManagedListener( object, eventName, [fn], [scope] )deprecatedAdds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed. ...Adds listeners to any Observable object (or Element) which are automatically removed when this Component
is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use removeListener.
Available since: 1.1.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the eventName parameter was an event name, this is the handler function.
- scope : Object (optional)
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
resumeEvents( )Resumes firing events (see suspendEvents). ...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.
Available since: 1.1.0
setAutoLoad( autoLoad ) setAutoSync( autoSync ) setDestroyRemovedRecords( destroyRemovedRecords )Sets the value of destroyRemovedRecords. ...Sets the value of destroyRemovedRecords.
Available since: 2.0.1
Parameters
- destroyRemovedRecords : Boolean
setFields( fields ) setFilters( filters ) setGetGroupString( getGroupString )deprecatedSets the value of getGroupString. ...Sets the value of getGroupString.
This method has been deprecated
Available since: 2.0.0
Parameters
- getGroupString : Function
setGroupDir( groupDir ) setGrouper( grouper ) setListeners( listeners ) setModel( model ) setPageSize( pageSize ) setProxy( proxy )Sets the value of proxy. ...Sets the value of proxy.
Available since: 1.1.0
Parameters
- proxy : String/Ext.data.proxy.Proxy/Object
setSorters( sorters ) setStoreId( storeId ) sort( sorters, defaultDirection, [where] )Sorts the data in the Store by one or more of its properties. ...Sorts the data in the Store by one or more of its properties. Example usage:
// sort by a single field
myStore.sort('myField', 'DESC');
// sorting by multiple fields
myStore.sort([
{
property : 'age',
direction: 'ASC'
},
{
property : 'name',
direction: 'DESC'
}
]);
Internally, Store converts the passed arguments into an array of Ext.util.Sorter instances, and delegates
the actual sorting to its internal Ext.util.Collection.
When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code:
store.sort('myField');
store.sort('myField');
is equivalent to this code:
store.sort('myField', 'ASC');
store.sort('myField', 'DESC');
because Store handles the toggling automatically.
If the remoteSort configuration has been set to true, you will have to manually call the load
method after you sort to retrieve the sorted data from the server.
Available since: 1.1.0
Parameters
- sorters : String/Ext.util.Sorter[]
Either a string name of one of the fields in this Store's configured
Model, or an array of sorter configurations.
- defaultDirection : String
The default overall direction to sort the data by. Defaults to "ASC".
- where : String (optional)
This can be either 'prepend' or 'append'. If you leave this undefined
it will clear the current sorters.
Get the reference to the class from which this object was instantiated. ...Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
Available since: 2.0.0
Returns
suspendEvents( queueSuspended )Suspends the firing of all events. ...Suspends the firing of all events. (see resumeEvents)
Available since: 1.1.0
Parameters
- queueSuspended : Boolean
Pass as true to queue up suspended events to be fired
after the resumeEvents call instead of discarding all suspended events.
sync( )Synchronizes the Store with its Proxy. ...Synchronizes the Store with its Proxy. This asks the Proxy to batch together any new, updated
and deleted records in the store, updating the Store's internal representation of the records
as each operation completes.
Available since: 1.1.0
un( eventName, fn, [scope], [options], [order] )Alias for removeListener. ...Alias for removeListener.
Removes an event handler.
Available since: 1.1.0
Parameters
- eventName : String
The type of event the handler was associated with.
- fn : Function
The handler to remove. This must be a reference to the function passed into the
addListener call.
- scope : Object (optional)
The scope originally specified for the handler. It must be the same as the
scope argument specified in the original call to addListener or the listener will not be removed.
- options : Object (optional)
Extra options object. See addListener for details.
- order : String (optional)
The order of the listener to remove.
Possible values are before, current and after.
Defaults to: 'current'
unAfter( eventName, fn, [scope], [options] )Alias for removeAfterListener. ...Alias for removeAfterListener.
Removes a before-event handler.
Same as removeListener with order set to 'after'.
Available since: 2.0.0
Parameters
unBefore( eventName, fn, [scope], [options] )Alias for removeBeforeListener. ...Alias for removeBeforeListener.
Removes a before-event handler.
Same as removeListener with order set to 'before'.
Available since: 2.0.0
Parameters
updateGrouper( grouper, oldGrouper )private updateStoreId( storeId, oldStoreId )private
Adds Model instance to the Store. This method accepts either:
- An array of Model instances or Model configuration objects.
- Any number of Model instance or Model configuration object arguments.
The new Model instances will be added at the end of the existing collection.
Sample usage:
myStore.add({some: 'data2'}, {some: 'other data2'});
Available since: 1.1.0
Parameters
- model : Ext.data.Model[]/Ext.data.Model...
An array of Model instances or Model configuration objects, or variable number of Model instance or config arguments.
Returns
- Ext.data.Model[]
The model instances that were added
Appends an after-event handler.
Same as addListener with order set to 'after'.
Available since: 2.0.0
Parameters
Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set to 'before'.
Available since: 2.0.0
Parameters
Adds the specified events to the list of events which this Observable may fire.
This method has been deprecated since 2.0
It's no longer needed to add events before firing.
Available since: 1.1.0
Parameters
Appends an event handler to this object. You can review the available handlers by looking at the 'events' section of the documentation for the component you are working with.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener:
container.on('tap', this.handleTap, 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:
container.on({
tap : this.onTap,
swipe: this.onSwipe,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
container.on({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to listen for. May also be an object who's property names are event names.
- fn : Function
The method the event invokes. Will be called with arguments given to fireEvent plus the
optionsparameter described below. - scope : Object (optional)
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - options : Object (optional)
An object containing handler configuration.
This object may contain any of the following properties:
scope : Object
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event.delay : Number
The number of milliseconds to delay the invocation of the handler after the event fires.
single : Boolean
True to add a handler to handle just the next firing of the event, and then remove itself.
order : String
The order of when the listener should be added into the listener queue.
If you set an order of
beforeand the event you are listening to is preventable, you can returnfalseand it will stop the event.Available options are
before,currentandafter. Defaults tocurrent.buffer : Number
Causes the handler to be delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
element : String
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', { listeners: { element: 'element', tap: function() { console.log('element tap!'); } } });All components have the
elementreference, which is the outer most element of the component. Ext.Container also has theinnerElementelement which contains all children. In most caseselementis adequate.delegate : String
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar var container = Ext.create('Ext.Container', { items: [ { xtype: 'toolbar', docked: 'top', title: 'My Toolbar' }, { xtype: 'button', text: 'My Button' } ] }); container.on({ // Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate delegate: 'button', tap: function() { alert('Button tapped!'); } });
- order : String (optional)
The order of when the listener should be added into the listener queue. Possible values are
before,currentandafter.Defaults to:
'current'
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use addListener.
Available since: 1.1.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the
eventNameparameter was an event name, this is the handler function. - scope : Object (optional)
If the
eventNameparameter was an event name, this is the scope in which the handler function is executed. - options : Object (optional)
If the
eventNameparameter was an event name, this is the addListener options.
A model instance should call this method on the Store it has been joined to.
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The model instance that was edited
A model instance should call this method on the Store it has been joined to.
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The model instance that was edited
- modifiedFieldNames : String[]
Array of field names changed during edit.
This gets called by a record after is gets erased from the server.
Available since: 2.0.0
Parameters
- record : Object
A model instance should call this method on the Store it has been joined to..
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The model instance that was edited
We are using applyData so that we can return nothing and prevent the this.data property to be overridden.
Available since: 2.0.0
Parameters
- data : Object
Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Available since: 2.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject from the current method, for example:this.callOverridden(arguments)
Returns
- Object
Returns the result of calling the overridden method
Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
This can be used with an override as follows:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // calls original My.Derived constructor
}
});
var obj = new My.Derived();
alert(obj.x); // now alerts 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
Lastly, it also works with overridden static methods.
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // now alerts 40
Available since: 2.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject from the current method, for example:this.callParent(arguments)
Returns
- Object
Returns the result of calling the parent method
Reverts to a view of the Record cache with no filtering applied.
Available since: 1.1.0
Parameters
- suppressEvent : Boolean (optional)
True to clear silently without firing the
refreshevent.Defaults to:
false
Removes all listeners for this object.
Available since: 1.1.0
Calls the specified function for each of the Records in the cache.
Available since: 1.1.0
Parameters
Filters the loaded set of records by a given set of filters.
Filtering by single field:
store.filter("email", /\.com$/);
Using multiple filters:
store.filter([
{property: "email", value: /\.com$/},
{filterFn: function(item) { return item.get("age") > 10; }}
]);
Using Ext.util.Filter instances instead of config objects (note that we need to specify the root config option in this case):
store.filter([
Ext.create('Ext.util.Filter', {property: "email", value: /\.com$/, root: 'data'}),
Ext.create('Ext.util.Filter', {filterFn: function(item) { return item.get("age") > 10; }, root: 'data'})
]);
If the remoteFilter configuration has been set to true, you will have to manually call the load method after you filter to retrieve the filtered data from the server.
Available since: 1.1.0
Parameters
- filters : Object[]/Ext.util.Filter[]/String
The set of filters to apply to the data. These are stored internally on the store, but the filtering itself is done on the Store's MixedCollection. See MixedCollection's filter method for filter syntax. Alternatively, pass in a property string.
- value : String (optional)
value to filter by (only if using a property string as the first argument).
- anyMatch : Boolean (optional)
True to allow any match, false to anchor regex beginning with
^.Defaults to:
false - caseSensitive : Boolean (optional)
True to make the filtering regex case sensitive.
Defaults to:
false
Filter by a function. The specified function will be called for each Record in this Store. If the function returns true the Record is included, otherwise it is filtered out.
Available since: 1.1.0
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
- record : Ext.data.Model
The record to test for filtering. Access field values using Ext.data.Model.get.
- id : Object
The ID of the Record passed.
- record : Ext.data.Model
- scope : Object (optional)
The scope (
thisreference) in which the function is executed. Defaults to this Store.
Finds the index of the first matching Record in this store by a specific field value.
Available since: 1.1.0
Parameters
- fieldName : String
The name of the Record field to test.
- value : String/RegExp
Either a string that the field value should begin with, or a RegExp to test against the field.
- startIndex : Number (optional)
The index to start searching at
- anyMatch : Boolean (optional)
True to match any part of the string, not just the beginning
- caseSensitive : Boolean (optional)
True for case sensitive comparison
- exactMatch : Boolean (optional)
True to force exact match (^ and $ characters added to the regex). Defaults to false.
Returns
- Number
The matched index or -1
Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
Available since: 1.1.0
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
- record : Ext.data.Model
The record to test for filtering. Access field values using Ext.data.Model.get.
- id : Object
The ID of the Record passed.
- record : Ext.data.Model
- scope : Object (optional)
The scope (
thisreference) in which the function is executed. Defaults to this Store. - startIndex : Number (optional)
The index to start searching at
Returns
- Number
The matched index or -1
Finds the index of the first matching Record in this store by a specific field value.
Available since: 1.1.0
Parameters
- fieldName : String
The name of the Record field to test.
- value : Object
The value to match the field against.
- startIndex : Number (optional)
The index to start searching at
Returns
- Number
The matched index or -1
Finds the first matching Record in this store by a specific field value.
Available since: 1.1.0
Parameters
- fieldName : String
The name of the Record field to test.
- value : String/RegExp
Either a string that the field value should begin with, or a RegExp to test against the field.
- startIndex : Number (optional)
The index to start searching at
- anyMatch : Boolean (optional)
True to match any part of the string, not just the beginning
- caseSensitive : Boolean (optional)
True for case sensitive comparison
- exactMatch : Boolean (optional)
True to force exact match (^ and $ characters added to the regex). Defaults to false.
Returns
- Ext.data.Model
The matched record or null
Fires the specified event with the passed parameters and execute a function (action) at the end if there are no listeners that return false.
Available since: 2.0.0
Parameters
Fires the specified event with the passed parameters (minus the event name, plus the options object passed
to addListener).
The first argument is the name of the event. Every other argument passed will be available when you listen for the event.
Example
Firstly, we set up a listener for our new event.
this.on('myevent', function(arg1, arg2, arg3, arg4, options, e) {
console.log(arg1); // true
console.log(arg2); // 2
console.log(arg3); // { test: 'foo' }
console.log(arg4); // 14
console.log(options); // the options added when adding the listener
console.log(e); // the event object with information about the event
});
And then we can fire off the event.
this.fireEvent('myevent', true, 2, { test: 'foo' }, 14);
An event may be set to bubble up an Observable parent hierarchy by calling enableBubble.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to fire.
- args : Object...
Variable number of parameters are passed to handlers.
Returns
- Boolean
returns false if any of the handlers return false otherwise it returns true.
Convenience function for getting the first model instance in the store
Available since: 1.1.0
Returns
- Ext.data.Model/undefined
The first model instance in the store, or undefined
Gets the number of all cached records including the ones currently filtered If using paging, this may not be the total size of the dataset.
Available since: Touch 2.0.2
Returns
- Number
The number of all Records in the Store's cache.
Get the Record at the specified index.
Available since: 1.1.0
Parameters
- index : Number
The index of the Record to find.
Returns
- Ext.data.Model
The Record at the passed index. Returns undefined if not found.
Returns an object which is passed in as the listeners argument to proxy.batch inside this.sync. This is broken out into a separate function to allow for customisation of the listeners
Available since: 1.1.0
Returns
- Object
The listeners object
Get the Record with the specified id.
Available since: 1.1.0
Parameters
- id : String
The id of the Record to find.
Returns
- Ext.data.Model
The Record with the passed id. Returns undefined if not found.
Gets the number of cached records. Note that filtered records are not included in this count If using paging, this may not be the total size of the dataset.
Available since: 1.1.0
Returns
- Number
The number of Records in the Store's cache.
Returns an array containing the result of applying the grouper to the records in this store. See groupField, groupDir and grouper. Example for a store containing records with a color field:
var myStore = Ext.create('Ext.data.Store', {
groupField: 'color',
groupDir : 'DESC'
});
myStore.getGroups(); //returns:
[
{
name: 'yellow',
children: [
//all records where the color field is 'yellow'
]
},
{
name: 'red',
children: [
//all records where the color field is 'red'
]
}
]
Available since: 1.1.0
Parameters
- groupName : String (optional)
Pass in an optional groupName argument to access a specific group as defined by grouper
Returns
Retrieves the id of this component. Will autogenerate an id if one has not already been set.
Available since: 2.0.0
Returns
- String
id
Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not yet been saved on this Store (this happens when adding a non-phantom record from another Store into this one).
Available since: 1.1.0
Returns
- Ext.data.Model[]
The Model instances.
Returns a range of Records between specified indices.
Available since: 1.1.0
Parameters
- startIndex : Number (optional)
The starting index (defaults to 0)
- endIndex : Number (optional)
The ending index (defaults to the last Record in the Store)
Returns
- Ext.data.Model[]
An array of Records
Returns any records that have been removed from the store but not yet destroyed on the proxy.
Available since: 1.1.0
Returns
- Ext.data.Model[]
The removed Model instances
Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy.
Available since: 1.1.0
Returns
- Ext.data.Model[]
The updated Model instances.
Get the index within the cache of the passed Record.
Available since: 1.1.0
Parameters
- record : Ext.data.Model
The Ext.data.Model object to find.
Returns
- Number
The index of the passed Record. Returns -1 if not found.
Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 2.0.0
Parameters
- instanceConfig : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
Inserts Model instances into the Store at the given index and fires the add event.
See also add.
Available since: 1.1.0
Parameters
- index : Number
The start index at which to insert the passed Records.
- records : Ext.data.Model[]
An Array of Ext.data.Model objects to add to the cache.
Returns true if the Store is set to autoLoad or is a type which loads upon instantiation.
Available since: 2.0.0
Returns
This method tells you if this store has a grouper defined on it.
Available since: 2.0.0
Returns
- Boolean
true if this store has a grouper defined.
Returns true if the Store has been loaded.
Available since: 2.0.0
Returns
- Boolean
True if the Store has been loaded
Returns true if the Store is currently performing a load operation
Available since: 1.1.0
Returns
- Boolean
True if the Store is currently loading
Convenience function for getting the last model instance in the store
Available since: 1.1.0
Returns
- Ext.data.Model/undefined
The last model instance in the store, or undefined
Loads data into the Store via the configured proxy. This uses the Proxy to make an asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved instances into the Store and calling an optional callback if required. Example usage:
store.load({
callback: function(records, operation, success) {
// the operation object contains all of the details of the load operation
console.log(records);
},
scope: this
});
If only the callback and scope options need to be specified, then one can call it simply like so:
store.load(function(records, operation, success) {
console.log('loaded records');
}, this);
Available since: 1.1.0
Parameters
- options : Object/Function (optional)
config object, passed into the Ext.data.Operation object before loading.
- scope : Object (optional)
Scope for the function.
Loads an array of data straight into the Store
Available since: 1.1.0
Parameters
- data : Ext.data.Model[]/Object[]
Array of data to load. Any non-model instances will be cast into model instances first
- append : Boolean
True to add the records to the existing records in the store, false to remove the old ones first
Adds Model instance to the Store. This method accepts either:
- An array of Model instances or Model configuration objects.
- Any number of Model instance or Model configuration object arguments.
The new Model instances will be added at the end of the existing collection.
Sample usage:
myStore.add({some: 'data2'}, {some: 'other data2'});
This method has been deprecated since 2.0.0
Please use add instead.
Available since: 1.1.0
Parameters
- model : Ext.data.Model[]/Ext.data.Model...
An array of Model instances or Model configuration objects, or variable number of Model instance or config arguments.
Returns
- Ext.data.Model[]
The model instances that were added
Alias for addManagedListener.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0.0
This is now done automatically
Available since: 2.0.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the
eventNameparameter was an event name, this is the handler function. - scope : Object (optional)
If the
eventNameparameter was an event name, this is the scope in which the handler function is executed. - options : Object (optional)
If the
eventNameparameter was an event name, this is the addListener options.
Alias for removeManagedListener.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0.0
This is now done automatically
Available since: 2.0.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the
eventNameparameter was an event name, this is the handler function. - scope : Object (optional)
If the
eventNameparameter was an event name, this is the scope in which the handler function is executed.
Alias for addListener.
Appends an event handler to this object. You can review the available handlers by looking at the 'events' section of the documentation for the component you are working with.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener:
container.on('tap', this.handleTap, 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:
container.on({
tap : this.onTap,
swipe: this.onSwipe,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
container.on({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
Available since: 1.1.0
Parameters
- eventName : String
The name of the event to listen for. May also be an object who's property names are event names.
- fn : Function
The method the event invokes. Will be called with arguments given to fireEvent plus the
optionsparameter described below. - scope : Object (optional)
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - options : Object (optional)
An object containing handler configuration.
This object may contain any of the following properties:
scope : Object
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event.delay : Number
The number of milliseconds to delay the invocation of the handler after the event fires.
single : Boolean
True to add a handler to handle just the next firing of the event, and then remove itself.
order : String
The order of when the listener should be added into the listener queue.
If you set an order of
beforeand the event you are listening to is preventable, you can returnfalseand it will stop the event.Available options are
before,currentandafter. Defaults tocurrent.buffer : Number
Causes the handler to be delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
element : String
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', { listeners: { element: 'element', tap: function() { console.log('element tap!'); } } });All components have the
elementreference, which is the outer most element of the component. Ext.Container also has theinnerElementelement which contains all children. In most caseselementis adequate.delegate : String
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar var container = Ext.create('Ext.Container', { items: [ { xtype: 'toolbar', docked: 'top', title: 'My Toolbar' }, { xtype: 'button', text: 'My Button' } ] }); container.on({ // Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate delegate: 'button', tap: function() { alert('Button tapped!'); } });
- order : String (optional)
The order of when the listener should be added into the listener queue. Possible values are
before,currentandafter.Defaults to:
'current'
Alias for addAfterListener.
Appends an after-event handler.
Same as addListener with order set to 'after'.
Available since: 2.0.0
Parameters
Attached as the 'complete' event listener to a proxy's Batch object. Iterates over the batch operations and updates the Store's internal data MixedCollection.
Available since: 1.1.0
Parameters
- batch : Object
Alias for addBeforeListener.
Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set to 'before'.
Available since: 2.0.0
Parameters
Called internally when a Proxy has completed a load request
Available since: 1.1.0
Parameters
- operation : Object
Callback for any write Operation over the Proxy. Updates the Store's MixedCollection to reflect the updates provided by the Proxy
Available since: 1.1.0
Parameters
- operation : Object
Query the cached records in this Store using a filtering function. The specified function will be called with each record in this Store. If the function returns true the record is included in the results.
Available since: 1.1.0
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
- record : Ext.data.Model
The record to test for filtering. Access field values using Ext.data.Model.get.
- id : Object
The ID of the Record passed.
- record : Ext.data.Model
- scope : Object (optional)
The scope (
thisreference) in which the function is executed. Defaults to this Store.
Returns
- Ext.util.MixedCollection
Returns an Ext.util.MixedCollection of the matched records
Removes the given record from the Store, firing the 'removerecords' event passing all the instances that are removed.
Available since: 1.1.0
Parameters
- records : Ext.data.Model/Ext.data.Model[]
Model instance or array of instances to remove
Removes a before-event handler.
Same as removeListener with order set to 'after'.
Available since: 2.0.0
Parameters
Remove all items from the store.
Available since: 1.1.0
Parameters
- silent : Boolean
Prevent the
clearevent from being fired.
Removes the model instance at the given index
Available since: 1.1.0
Parameters
- index : Number
The record index
Removes a before-event handler.
Same as removeListener with order set to 'before'.
Available since: 2.0.0
Parameters
Removes an event handler.
Available since: 1.1.0
Parameters
- eventName : String
The type of event the handler was associated with.
- fn : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
- scope : Object (optional)
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to addListener or the listener will not be removed.
- options : Object (optional)
Extra options object. See addListener for details.
- order : String (optional)
The order of the listener to remove. Possible values are
before,currentandafter.Defaults to:
'current'
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use removeListener.
Available since: 1.1.0
Parameters
- object : Ext.mixin.Observable/HTMLElement
The item to which to add a listener/listeners.
- eventName : Object/String
The event name, or an object containing event name properties.
- fn : Function (optional)
If the
eventNameparameter was an event name, this is the handler function. - scope : Object (optional)
If the
eventNameparameter was an event name, this is the scope in which the handler function is executed.
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.
Available since: 1.1.0
Sets the value of destroyRemovedRecords.
Available since: 2.0.1
Parameters
- destroyRemovedRecords : Boolean
Sets the value of getGroupString.
This method has been deprecated
Available since: 2.0.0
Parameters
- getGroupString : Function
Sets the value of proxy.
Available since: 1.1.0
Parameters
- proxy : String/Ext.data.proxy.Proxy/Object
Sorts the data in the Store by one or more of its properties. Example usage:
// sort by a single field
myStore.sort('myField', 'DESC');
// sorting by multiple fields
myStore.sort([
{
property : 'age',
direction: 'ASC'
},
{
property : 'name',
direction: 'DESC'
}
]);
Internally, Store converts the passed arguments into an array of Ext.util.Sorter instances, and delegates the actual sorting to its internal Ext.util.Collection.
When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code:
store.sort('myField');
store.sort('myField');
is equivalent to this code:
store.sort('myField', 'ASC');
store.sort('myField', 'DESC');
because Store handles the toggling automatically.
If the remoteSort configuration has been set to true, you will have to manually call the load method after you sort to retrieve the sorted data from the server.
Available since: 1.1.0
Parameters
- sorters : String/Ext.util.Sorter[]
Either a string name of one of the fields in this Store's configured Model, or an array of sorter configurations.
- defaultDirection : String
The default overall direction to sort the data by. Defaults to "ASC".
- where : String (optional)
This can be either 'prepend' or 'append'. If you leave this undefined it will clear the current sorters.
Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
Available since: 2.0.0
Returns
Suspends the firing of all events. (see resumeEvents)
Available since: 1.1.0
Parameters
- queueSuspended : Boolean
Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events.
Synchronizes the Store with its Proxy. This asks the Proxy to batch together any new, updated and deleted records in the store, updating the Store's internal representation of the records as each operation completes.
Available since: 1.1.0
Alias for removeListener.
Removes an event handler.
Available since: 1.1.0
Parameters
- eventName : String
The type of event the handler was associated with.
- fn : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
- scope : Object (optional)
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to addListener or the listener will not be removed.
- options : Object (optional)
Extra options object. See addListener for details.
- order : String (optional)
The order of the listener to remove. Possible values are
before,currentandafter.Defaults to:
'current'
Alias for removeAfterListener.
Removes a before-event handler.
Same as removeListener with order set to 'after'.
Available since: 2.0.0
Parameters
Alias for removeBeforeListener.
Removes a before-event handler.
Same as removeListener with order set to 'before'.
Available since: 2.0.0
Parameters
Static Methods addConfig( config, fullMerge )privatestatic addMember( name, member )chainableprivatestatic addMembers( members )chainablestaticAdd methods / properties to the prototype of this class. ...Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 2.0.0
Parameters
- members : Object
Add / override static properties of this class. ...Add / override static properties of this class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
Available since: 2.0.0
Parameters
- members : Object
Returns
- Ext.Base
this
Borrow another class' members to the prototype of this class. ...Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
Available since: 2.0.0
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : Array/String
The names of the members to borrow
Returns
- Ext.Base
this
Create a new instance of this Class. ...Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
Available since: 2.0.0
Returns
- Object
the created instance.
createAlias( alias, origin )staticCreate aliases for existing prototype methods. ...Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
Available since: 2.0.0
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format. ...Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
Available since: 2.0.0
Returns
- String
className
mixin( name, mixinClass )privatestatic onExtended( fn, scope )chainableprivatestatic Override members of this class. ...Override members of this class. Overridden methods can be invoked via
callParent.
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
As of 4.1, direct use of this method is deprecated. Use Ext.define
instead:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
The above accomplishes the same result but can be managed by the Ext.Loader
which can properly order the override and its target class and the build process
can determine whether the override is needed based on the required state of the
target class (My.Cat).
This method has been deprecated since 4.1.0
Please use Ext.define instead
Available since: 2.0.0
Parameters
- members : Object
The properties to add to this class. This should be
specified as an object literal containing one or more properties.
Returns
- Ext.Base
this class
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 2.0.0
Parameters
- members : Object
Add / override static properties of this class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
Available since: 2.0.0
Parameters
- members : Object
Returns
- Ext.Base
this
Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
Available since: 2.0.0
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : Array/String
The names of the members to borrow
Returns
- Ext.Base
this
Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
Available since: 2.0.0
Returns
- Object
the created instance.
Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
Available since: 2.0.0
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
Available since: 2.0.0
Returns
- String
className
Override members of this class. Overridden methods can be invoked via callParent.
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
As of 4.1, direct use of this method is deprecated. Use Ext.define instead:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).
This method has been deprecated since 4.1.0
Please use Ext.define instead
Available since: 2.0.0
Parameters
- members : Object
The properties to add to this class. This should be specified as an object literal containing one or more properties.
Returns
- Ext.Base
this class
Events
Fired when one or more new Model instances have been added to this Store. You should listen for this event if you have to update a representation of the records in this store in your UI. If you need the indices of the records that were added please use the store.indexOf(record) method.
Available since: 2.0.0
Parameters
- store : Ext.data.Store
The store
- records : Ext.data.Model[]
The Model instances that were added
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled. Note that you should not listen for this event in order to refresh the data view. Use the refresh event for this instead.
Available since: 1.1.0
Parameters
- store : Ext.data.Store
This Store
- operation : Ext.data.Operation
The Ext.data.Operation object that will be passed to the Proxy to load the Store
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fired before a call to sync is executed. Return false from any listener to cancel the synv
Available since: 1.1.0
Parameters
- options : Object
Hash of all records to be synchronized, broken down into create, update and destroy
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fired after the removeAll method is called. Note that you should not listen for this event in order to refresh the data view. Use the refresh event for this instead.
Available since: 2.0.0
Parameters
- this : Ext.data.Store
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires whenever records have been loaded into the store. Note that you should not listen for this event in order to refresh the data view. Use the refresh event for this instead.
Available since: 1.1.0
Parameters
- this : Ext.data.Store
- records : Ext.util.Grouper[]
An array of records
- successful : Boolean
True if the operation was successful.
- operation : Ext.data.Operation
The associated operation
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires whenever the server has sent back new metadata to reconfigure the Reader.
Available since: 2.0.0
Parameters
- this : Ext.data.Store
- data : Object
The metadata sent back from the server
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires whenever the records in the Store have changed in a way that your representation of the records need to be entirely refreshed.
Available since: 2.0.0
Parameters
- this : Ext.data.Store
The data store
- data : Ext.util.Collection
The data collection containing all the records
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fired when one or more Model instances have been removed from this Store. You should listen for this event if you have to update a representation of the records in this store in your UI.
Available since: 2.0.0
Parameters
- store : Ext.data.Store
The Store object
- records : Ext.data.Model[]
The Model instances that was removed
- indices : Number[]
The indices of the records that were removed. These indices already take into account any potential earlier records that you remove. This means that if you loop over the records, you can get its current index in your data representation from this array.
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires when a Model instance has been updated
This event has been removed since 2.0
Listen to updaterecord instead.
Available since: 1.1.0
Parameters
- this : Ext.data.Store
- record : Ext.data.Model
The Model instance that was updated
- newIndex : Number
If the update changed the index of the record (due to sorting for example), then this gives you the new index in the store.
- oldIndex : Number
If the update changed the index of the record (due to sorting for example), then this gives you the old index in the store.
- modifiedFieldNames : Array
An array containing the field names that have been modified since the record was committed or created
- modifiedValues : Object
An object where each key represents a field name that had it's value modified, and where the value represents the old value for that field. To get the new value in a listener you should use the get method.
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires when a Model instance has been updated
Available since: 2.0.0
Parameters
- this : Ext.data.Store
- record : Ext.data.Model
The Model instance that was updated
- newIndex : Number
If the update changed the index of the record (due to sorting for example), then this gives you the new index in the store.
- oldIndex : Number
If the update changed the index of the record (due to sorting for example), then this gives you the old index in the store.
- modifiedFieldNames : Array
An array containing the field names that have been modified since the record was committed or created
- modifiedValues : Object
An object where each key represents a field name that had it's value modified, and where the value represents the old value for that field. To get the new value in a listener you should use the get method.
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Fires whenever a successful write has been made via the configured Proxy
Available since: 2.0.0
Parameters
- store : Ext.data.Store
This Store
- operation : Ext.data.Operation
The Operation object that was used in the write
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.