Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Applying Filters to Stores

Page of 168

You can filter the data within a store using any of the following methods:

Method Description
filter() Filters data in the store by a specified array of filters.
filterBy() Filters data in the store by a specified javascript method.
clearFilter() Removes all filters.

Filters are non-destructive if the store's remoteFilter property is set to false (default).
If remoteFilter is set to true, a data request is made through the store's proxy. The filter conditions are serialized into JSON and transmitted as part of the http GET request as a URL parameter.

Note: In Sencha Touch, calling the filter() or clearFilter() method on a remotely filtered Store does not generate an HTTP request. However, in Ext JS calling the filter() or clearFilter() method on a remotely filtered Store always generates an HTTP request.

Client-side filters can use Javascript regular expression syntax as illustrated by the following code snippet:

// all last names that start with 'A'
Ext.getStore('Sponsors').filter('LASTNAME',/A.*/)

// all emails that end with '.gov'
Ext.getStore('Persons').filter('email',/\.gov$/);

You can apply multiple filters by applying the following syntax:

// all last names that start with 'A' and first names 
// starting with [A-L]

Ext.getStore('Sponsors').filter([
  {property: 'LASTNAME', value: /A.*/},
  {property: 'FIRSTNAME', value: /[A-L].*/}
]);

As illustrated below, the store.filterBy() method enables you to define a custom JavaScript method that receives each record in the store as well as that record's ID. Regardless of how the Store's remoteFilter property is configured, the filterBy() method always executes in the browser.

var states = "DC,MD,VA"; // dynamically assigned in production
				 
store.filterBy(function(rec, id) {
  if (Ext.Array.indexOf(newValue,rec.get('STATE')) >= 0)
    return true;
  else
    return false;
});
Page of 168
comments powered by Disqus