Combo 6000 records

[bkraut]

Hi,

I have a lot of data which I have to display in combo box, Not one but 6 or 10. Thousands of records in each combo. The server processes the data in miliseconds, but then I wait for combo to become active several seconds. I guess that dom manipulation is very slow. I need all the data loaded in the store under a second. Is this possible somehow?

I read some posts about this before and I'm surprissed that there is so little of it.
I read that for several thousands of records combo box is not suitable, but I disagree - anyway there is no replace for it.

Any help appreciated.

[catacaustic]

You are never going to get a ComboBox with 6000 entries to run fast. You'll just have to live with that limitation. By the way, that's a limitation of Javascript speed in the browser, and nothing to do with this (or any other) library.

However, you do have two options. Both of them will help out your system.

Option 1: A paging ComboBox. Set up the ComboBox to have a paged result set. That way you can have 100 or so items on each page. This will take extra calls back to the server to get something closer to the end, and will take a fair bit of time ot get through, but you won't be loading, and rendering, everything at once.

Option 2 (my prefered option): Instead of a standard ComboBox, set up a search box that provides options as the user types. There's examples of this in the docs - http://www.extjs.com/deploy/dev/exam...um-search.html so this should be easy to implement. The only drawback to this method is that users will have to have a vague idea of what they are looking for in the first place, but I'd hope that with 6000 entries to show, the users would have some vague idea of what they wanted.

[Animal]

Either page it, or filter it bsaed on typed characters.

[bkraut]

Actually I allready have paging combo, but in the beginning when a form loads, this component runs a few second to initialize the form value.

Anyway, how can then I load just a page with selected form value?

[Animal]

What does it do? Something at form load time? You mean when the form loads data from the server, or when the form is rendered

And what does it do? And why (you can tell from reading your code, and possibly stepping through)

[bkraut]

Hi Animal,

actually I have combo stores set to autoLoad: true, as when the form loads a right value has to be selected and initialized.

So on form show event I load form data. But all the dependent stores (those for combos) are loaded on class initialization. So this combo loading takes some time and fields of the form are blank until combos finish loading.

It is also true, that I have this piece of code for combos to display the right values from their stores.

Ext.override(Ext.form.ComboBox, {
    setValue : function(v){
//      Store not loaded yet? Set value when it *is* loaded.
        if (this.store.getCount() == 0) {
            this.store.on('load', this.setValue.createDelegate(this, [v]), null, {single: true});
            return;
        }
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    }
}); 

[Animal]

So it loads all 6000 rows just to set one value?

I assume there is a different value and display field, and that the Store needs to be loaded so that the value field can be put into the hidden?

[bkraut]

Exactly. Imagine this - If I load a form of an Account, I have an address, postal code and settlement.

Just for our country there is 6000 settlement records.

[Animal]

Load just the row you want.

[mschwartz]

Sounds like a good use for autocomplete.