Skip to main content

Ext4 Apply Store Filtering

In extjs4.1:
There are many way for store filtering . Some of code i give here

Filtering by single field:
store.filter('eyeColor', 'Brown');
 

Alternatively, if filters are configured with an id, then existing filters store may be replacedby new filters having the same id.
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'})
]);
 
When store is filtered, most of the methods for accessing store data will be working only within the set of filtered records. Two notable exceptions are queryBy and  getById.
 
====================================
Filtering and sorting after the Store has been instantiated is 
also easy.
you can write this code in store when store is create  
 
filters: [{
         property: 'firstName',
         value: /Ed/
     }] 
============================================
filters : Object[]/Function[]
Array of Filters for this store. Can also be passed array of functions which will be used as the filterFn config for filters:
filters: [ 
 function(item) { 
 return item.internalId > 0;  
} ] 
To filter after the grid is loaded use the filterBy function.
============================================= 
filterOnLoad : Boolean
If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, ignored if  remoteFilter  is true
Defaults to: true
======================================= 
clearFilter( [suppressEvent] )1
Reverts to a view of the Record cache with no filtering applied.

  • suppressEvent : Boolean (optional)
    If true the filter is cleared silently.
    For a locally filtered Store, this means that the filter collection is cleared without firing the datachanged event.
    For a remotely filtered Store, this means that the filter collection is cleared, but the store is not reloaded from the server.
 That doesn't have the same result as store.clearFilter. If you don't want to load the data again use store.clearFilter(true)


There is difference between clearFilter() and filters.clear(). the boolean parameter of clearFilter() does Not prevent the store to be refreshed for e.g in a Grid, as you can see in the Documentation clearFilters(true) clears silently, means datachanged event doesn't fire. So if you want clearing your filters without refreshing the whole data and reloading the grid, as Davis said store.filters.clear() is the right way.

================================ 

For example if you filter a store a couple of times with the line
store.filter([{property: "email", value: "mail"}]) 
 
 
 
the Store.filters collection will contain several instances of the same filter. Maybe this is desired in some cases? But I actually expected the filter property value (ie "email" in the case above) to be the "id" or key for the underlying MixedCollection, so when filtering again with the same property, it would replace the old filter value. As a workaround you could use
store.filter([{id: "email", property: "email", value: "mail"}])when filtering again.

 
==========================
IMO this is a bug, Ext.data.AbstractStore#filters should be created this way in Ext.data.AbstractStore#constructor:
me.filters = Ext.create('Ext.util.MixedCollection', false,function (o) { return o.property; });
=======================


store.clearFilter();
store.filter([
    Ext.create('Ext.util.Filter', {filterFn: function(item) {
        item.get('geraete_bez')
    }})
]);
 
 
========================
 filterBy( fn, [scope] )1
Filters 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.
When store is filtered, most of the methods for accessing store data will be working only within the set of filtered records. Two notable exceptions are queryBy and getById.




filterBy: function(fn, scope) {
        var me = this;

        me.snapshot = me.snapshot || me.data.clone();
        me.data = me.queryBy(fn, scope || me);
        me.fireEvent('datachanged', me);
        me.fireEvent('refresh', me);
    },

=========================


queryBy( fn, [scope] ) 

Query all 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.
This method is not effected by filtering, it will always look from all records inside the store no matter if filter is applied or not.



fn : Function
The function to be called. It will be passed the following parameters:

============================== 
 
 find( fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] ) : number

  • 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
    Defaults to: 0
  • anyMatch : Boolean (optional)
    True to match any part of the string, not just the beginning
    Defaults to: false
  • caseSensitive : Boolean (optional)
    True for case sensitive comparison
    Defaults to: false
  • exactMatch : Boolean (optional)
    True to force exact match (^ and $ characters added to the regex).
    Defaults to: false

Returns

  • Number
    The matched index or -1



    =========
    findBy( fn, [scope], [startIndex] ) : Number1
    Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
    When store is filtered, finds records only within filter.
    ===============
    findExact( fieldName, value, [startIndex] ) : Number
    Finds the index of the first matching Record in this store by a specific field value. ...
    findRecord( fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] ) :
    Finds the first matching Record in this store by a specific field value. ...

Comments

Popular posts from this blog

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to

EXT JS 4: EMPTY VALUE IN A COMBOBOX

EXT JS 4: EMPTY VALUE IN A COMBOBOX Often, in an Ext JS combobox, it is difficult to go back to an empty value once you have selected an item, particularly if “forceSelection” is set to true.  Here is my roundup of alternative solutions found from around the web… 1. Override beforeBlur The solution from   http://www.sencha.com/forum/showthread.php?182119-How-To-Re-Empty-ComboBox-when-forceSelection-is-Set-To-TRUE  overrides beforeBlur on the combbox to clear out lastSelection.  Here is a copy of the override from the thread: 1 2 3 4 5 6 7 8 9 10 11 12 13 Ext.create( 'Ext.form.field.ComboBox' , {      ...      allowBlank: true ,      forceSelection: true ,      beforeBlur: function (){          var value = this .getRawValue();          if (value == '' ){              this .lastSelection = [];          }          this .doQueryTask.cancel();         this .assertValue();      } }); Or to apply the o