ExtJs：从 Json 响应中填充 ComboBox

Posted 2023-02-26

【中文标题】ExtJs：从 Json 响应中填充 ComboBox

【英文标题】：ExtJs : Populate ComboBox from Json Response

【发布时间】：2019-03-06 06:01:37

【问题描述】：

我正在使用 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。

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

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

谢谢 撞锤

【参考方案1】：

您的代码有点混乱，但我看到您使用了一些不必要的方法，例如beforequery 事件、挂载数组的循环等等。我会建议另一种方法，更符合框架的特性。

由于您的组合框是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();

    
);

查看链接上的文档。

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

【讨论】：

我喜欢这种方法，但我不能在我的项目中使用这种方法。谢谢你:)