2012-06-22 5 views
1

Моя страница загружает супер медленно прямо сейчас. В принципе, я хочу предварительно заполнить поля со списком, которые у меня есть. Прямо сейчас, он предварительно заполняет каждый отдельно, а затем выбирает значение по умолчанию. Это так медленно. Пользователь должен будет подождать около минуты, прежде чем страница будет полностью загружена.Слишком медленная загрузка Combo box

Я захватываю значения, чтобы заполнить поля со списком с сервера. Значения для предварительного выбора значения combo box принимаются в массиве через переменную ответа. Как мне ускорить весь этот процесс?

код ниже:

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 ПОЛУЧИТЬ COMBO BOX ЗНАЧЕНИЯ

//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 
+0

Какую версию Extjs вы используете точно (вплоть до незначительной версии, например: 4.1.0)? Кроме того, сколько записей в каждом из этих магазинов? Ответ на эти вопросы действительно поможет нам подробнее разобраться в вашей ситуации. – Reimius

ответ

4

Если ваши магазины имеют менее 300 записей, и на вашей странице не так много «магазинов», что вам нужно сделать, это вернуть все с php сразу (или, более предпочтительно, загрузить все магазины с самой загрузкой страницы, но похоже, что вы не можете этого сделать). Таким образом, вместо того, чтобы ваш один АЯКС вызова получать значения выбранного элемента в выпадающем списке, думать о нем, как это:

Defined свои модели для каждого из магазинов:

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 .модель данных. Объект возврата для моего примера будет выглядеть следующим образом (данные массив массив):

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

}); 

Это даст вам максимально возможная производительность для вас. Если это не сработает, вам придется использовать магазины с прокси-серверами, которые обрабатывают все на стороне сервера и загружают данные по мере необходимости.

0

Во-первых, я Рекомендую не извлекать полный список значений для каждой комбо до тех пор, пока он не понадобится пользователю (либо при изменении значения, либо при нажатии на триггер). Вы можете сделать это, предоставив свой комбо хранилище, настроенное с прокси-сервером на ваш URL-адрес.

Чтобы сохранить исходное однозначное отображение, одним из вариантов будет сохранение строкового значения, а также идентификатор в вашей записи (или, может быть, его не сохранить, скажем, но отправить его клиенту так или иначе). Однако это не так уж хорошо, и время загрузки может быть достаточно быстрым после избавления от запросов полного списка. Если это не так, попробуйте посмотреть, можете ли вы запросить ВСЕ одно значение, отображаемое в одном запросе.