Question

我在extjs应用程序中使用了combobox组件。我想通过json加载列表。但是当我点击组合框时，列表不会显示。请帮助我。

以下是ajax调用：

Ext.Ajax.request({
                            url: 'data/vgroup.json',
                            method: 'Get',
                            timeout: 9000,
                            success: function(response, opts) {
                                var device = Ext.decode(response.responseText);
                                var device_records = new Array();

                                for(var itr=0; itr < device.vgroup.length; itr++) {
                                    var record = new Array();
                                    record[0] = device.vgroup[itr].name;
                                    //alert(device.vgroup[itr].name);
                                    device_records[itr] = record;
                                }

                                vgfrmextension_device = new Ext.data.ArrayStore({
                                    fields: ['name'],
                                    data : device_records
                                });
                            },
                            failure: function(response, opts) {
                                Ext.MessageBox.alert('Failure', "Link not found");
                            }
                        });

以下是组件：

{
            xtype:'combobox',
            fieldLabel: 'Team name* ',
            editable:false,
            /*allowBlank: false,*/
            store: vgfrmextension_device,
            valueField:'name',
            displayField:'name',
            name: 'txtMode',
            id:'txtModeId',
            queryMode: 'local',
            triggerAction: 'all',
            emptyText:'Select Mode',    
            listeners: {

            }
        },

这是json：

{
    vgroup: [
        {
            'id': 'team1',
            'name': '100G',
            'size': '5646546546',
            'available': '545644541',
            'player': 'avi',
            'status': 'Good'
        },

Answer 1

你应该通过商店进行加载。这是我的旧应用程序的一个例子：

FC.Global.Toolbar = [{
    xtype: 'combo',
    store: new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy(new Ext.data.Connection({
            url: 'comboboxlist.php'
        })),
        root: 'items',
        fields: ['name']
    }),
    displayField: 'name',
    valueField: 'name',
    mode: 'local',
    triggerAction: 'all',
    typeAhead: true,
    minChars: 1,
    id: 'widgetloadcombobox',
    listeners: {render: function(e) {this.getStore().load();}}
},{
    // Other toolbar items
}]

以下是HttpProxy调用返回的JSON（只有一个项目）：

{"items":[{"name":"Generator"}]}

Answer 2

可能应该先检查device_records数组。

Ext.Ajax.request({
                            url: 'data/vgroup.json',
                            method: 'Get',
                            timeout: 9000,
                            success: function(response, opts) {
                                var device = Ext.decode(response.responseText);
                                var device_records = [
                                         {"name":"John"},
                                         {"name":"Anna"},
                                         {"name":"Peter"}
                               ];
                                vgfrmextension_device = new Ext.data.ArrayStore({
                                    fields: ['name'],
                                    data : device_records
                                });
                            },
                            failure: function(response, opts) {
                                Ext.MessageBox.alert('Failure', "Link not found");
                            }
                        });

如果有效，您可以像这样更改填充策略：

Ext.Ajax.request({
                            url: 'data/vgroup.json',
                            method: 'Get',
                            timeout: 9000,
                            success: function(response, opts) {
                                var device = Ext.decode(response.responseText);
                                var device_records = [];

                                for(var itr=0; itr < device.vgroup.length; itr++) {
                                    device_records.push(
                                              {
                                               "name": device.vgroup[itr].name
                                            });
                                }

                                vgfrmextension_device = new Ext.data.ArrayStore({
                                    fields: ['name'],
                                    data : device_records
                                });
                            },
                            failure: function(response, opts) {
                                Ext.MessageBox.alert('Failure', "Link not found");
                            }
                        });

问候。

Answer 3

您的问题主要在于您正在进行Ajax调用，即异步，并在其中创建一个新商店，该商店已设置为vgfrmextension_device变量。

并且你使用相同的变量作为组合框中的存储 - 但是在异步调用完成之前。如此有效地告诉组合框：您的商店是undefined，然后您创建了一个商店，但该商店从未附加到组合框。

您应该在创建组件之前创建ArrayStore，然后再启动请求，并在返回时将数据加载到EXISTING存储中：

var vgfrmextension_device = new Ext.data.ArrayStore({
    fields: ['name']
});
Ext.Ajax.request({
    url: 'data/vgroup.json',
    method: 'Get',
    timeout: 9000,
    success: function(response, opts) {
        var device = Ext.decode(response.responseText);
        var device_records = new Array();
        for(var itr=0; itr < device.vgroup.length; itr++) {
            var record = new Array();
            record[0] = device.vgroup[itr].name;
            //alert(device.vgroup[itr].name);
            device_records[itr] = record;
        }
        vgfrmextension_device.setData(device_records);

或者，您可以使用success方法将商店附加到组合框：

vgfrmextension_device = new Ext.data.ArrayStore({
    fields: ['name'],
    data : device_records
});
Ext.getCmp("widgetloadcombobox").setStore(vgfrmextension_device);

Ajax数据未在组合框中加载

3 个答案: