Combo box loads too slow

Question

My page loads super slow right now. Basically, i want to pre-populate the combo boxes that i have. Right now, it pre-populates each one individually and then selects the default value. This is so slow. The user will have to wait about a minute before the page is fully loaded.

I'm grabbing the values to populate the combo boxes from a server. The values to pre-select the combo box value are received in an array through the response variable. How do i speed this whole process up?

Code is below:

EXTJS

                    xtype: "combo",
                    width: 250,
                    id: "nameId",
                    name: "comboName",
                    labelStyle: 'width:100px',
                    fieldLabel:"Name",
                    allowBlank: true,
                    displayField: "nameDisplay",
                    valueField: "nameValue",
                    url: "/thelink/toGetAllComboboxValues/fromPHPFile/",



return {
    init: function (args) {

        formPanel.on({

            beforerender: function () {

                Ext.Ajax.request({
                    url: 'url/to/another/PHP/file/',
                    scope: this,
                    method: 'GET',
                    params: {
                        code_id: 'myUser',
                        number: '12345'
                    },

                    success: function (response, opts) {
                        var result = Ext.decode(response.responseText);
              Ext.getCmp('nameId').setValue(result.Name);

                    },

                });


            },

            scope: this
        });

      //add form panel here
    },

    getFormPanel: function () {

        return formPanel;
    },



    // load parameter values into the form
    loadParams: function () {

    },
    goHome: function () {

    },


};
}();

PHP TO GET COMBO BOX VALUES

//makes call to server for each individual combo box values

PHP TO GET PRE-SELECTED VALUES

//grabs all pre-selected values based on an ID and puts them in an array

Answer 1

If your stores each has less than about 300 records, and there aren't really 'that' many stores on your page, what you should do is return everything from the php at once (or more preferably load all the stores with the page load itself, but it sounds like you can't do that). So, instead of your one ajax call getting the values of the selected item in the combobox, think of it more like this:

Defined your models for each of the stores:

Ext.define("MyModel1", {
    extend: "Ext.data.Model",
    fields: [
        {name:"field_code", type:"string"},
        {name:"field_value",      type:"string"}
    ]
});

Then define each of your stores in a very simple manner, notice that I left out the reader and proxy that you are probably currently including, for improved performance, use Ext.data.ArrayStore because it removes the necessity for each item in a record to have a named attribute (this reduces the text returned from the server and also the parsing time on the frontend):

var myStore = Ext.create("Ext.data.ArrayStore", {
    model: "MyModel1",
    data:  []
});

Now in the ajax request that you already defined, add in the response from php all the data for the stores as attributes in the json object returned, and do them as array arrays making sure the element order matches how you defined the Ext.data.Model. The return object for my example would look something like this (the data is the array array):

{
    my_combobox_value1: "CAD",
    my_combobox_data1: [
        ["CAD","Somthing for display of this record"],
        ["AN","Another Entry]
    ]
}

Then change the ajax request to look something like this:

Ext.Ajax.request({
    url: 'url/to/another/PHP/file/',
    scope: this,
    method: 'GET',
    params: {
        code_id: 'myUser',
        number: '12345'
    },

    success: function (response, opts) {
         var result = Ext.decode(response.responseText);
         myStore.loadData(result.my_combobox_data1);
         Ext.getCmp('nameId').setValue(result.my_combobox_value1);
         ... and rinse and repeat for all stores, make sure you set the value for each combobox after the store has been loaded :)
    },

});

This will give you the best possible performance for you situation. If this does not work, you will have to use stores with proxies that handle everything on the server side and load data as needed.

Answer 2

First, I'd recommend not retrieving the full value list for each combo until the user needs it (either when changing the value or clicking the trigger). You can do this by giving your combo a store that is set up with a Proxy to your URL.

In order to save on the initial single-values displaying, one option would be to store the string value as well as the id in your record (or maybe not store it, per say, but send it down to the client anyway). However, this isn't that nice, and the load time may be fast enough after getting rid of the full list requests. If it isn't, try seeing if you can request ALL the single value displays in one request.