ExtJs：通过Json Response填充ComboBox

Question

我正在使用Extjs 5.1从AJAX调用返回的数据填充组合框。

AJAX调用返回产品名称，但是组合框用逗号分隔填充单行中的数据（要求是用另一行填充每行中的项）。

组合框逻辑

{
    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调用请求返回Map。

但是组合框中的数据用逗号分隔。

请指导我对脚本进行任何更改，以将其填充到每一行中。

谢谢 拉姆

Answer 1

您的代码有点令人困惑，但是我看到您使用了一些不必要的方法，例如beforequery事件，循环安装数组等。我将建议另一种方法，使其更符合框架的功能。

由于您的Combox为editable: false，因此请使用select事件而不是beforequery来调用第二个组合框填充。要填充它，而不是直接使用Ext.Ajax.request，可能更有趣的是配置商店的proxy.api并在设置第一个组合框中选择的参数之后使用Ext.data.Store.html method 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();

    }
});

在链接上签出文档。

任何问题，请发表评论。 希望对您有所帮助。