【问题标题】：Combo box loads too slow组合框加载太慢
【发布时间】：2012-06-23 02:51:57
【问题描述】：

我的页面现在加载速度非常慢。基本上，我想预先填充我拥有的组合框。现在，它单独预填充每个，然后选择默认值。这太慢了。在页面完全加载之前，用户将需要等待大约一分钟。

我正在获取值以从服务器填充组合框。预先选择组合框值的值通过响应变量在数组中接收。如何加快整个过程？

代码如下：

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

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

获取预选值的 PHP

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

【问题讨论】：

您使用的是哪个版本的 Extjs（直到次要版本，例如：4.1.0）？另外，这些商店中有多少条记录？回答这些问题确实有助于我们更详细地了解您的情况。

标签： php extjs combobox extjs4

【解决方案1】：

如果您的每个商店的记录少于 300 条，并且您的页面上并没有真正“那么多”商店，那么您应该立即从 php 中返回所有内容（或者最好使用页面自己加载，但听起来你不能这样做）。因此，与其在一个 ajax 调用中获取组合框中所选项目的值，不如将其想象成这样：

为每个商店定义模型：

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

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

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

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

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

然后将 ajax 请求更改为如下所示：

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 :)
    },

});

这将为您提供适合您情况的最佳性能。如果这不起作用，您将不得不使用代理商店来处理服务器端的所有内容并根据需要加载数据。

【讨论】：

【解决方案2】：

首先，我建议不要检索每个组合的完整值列表，直到用户需要它（更改值或单击触发器时）。您可以通过为您的组合提供一个设置了指向您的 URL 的代理的商店来做到这一点。

为了节省显示的初始单值，一种选择是将字符串值和 id 存储在您的记录中（或者可能不存储它，例如，但无论如何将其发送给客户端）。但是，这并不是那么好，并且在摆脱了完整的列表请求之后，加载时间可能会足够快。如果不是，请尝试查看是否可以请求在一个请求中显示所有单个值。

【讨论】：