组合框加载太慢 [英] Combo box loads too slow

问题描述

我的网页现在加载超慢。基本上，我想预先填充我拥有的组合框。现在，它会单独预先填充每个，然后选择默认值。这太慢了用户必须等待大约一分钟才能完成页面的填充。

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?

代码如下：

                    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获取COMBO BOX值

PHP TO GET COMBO BOX VALUES

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

PHP获取预先选择的值

PHP TO GET PRE-SELECTED VALUES

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

推荐答案

如果你的商店每个都有不到300条记录，在您的页面上没有真正的这么多商店，您应该做的是一次从PHP返回所有内容（或者更好地将所有商店加载到页面加载本身，但是听起来你不能这样做）。所以，而不是你的一个ajax调用获取组合框中所选项目的值，想一想这样：

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"}
    ]
});

然后以非常简单的方式定义每个商店，注意我省略了读者和代理您可能目前正在使用Ext.data.ArrayStore包含改进的性能，因为它消除了记录中每个项目具有命名属性的必要性（这减少了从服务器返回的文本以及前端的解析时间） ）：

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:  []
});

现在，在已经定义的ajax请求中，添加来自php的所有数据，存储作为返回的json对象中的属性，并将其作为数组数组，确保元素顺序与您定义Ext.data.Model的方式相匹配。我的示例的返回对象看起来像这样（数据是数组）：

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]
    ]
}

然后更改ajax请求，看起来像这样：

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.

这篇关于组合框加载太慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！