Perf issue on List.

[eilijah]

Hello,


we currently got a need about getting a list of around 1500 elements which needs to be filtered by categories, title and search. The data structure is barely like this :

<root>	<domain label="d1", categories="1,2,4", isDomain="true">	 	<element label="my e1", categories="1,4", isDomain="false">	 	<element label="e2", categories="2", isDomain="false">	 	<element label="e3", categories="4", isDomain="false">	</domain>	<domain label="d2", categories="3,4", isDomain="true">	 	<element label="my e4", categories="4", isDomain="false">	 	<element label="e5", categories="3", isDomain="false">	 	<element label="e6", categories="3,4", isDomain="false">	</domain>	...</root>

The corresponding GUI is a menu list of category sets which can contains only 1 category of each domains.
ex :
cat1 = [1,3]
cat2 = [2]
etc...


then we got a List diplaying the domain and a search bar.
so basically the list shows :
- "d1"
- "d2"


When we tap an element on a not searched list (with only domains), we then get all the element of the taped model. ex tap on 'd1' :
- "d1 my e1"
- "d1 e2"
- "d1 e3"


On this list the client requires an indexBar, which seems to impeach to make a smaller list being loaded part by part (which could maybe filtered faster).


When we do a search the list is filtered not only on the domain Labels but on the element Labels too, if i enter "my" i got the following result :
- "d1 my e1"
- "d2 my e4"


At the moment we are loading the webservice at the start of the application thats make less visible the time consumed by loading the 1,5K elements. But when we select some categories in the menu, then the filter on the stores takes a lot of time it's about 8s on iphone 4... I'm not even talking on older android devices.
If we dont make this first filter and going on the full list of element and type a search, the filtering takes a lot of times too.


We did think about getting a model structure with associations like :

	
Ext.define ("Domain", {
	config: {
		fields: [
			{ name: 'label', type: 'string' },
			{ name: 'categories', type: 'auto' }
		],
		associations: [{
			type: 'hasMany',
			model: 'Element'
			...
		}]
	}
});

It seems cleaner and then we could first check categories only on domains then check the categories which belongs to those domains.
But then how to filters all the nested stores and get a List with all these elements?
So we finally flatted the data structure to get :

{ name: 'domainLabel', type: 'string' },
{ name: 'domainCategories', type: 'auto' },
{ name: 'elementLabel', type: 'string' },
{ name: 'elementCategories', type: 'auto' },
{ name: 'isDomain', type: 'boolean' }

then filtering only Domains is easy :

this.getStore().filter(function(record) {
	return record.get('isDomain');
});

And filter on cats :

this.getStore().filter(function(record) {
	var choosedCats = [1,3,5]; // example
	var elementCats = record.get('categories');
	for (var i = 0, il = elementCats.length; i < il; i++) {
		for (var j = 0, jl = choosedCats.length; j < jl; j++) {
			if (choosedCats[j] === elementCats[i])
				return choosedCats[j];
		}
	}
	return false;
});

Of course the easier way would be to filter server side but it's not possible, the client dont want to do that. ANY help is welcome, we passed already a lot of time on this without success.


best regards.

[mitchellsimoens]

What I would suggest is to use remote filtering and load the store when needed which the filter should send back the filter data that you can handle on the server side and only return what you need. Locally filtering 1,500 records will take a little bit no matter what you do.

[eilijah]

That's impossible, we cannot ask that to our client.
What we finally did is getting the datas with a simple Ext.Ajax request then we made a class for holding and filtering the datas. When we create the Lists we are making the filter on the data arrays in the class and then we fill the list with the result, like that :

var rs = [];
for (var i = 0, il = brands.length; i < il; i++) {
   rs.push(brands[i].copy());
};
myStore.getData().addAll(rs);

This is the fastest way we found. Filters on stores and the store functions of setData() and add() are pretty slow, whatever the kind of filter we used. So filtering our own way and filling the MixedCollection is much faster.

note that the code i just paste is like 20 ms to execute on desktop, the following is around 1 s :

for (var i = 0, il = brands.length; i < il; i++) {
   myStore.add(brands[i].copy());
};

ty