0
votes

I have a list linked to a store filled with Facebook friends. It contains around 350 records. There is a searchfield at the top of the list which triggers the following function on keyup:

  filterList: function (value) {
    // console.time(value);
    if (value === null) return;

    var searchRegExp = new RegExp(value, 'g' + 'i'),
        all = Ext.getStore('Friends'),
        recent = Ext.getStore('Recent'),
        myFilter;

    all.clearFilter();
    recent.clearFilter();

    // console.log(value, searchRegExp);

    myFilter = function (record) {
      return searchRegExp.test(record.get('name'));
    }

    all.filter(myFilter);
    recent.filter(myFilter);
    // console.timeEnd(value);
  },

Now, this used to work fine with ST2.1.1 but since I upgraded the app to ST2.2. It's really slow. It even makes Safari freeze and crash on iOS...

This is what the logs give :

t /t/gi Friends.js:147
t: 457ms Friends.js:155
ti /ti/gi Friends.js:147
ti: 6329ms Friends.js:155
tit /tit/gi Friends.js:147
tit: 7389ms Friends.js:155
tito /tito/gi Friends.js:147
tito: 7137ms 

Does anyone know why it behaves like this now, or does anyone have a better filter method.

Update

Calling clearFilter with a true paramater seems to speed up things, but it's not as fast as before yet.

Update

It actually has nothing to do with filtering the store.

It has to do with rendering list-items. Sencha apparently create a list-item for every record I have in the store instead of just creating a couple of list-items and reusing them

enter image description here

Could there be an obvious reason it's behaving this way ?

1

1 Answers

5
votes

Do you have the "infinite" config on your list set to true?

You probably don't want the list rendering 300+ rows at once, so setting that flag will reduce the amount of DOM that gets generated.