1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    31
    Answers
    1
    Vote Rating
    0
    eilijah is on a distinguished road

      0  

    Default Answered: Perf issue on List.

    Answered: Perf issue on List.


    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 :
    HTML Code:
    <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 :
    Code:
    	
    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 :
    Code:
    { 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 :
    Code:
    this.getStore().filter(function(record) {
    	return record.get('isDomain');
    });

    And filter on cats :
    Code:
    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.

  2. 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 :
    Code:
    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 :
    Code:
    for (var i = 0, il = brands.length; i < il; i++) {
       myStore.add(brands[i].copy());
    };

    ty

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    31
    Answers
    1
    Vote Rating
    0
    eilijah is on a distinguished road

      0  

    Default


    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 :
    Code:
    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 :
    Code:
    for (var i = 0, il = brands.length; i < il; i++) {
       myStore.add(brands[i].copy());
    };

    ty

Thread Participants: 1

Tags for this Thread