Hierarchy
Ext.BaseExt.EventedExt.data.StoreExt.data.NodeStoreExt.data.TreeStoreInherited mixins
Files
Guide
Using StoresThe TreeStore is a store implementation that allows for nested data.
It provides convenience methods for loading nodes, as well as the ability to use the hierarchical tree structure combined with a store. This class also relays many events from the Tree for convenience.
Using Models
If no Model is specified, an implicit model will be created that implements Ext.data.NodeInterface. The standard Tree fields will also be copied onto the Model for maintaining their state. These fields are listed in the Ext.data.NodeInterface documentation.
Reading Nested Data
For the tree to read nested data, the Ext.data.reader.Reader must be configured with a root property, so the reader can find nested data for each node. If a root is not specified, it will default to 'children'.
Config options
This is a private configuration used in the framework whether this Store can be destroyed.
Defaults to: false
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
true to automatically sync the Store with its Proxy after every edit to one of its Records.
Defaults to: false
The event name to bubble, or an Array of event names.
The event name to bubble, or an Array of event names.
Allows the Store to prefetch and cache in a page cache, pages of Records, and to then satisfy loading requirements from this page cache.
To use buffered Stores, initiate the process by loading the first page. The number of rows rendered are determined automatically, and the range of pages needed to keep the cache primed for scrolling is requested and cached. Example:
myStore.loadPage(1); // Load page 1
A BufferedRenderer is instantiated which will monitor the scrolling in the grid, and refresh the view's rows from the page cache as needed. It will also pull new data into the page cache when scrolling of the view draws upon data near either end of the prefetched data.
The margins which trigger view refreshing from the prefetched data are Ext.grid.plugin.BufferedRenderer.numFromEdge, Ext.grid.plugin.BufferedRenderer.leadingBufferZone and Ext.grid.plugin.BufferedRenderer.trailingBufferZone.
The margins which trigger loading more data into the page cache are, leadingBufferZone and trailingBufferZone.
By default, only 5 pages of data are cached in the page cache, with pages "scrolling" out of the buffer as the view moves down through the dataset. Setting this value to zero means that no pages are ever scrolled out of the page cache, and that eventually the whole dataset may become present in the page cache. This is sometimes desirable as long as datasets do not reach astronomical proportions.
Selection state may be maintained across page boundaries by configuring the SelectionModel not to discard records from its collection when those Records cycle out of the Store's primary collection. This is done by configuring the SelectionModel like this:
selModel: {
pruneRemoved: false
}
Defaults to: false
Remove previously existing child nodes before loading. Default to true.
Defaults to: true
true to empty the store when loading another page via loadPage,
nextPage or previousPage. 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
Array of Model instances or data objects to load locally. See "Inline data" above for details.
The root property to specify on the reader if one is not explicitly defined.
Defaults to: 'children'
This configuration allows you to prevent destroying record instances when they are removed from this store and are not in any other store.
Defaults to: true
Returns Ext.util.Collection not just an Object. Use 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.
Returns
Array of Filters for this store. This configuration is handled by the Filterable mixin of the data collection.
Overrides: Ext.data.Store.filters
Set to true to automatically prepend a leaf sorter.
Defaults to: false
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
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"
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'
}
}
});
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 listener's config when you are defining a class using Ext.define().
Instead, only specify listeners when you are instantiating your class with Ext.create().
Returns Ext.data.Model and not a String. Name of the Model associated with this store. The string is used as an argument for Ext.ModelManager.getModel.
The name of the parameter sent to the server which contains the identifier of the node. Defaults to 'node'.
Defaults to: 'node'
The number of records considered to form a 'page'. This is used to power the built-in paging using the nextPage and previousPage functions.
If this Store is buffered, pages are loaded into a page cache before the Store's data is updated from the cache. The pageSize is the number of rows loaded into the cache in one request. This will not affect the rendering of a buffered grid, but a larger page size will mean fewer loads.
In a buffered grid, scrolling is monitored, and the page cache is kept primed with data ahead of the direction of scroll to provide rapid access to data when scrolling causes it to be required. Several pages in advance may be requested depending on various parameters.
It is recommended to tune the pageSize, trailingBufferZone and leadingBufferZone configurations based upon the conditions pertaining in your deployed application.
Defaults to: 25
Parameters to send into the proxy for any CRUD operations
Defaults to: {}
An object or array of objects that will provide custom functionality for this component. The only requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
When a component is created, if any plugins are available, the component will call the init method on each plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide its functionality.
For examples of plugins, see Ext.plugin.PullRefresh and Ext.plugin.ListPaging
Example code
A plugin by alias:
Ext.create('Ext.dataview.List', {
config: {
plugins: 'listpaging',
itemTpl: '<div class="item">{title}</div>',
store: 'Items'
}
});
Multiple plugins by alias:
Ext.create('Ext.dataview.List', {
config: {
plugins: ['listpaging', 'pullrefresh'],
itemTpl: '<div class="item">{title}</div>',
store: 'Items'
}
});
Single plugin by class name with config options:
Ext.create('Ext.dataview.List', {
config: {
plugins: {
xclass: 'Ext.plugin.ListPaging', // Reference plugin by class
autoPaging: true
},
itemTpl: '<div class="item">{title}</div>',
store: 'Items'
}
});
Multiple plugins by class name with config options:
Ext.create('Ext.dataview.List', {
config: {
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull to refresh...'
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}
],
itemTpl: '<div class="item">{title}</div>',
store: 'Items'
}
});
The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance - see setProxy for details.
true to defer any filtering operation to the server. If false, filtering is done locally on the client.
If this is set to true, you will have to manually call the load method after you filter to retrieve the filtered
data from the server.
Buffered stores automatically set this to true. Buffered stores contain an abitrary
subset of the full dataset which depends upon various configurations and which pages have been requested
for rendering. Such sparse datasets are ineligible for local filtering.
Defaults to: false
true to defer any grouping operation to the server. If false, grouping is done locally on the client.
Buffered stores automatically set this to true. Buffered stores contain an abitrary
subset of the full dataset which depends upon various configurations and which pages have been requested
for rendering. Such sparse datasets are ineligible for local grouping.
Defaults to: false
true to defer any sorting operation to the server. If false, sorting is done locally on the client.
If this is set to true, you will have to manually call the load method after you sort, to retrieve the sorted
data from the server.
Buffered stores automatically set this to true. Buffered stores contain an abitrary
subset of the full dataset which depends upon various configurations and which pages have been requested
for rendering. Such sparse datasets are ineligible for local sorting.
Defaults to: false
The root node for this store. For example:
root: {
expanded: true,
text: "My Root",
children: [
{ text: "Child 1", leaf: true },
{ text: "Child 2", expanded: true, children: [
{ text: "GrandChild", leaf: true }
] }
]
}
Setting the root config option is the same as calling setRootNode.
false to not include the root node in this Stores collection.
Defaults to: false
Array of Sorters for this store. This configuration is handled by the Sortable mixin of the data collection. See also the sort method.
Overrides: Ext.data.Store.sorters
Unique identifier for this store. If present, this Store will be registered with the Ext.data.StoreManager, making it easy to reuse elsewhere.
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
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
Properties
Instance properties
The page that the Store has most recently loaded (see loadPage)
Defaults to: 1
Defaults to: {id: 'observable', hooks: {destroy: 'destroy'}}
Overrides: Ext.mixin.Sortable.mixinConfig
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); // dependent 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'
Methods
Instance methods
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'});
Use addData method instead if you have raw data that need to pass through the data reader.
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.
Fires
Appends an after-event handler.
Same as addListener with order set to 'after'.
Parameters
- eventName : String/String[]/Object
The name of the event to listen for.
- fn : Function/String
The method the event invokes.
- scope : Object (optional)
The scope for
fn. - options : Object (optional)
An object containing handler configuration.
Fires
Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set to 'before'.
Parameters
- eventName : String/String[]/Object
The name of the event to listen for.
- fn : Function/String
The method the event invokes.
- scope : Object (optional)
The scope for
fn. - options : Object (optional)
An object containing handler configuration.
Fires
Uses the configured reader to convert the data into records and adds it to the Store. Use this when you have raw data that needs to pass trough converters, mappings and other extra logic from the reader.
If your data is already formated and ready for consumption, use add method.
Parameters
- data : Object[]
Array of data to load
Fires
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.
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.addListener('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.addListener({
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.addListener({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
Parameters
- eventName : String/String[]/Object
The name of the event to listen for. May also be an object who's property names are event names.
- fn : Function/String (optional)
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 (optional)
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - delay : Number (optional)
The number of milliseconds to delay the invocation of the handler after the event fires.
- single : Boolean (optional)
trueto add a handler to handle just the next firing of the event, and then remove itself. - order : String (optional)
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 to:
current - buffer : Number (optional)
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 (optional)
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() { alert('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 (optional)
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.addListener({ // Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate delegate: 'button', tap: function() { alert('Button tapped!'); } });
- scope : Object (optional)
- order : String (optional)
The order of when the listener should be added into the listener queue. Possible values are
before,currentandafter.Defaults to:
'current'
Fires
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.
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.
Parameters
- record : Ext.data.Model
The model instance that was edited.
- modifiedFieldNames : String[]
- modified : Object
Fires
A model instance should call this method on the Store it has been joined to.
Parameters
- record : Ext.data.Model
The model instance that was edited.
- modifiedFieldNames : String[]
Array of field names changed during edit.
- modified : Object
Fires
- addrecords
- beforesync
- filter
- refresh
- sort
Overrides: Ext.data.Store.afterEdit
This gets called by a record after is gets erased from the server.
Parameters
- record : Ext.data.Model
Fires
A model instance should call this method on the Store it has been joined to.
Parameters
- record : Ext.data.Model
The model instance that was edited.
Fires
We are using applyData so that we can return nothing and prevent the this.data
property to be overridden.
Parameters
Fires
Call the original method that was previously overridden with override,
This method is deprecated as callParent does the same thing.
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"
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
To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.
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
This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.
Consider:
Ext.define('Ext.some.Class', {
method: function () {
console.log('Good');
}
});
Ext.define('Ext.some.DerivedClass', {
method: function () {
console.log('Bad');
// ... logic but with a bug ...
this.callParent();
}
});
To patch the bug in DerivedClass.method, the typical solution is to create an
override:
Ext.define('App.paches.DerivedClass', {
override: 'Ext.some.DerivedClass',
method: function () {
console.log('Fixed');
// ... logic but with bug fixed ...
this.callSuper();
}
});
The patch method cannot use callParent to call the superclass method since
that would call the overridden method containing the bug. In other words, the
above patch would only produce "Fixed" then "Good" in the console log, whereas,
using callParent would produce "Fixed" then "Bad" then "Good".
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject from the current method, for example:this.callSuper(arguments)
Returns
- Object
Returns the result of calling the superclass method
Calls the specified function for each of the Records in the cache.
// 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'}
]
}
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
data : [
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Jamie', lastName: 'Avins'}
]
});
store.each(function (item, index, length) {
console.log(item.get('firstName'), index);
});
Parameters
Fills a node with a series of child records.
Parameters
- node : Ext.data.NodeInterface
The node to fill.
- records : Ext.data.Model[]
The records to add.
Fires
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.
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)
trueto allow any match, false to anchor regex beginning with^.Defaults to:
false - caseSensitive : Boolean (optional)
trueto make the filtering regex case sensitive.Defaults to:
false
Fires
- filter
- refresh
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.
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
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.
Fires
- filter
- refresh
Finds the index of the first matching Record in this store by a specific field value.
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)
trueto match any part of the string, not just the beginning. - caseSensitive : Boolean (optional)
truefor case sensitive comparison. - exactMatch : Boolean (optional)
trueto 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.
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
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.
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.
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)
trueto match any part of the string, not just the beginning. - caseSensitive : Boolean (optional)
truefor case sensitive comparison. - exactMatch : Boolean (optional)
trueto force exact match (^ and $ characters added to the regex).Defaults to:
false
Returns
- Ext.data.Model
The matched record or
null.
Fires
Fires the specified event with the passed parameters and execute a function (action)
at the end if there are no listeners that return false.
Parameters
- eventName : String
The name of the event to fire.
- args : Array
Arguments to pass to handers.
- fn : Function
Action.
- scope : Object
Scope of fn.
Returns
Fires
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.
Parameters
- eventName : String
The name of the event to fire.
- args : Object...
Variable number of parameters are passed to handlers.
Returns
- Boolean
Returns
falseif any of the handlers returnfalse.
Fires
Convenience function for getting the first model instance in the store.
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.
Returns
- Number
The number of all Records in the Store's cache.
Get the Record at the specified index.
Parameters
- index : Number
The index of the Record to find.
Returns
- Ext.data.Model/undefined
The Record at the passed index. Returns
undefinedif not found.
Get the Record with the specified id.
Parameters
- id : Object
Returns
- Ext.data.Model/undefined
The Record with the passed id. Returns
undefinedif not found.
Overrides: Ext.data.Store.getById
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.
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'
]
}
]
Parameters
- groupName : String (optional)
Pass in an optional
groupNameargument to access a specific group as defined by grouper.
Returns
Fires
Retrieves the id of this component. Will autogenerate an id if one has not already been set.
Returns
- String
id
Fires
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).
Returns
- Ext.data.Model[]
The Model instances.
Returns a range of Records between specified indices. Note that if the store is filtered, only filtered results are returned.
Parameters
- startIndex : Number (optional)
The starting index.
Defaults to:
0 - endIndex : Number (optional)
The ending index (defaults to the last Record in the Store).
Defaults to:
-1
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.
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.
Returns
- Ext.data.Model[]
The updated Model instances.
Get the index within the cache of the passed Record.
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'
Parameters
- instanceConfig : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
Fires
Inserts Model instances into the Store at the given index and fires the add event.
See also add.
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
Fires
This method tells you if this store has a grouper defined on it.
Returns
- Boolean
trueif this store has a grouper defined.
Fires
Returns true if the Store is currently performing a load operation.
Returns
- Boolean
trueif the Store is currently loading.
Convenience function for getting the last model instance in the store.
Returns
- Ext.data.Model/undefined
The last model instance in the store, or
undefined.
Loads the Store using its configured proxy.
Parameters
- options : Object (optional)
config object. This is passed into the Operation object that is created and then sent to the proxy's Ext.data.proxy.Proxy.read function. The options can also contain a node, which indicates which node is to be loaded. If not specified, it will default to the root node.
Returns
Fires
Overrides: Ext.data.Store.load
Loads an array of data straight into the Store.
Parameters
- data : Ext.data.Model[]/Object[]
Array of data to load. Any non-model instances will be cast into model instances first.
- append : Boolean
trueto add the records to the existing records in the store,falseto remove the old ones first.
Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal
load operation, passing in calculated start and limit params.
Parameters
Fires
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'});
Use addData method instead if you have raw data that need to pass through the data reader.
This method has been deprecated since 2.0.0
Please use add instead.
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.
This method has been deprecated since 2.0.0
This is now done automatically
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.
This method has been deprecated since 2.0.0
This is now done automatically
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.
Loads the next 'page' in the current data set.
Parameters
Fires
Alias for addListener.
Parameters
- eventName : String/String[]/Object
The name of the event to listen for. May also be an object who's property names are event names.
- fn : Function/String (optional)
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 (optional)
The scope (
thisreference) in which the handler function is executed. If omitted, defaults to the object which fired the event. - delay : Number (optional)
The number of milliseconds to delay the invocation of the handler after the event fires.
- single : Boolean (optional)
trueto add a handler to handle just the next firing of the event, and then remove itself. - order : String (optional)
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 to:
current - buffer : Number (optional)
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 (optional)
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() { alert('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 (optional)
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.addListener({ // Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate delegate: 'button', tap: function() { alert('Button tapped!'); } });
- scope : Object (optional)
- order : String (optional)
The order of when the listener should be added into the listener queue. Possible values are
before,currentandafter.Defaults to:
'current'
Called internally when a Proxy has completed a load request.
Parameters
- operation : Object
Fires
Overrides: Ext.data.Store.onProxyLoad
Loads the previous 'page' in the current data set.
Parameters
Fires
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.
Parameters
- fn : Function
The function to be called. It will be passed the following parameters:
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.
Parameters
- records : Ext.data.Model/Ext.data.Model[]
Model instance or array of instances to remove.
Fires
Removes a before-event handler.
Same as removeListener with order set to 'after'.
Parameters
- eventName : String/String[]/Object
The name of the event the handler was associated with.
- fn : Function/String
The handler to remove.
- scope : Object (optional)
The scope originally specified for
fn. - options : Object (optional)
Extra options object.
Fires
Remove all items from the store.
Parameters
- silent : Boolean (optional)
Prevent the
clearevent from being fired.
Fires
Overrides: Ext.data.Store.removeAll
Removes a before-event handler.
Same as removeListener with order set to 'before'.
Parameters
- eventName : String/String[]/Object
The name of the event the handler was associated with.
- fn : Function/String
The handler to remove.
- scope : Object (optional)
The scope originally specified for
fn. - options : Object (optional)
Extra options object.
Fires
Removes an event handler.
Parameters
- eventName : String/String[]/Object
The type of event the handler was associated with.
- fn : Function/String
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'
Fires
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.
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).
Parameters
- discardQueuedEvents : Boolean
Pass as true to discard any queued events.
Private method used to deeply retrieve the children of a record without recursion.
Parameters
- root : Ext.data.NodeInterface
Returns
Fires
Sets the value of getGroupString.
This method has been deprecated
Parameters
- getGroupString : Function
Sets the root node for this tree.
This method has been deprecated
Use setRoot instead.
Parameters
- node : Ext.data.Model
Returns
Fires
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.
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 (optional)
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.
Fires
- refresh
- sort
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
Returns
Suspends the firing of all events.
All events will be queued but you can discard the queued events by passing false in the resumeEvents call
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.
Parameters
- options : Object
Returns
Fires
This is a custom tree sorting algorithm. It uses the index property on each node to determine how to sort siblings. It uses the depth property plus the index to create a weight for each node. This weight algorithm has the limitation of not being able to go more then 80 levels in depth, or more then 10k nodes per parent. The end result is a flat collection being correctly sorted based on this one single sort function.
Parameters
- node1 : Ext.data.NodeInterface
- node2 : Ext.data.NodeInterface
Returns
Alias for removeListener.
Parameters
- eventName : String/String[]/Object
The type of event the handler was associated with.
- fn : Function/String
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'
Static methods
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
// ...
}
});
My.awesome.Cat.addMembers({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat();
kitty.meow();
Parameters
- members : Object
Add / override static properties of this class.
Ext.define('My.cool.Class', {
// this.se
});
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() { ... };
});
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 '$$$$$$$'
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 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()
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'
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 2.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 2.1.0
Please use Ext.define instead
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.
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.
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 sync
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.
Parameters
- this : Ext.data.Store
- eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Returns
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.
Parameters
- this : Ext.data.Store
- records : Ext.data.Model[]
An array of records
- successful : Boolean
trueif 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.
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.
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.
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 whenever the root node changes on this TreeStore.
Parameters
- store : Ext.data.TreeStore
This tree Store
- newRoot : Ext.data.Model
The new root node
- oldRoot : Ext.data.Model
The old root node
- 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.
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
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
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.