1. #11
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    BoeckBert is on a distinguished road

      0  

    Default


    @Nilanchala

    Did you find a solution to this problem?
    I am struggling with clearFilter, too... :-(

    Everytime i call clearFilter, my application freezes for about 2sec until clearFilter is completet :-(


  2. #12
    Sencha User
    Join Date
    Nov 2013
    Posts
    32
    Vote Rating
    0
    MarcoScherer is on a distinguished road

      0  

    Default


    Yep, same here. I have a list with about 300 addresses. Searching is fast but everytime I use clearFilter() it takes about 3-4 seconds until the list is displayed again. Any news on this perfomance thing?

  3. #13
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default


    ST seems designed to favor progressive filtering (i.e. filter down to a subset of records, then perform another filter on that subset). Switching between two completely separate filters can require clearing the filter before the second filter is applied. The code below has helped me speed up this switching by removing the need to clear the filter before switching.

    The idea is that once a filter function is applied, one can simply change what happens in that filter function to produce different results. There is no need to change the function itself, or clear the filter. My solution simply provides an easy way to change what happens inside the static filter function. It could probably be improved to accommodate ad-hoc filtering instead of preconfigured, but I haven't found the need to do that yet.

    Override code...
    Code:
    Ext.define('Ext.ux.data.Dex',{
        override:'Ext.data.Store',
        constructor:function(){
            this.callParent(arguments);
            
            var me = this;
            
            if(me.getDexConfig){
                me.dex = {
                    staticFilter:function(record,id){
                        var dexFilter = me.getDexConfig().filters[me.dex.filterKey],
                            regex,testValue;
                        
                        if(dexFilter){
                            regex = me.dex.filterRegex;
                            testValue = dexFilter.testValueGenerator(record,id);
                            if(regex){return regex.test(testValue);}
                            else{return true;}
                        }
                    },
                    initialize:function(){
                        me.filter(new Ext.util.Filter({
                            scope:me,
                            filterFn:me.dex.staticFilter
                        }));
                    },
                    filter:function(filterKey,regexGeneratorParams){
                        var filter = me.getDexConfig().filters[filterKey];
                        
                        //(Re)filter the store without calling clear() as would normally be required
                        me.dex.filterKey = filterKey;
                        me.dex.filterRegex = (filter) ? (filter.regexGenerator(regexGeneratorParams) || /./) : /./;
                        
                        if(filterKey == 'all'){
                            me.clearFilter();
                        }else if(!Ext.Array.every(me.getFilters(),function(filter){return (''+filter.getFilterFn() != ''+me.dex.staticFilter);})){
                            me.filter();
                        }else{
                            me.dex.initialize();
                        }
                    },
                    sort:function(sortKey){
                        me.sort(me.getDexConfig().sortFunctions[sortKey]);
                    }
                }
                me.dex.initialize();
            }
        }
    });
    Configuration inside store/Player.js...
    Code:
    Ext.define('MyApp.store.Player',{
        extend:'Ext.data.Store',
        config:{
            model:'MyApp.model.Player',
            storeId:'Player',
            autoSync:true,
            autoLoad:true,
            
            //Filtering Options
            dexConfig:{
                filters:{
                    none:{
                        testValueGenerator:function(record,id){return true},
                        regexGenerator:function(params){return /false/;}
                    },
                    search:{
                        testValueGenerator:function(record,id){
                            return (record.get('alias') || '') + ' ' + (record.get('name') || '');
                        },
                        regexGenerator:function(params){
                            return (params && params.text) ? new RegExp(params.text,'i') : /./;
                        }
                    },
                    registered:{
                        testValueGenerator:function(record,id){return record.get('uid');},
                        regexGenerator:function(params){return /true/;}
                    }
                },
                sortFunctions:{
                    normal:function(a,b){
                        a = ''+(a.get('alias') || a.get('name'));
                        b = ''+(b.get('alias') || b.get('name'));
                        return (a.toLowerCase() < b.toLowerCase()) ? -1 : 1;
                    }
                }
            }
        }
    });
    View inside view/PlayerList.js
    Code:
    Ext.define('MyApp.view.PlayerList',{
        extend:'Ext.List',
        xtype:'playerlist',
        config:{
            store:'Player',
            
            //Appearance
            itemTpl:'{name}',
            
            //Behavior
            infinite:true,
            scrollable:true,
            
            //Children
            items:[
                {
                    xtype:'toolbar',
                    docked:'top',
                    items:[
                        {
                            xtype:'searchfield',
                            placeholder:'search',
                            cls:'fullwidth'
                        }
                    ]
                }
            ]
        }
    });
    Controller inside controller/PlayerList.js
    Code:
    Ext.define('MyApp.controller.PlayerList',{
        extend:'Ext.app.Controller',
        config:{
            control:{
                'playerlist > toolbar > searchfield':{
                    action:'onSearchKeyUp',
                    keyup:'onSearchKeyUp',
                    change:'onSearchKeyUp'
                }
            }
        },
        onSearchKeyUp:function(field){
            var text = (field) ? field.getValue() : null;
                
            if(text){Ext.getStore('Player').dex.filter('search',{text:text});}
            else{Ext.getStore('Player').dex.filter('all');}
        }
    });

  4. #14
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    Mailmejana is on a distinguished road

      0  

    Default Its Working for me

    Its Working for me


    Hi Bunchofstring
    Excellant idea. your solution decreased my head ache as well. it is working for me. thanks a lot