ExtJs: заполнить ComboBox из Json Response

Question

Я использую Extjs 5.1 для заполнения комбинированного списка данными, возвращаемыми из вызова AJAX.

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

Логика Combo Box

{
    xtype: 'combo',
    queryMode: 'remote',
    itemId: 'prodListCombo',
    name: 'prodNumber',
    emptyText: '-- Select Product --',
    width: '290px',
    height: '32px',
    autoSelect: false,
    enableKeyEvents: true,
    selectOnFocus: false,
    minChars: 1,
    padding: '0 0 0 5',

    listConfig: {
        maxHeight: 110,
        emptyText: 'No Products found.'
    },
    triggerAction: 'all',
    displayField: 'prodNumber',
    store: productStore,
    editable: false,
    typeAhead: false,
    forceSelection: true,
    dataIndex: 'prodNumber',
    lastQuery: '',
    listeners: {
        click: function(grid, rowIndex, colIndex) {

        },
        beforequery: function(queryPlan, eOpts) {
            var prodInstore = "";
            var prodInstoreArrray = [];
            //MMACMF-74
            Prod_Num = Ext.ComponentQuery.query('#prodListCombo')[0];

            Ext.Ajax.request({
                url: MaintenanceAdvisor.util.AppUrls.appurls.getCustomerProds,
                method: 'GET',
                params: {
                    "customerName": 'CUST A'
                },
                success: function(response) {
                    debugger;
                    var response2 = Ext.decode(response.responseText);
                    var datafiles = response2.data; ** -- > datafiles has the data of PROD A and PROD B. **


                        if (datafiles.length === 0) {

                        } else {
                            store.removeAll();
                            store.add(datafiles);
                            Ext.ComponentQuery.query("#prodListCombo")[0].setValue(store.getData('prodNumber').items);

                            for (var iProd = 0; iProd < datafiles.length; iProd++) {
                                var ProdId = store.getAt(iProd).data.prodNumber;

                                prodInstore += ProdId;
                                prodInstore += ',';

                            }
                            prodInstore = prodInstore.substr(0, prodInstore.length - 1);
                            prodInstoreArrray = prodInstore.split(",");

                            //Ext.ComponentQuery.query("#prodListCombo")[0].setValue(prodInstoreArrray);

                        }
                },
                failure: function(response) {
                    alert("failed");
                }
            });

        } //beforequery
    } //listeners
},

Ответ JSON

datafiles: Array(2)
0:
    id: "CustomerCenter-31"
    customerName: null
    customerType: "OPERATOR"
    **productNumber: "PROD A"**
    __proto__: Object
1:
    id: "CustomerCenter-32"
    customerName: null
    customerType: "OPERATOR"
    **productNumber: "PROD B"**
    __proto__: Object
length: 2

Java-код возвращает карту для запроса вызова AJAX.

Но данные в выпадающем списке указаны через запятую.

Пожалуйста, сообщите мне о любых изменениях в скрипте, чтобы заполнить его в каждой строке.

Спасибо Рамм

Answer 1

Ваш код немного сбивает с толку, но я вижу, что вы использовали некоторые ненужные подходы, такие как событие beforequery, цикл для монтирования массива и так далее.Я предложу другой подход, более соответствующий возможностям фреймворка.

Поскольку ваш комбокс имеет значение editable: false, используйте событие select вместо beforequery, чтобы вызвать вторую заполнение комбинированного списка.Чтобы заполнить его, вместо непосредственного использования Ext.Ajax.request, может быть интереснее сконфигурировать proxy.api хранилища и использовать метод Ext.data.Store.html load событие после установки параметра, выбранного в первом выпадающем списке.Хранилище должно иметь связанное свойство model или fields, заполненное теми же свойствами, что и возвращаемый JSON.

Я использовал Jakeplaceholder Fake Online REST API для настройкиПример:

Ext.application({
    name : 'Fiddle',

    launch : function() {

        var firstStore = Ext.create('Ext.data.Store', {
            proxy: {
                type: 'ajax',
                api: {
                    read: 'https://jsonplaceholder.typicode.com/albums'
                }
            },
            fields: [
                { name: 'id' },
                {  name: 'title' }
            ]
        });

        var secondStore = Ext.create('Ext.data.Store', {
            proxy: {
                type: 'ajax',
                api: {
                    read: 'https://jsonplaceholder.typicode.com/photos'
                }
            },
            fields: [
                { name: 'id'  },
                { name: 'title' }
            ]
        });

        Ext.create('Ext.window.Window', {
            title: 'Test Ajax Combobox',
            layout: 'form',
            maximized: true,
            items: [
                {
                    xtype: 'combobox',
                    label: 'First Combo',
                    editable: false,
                    valueField: 'id',
                    displayField: 'title',
                    store: firstStore,
                    listeners: {
                        select: function(field, record, e){
                            field.next().reset();

                            alert('Selected a new item on first combobox store.');
                            field.up('window').mask('Wait...');
                            secondStore.load({
                                params: {
                                    albumId: record.get('id')
                                },
                                callback: function(){
                                    field.up('window').unmask();
                                    alert('Arrived the response of the request and automatically filled the second combobox store.');
                                }
                            });

                            // Or...
                            // secondStore.getProxy().setExtraParam('albumId',  record.get('id'));
                            // secondStore.reload({
                            //     callback: function(){
                            //         field.up('window').unmask();
                            //         alert('Arrived the response of the request and automatically filled the second combobox store.');
                            //     }
                            // });
                        }
                    }
                },
                {
                    xtype: 'combobox',
                    editable: false,
                    label: 'Second Combo',
                    store: secondStore,
                    valueField: 'id',
                    displayField: 'title'
                }
            ]
        }).show();

    }
});

Проверьте документацию по ссылкам.

Любые вопросы, оставьте комментарий.Надеюсь, это поможет.