3

我在 extjs 应用程序中使用了组合框组件。我想通过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'
        },
4

3 回答 3

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"}]}
于 2012-07-23T14:41:34.033 回答
0

可能您应该首先检查 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");
                            }
                        });

问候。

于 2016-06-17T07:21:45.983 回答
0

您的问题主要是您正在进行 Ajax 调用，它是异步的，并在其中创建了一个 NEW 存储，该存储被设置到vgfrmextension_device变量中。

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

您应该在创建组件之前和开始请求之前创建 ArrayStore，并在返回时将数据加载到现有存储中：

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);
于 2016-06-17T07:36:57.610 回答