Extjs Combobox ajax 存储不呈现

Question

我有一个网格，其中有一个包含组合框编辑器的列。我有以下商店用于编辑器组合框

var combostore = Ext.create('Ext.data.Store', {
    fields: ['Value'],
    proxy: {
        type: 'ajax',
        url: '/pwbench/json/store1.json',
        reader: {
            type: 'json'
        }
    },
    autoLoad: true
});

我的组合框编辑器配置如下

editor: {
          xtype: 'combobox',
      store: combostore,
      displayField: 'Value',
      queryMode: 'remote',
      valueField: 'Value',
      emptyText:'Select',
      autoShow: true,
      selectOnFocus:true,
      editable: false,
}

商店的json数据如下

{[{"Value": "Store 1"},{"Value": "Store 1"},{"Value": "Store 1"},{"Value": "Store 1"}]}

http 响应可以正常获取 json 数据，但是当我单击组合框时，它不显示选项列表。但是，如果我使用带有本地数据的商店，它会显示列表，但是当我选择一个项目并在网格单元格外部单击时，该值会消失。我需要修复这两个错误。如何渲染ajax json数据以及如何保留选中的值？

Answer 1

您的 JSON 数据无效。这与 ExtJS 或组合框无关。

Put your JSON data in the JSONLint validator

需要有钥匙：

{"someVarName": [{"Value": "Store 1"}, ...]}

或者只是（这可能是你想要的）：

[{"Value": "Store 1"}, ...]

Answer 2

我在网格示例中有一个有效的组合框。看看这是否可以帮助您作为参考。

Ext.onReady(function() {

    Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);


    // ************************** Define Data Models ************************ //

    Ext.define('SUserSRole', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'username', 'authority' ]
    });

    Ext.define('SecureUser', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'username', 'password' ]
    });

    Ext.define('SecureRole', {
        extend : 'Ext.data.Model',
        fields : [ 'id', 'authority' ]
    });


    // ************************** Define Data Stores ************************ //

    //The Store contains the AjaxProxy as an inline configuration
    var userStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SecureUser',
        proxy : {
            type : 'ajax',
            api: {
                read: '../secureUser/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                root : 'secureUsers',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureUsers'                 
            }
        }
    });


    //The Store contains the AjaxProxy as an inline configuration
    var roleStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SecureRole',
        proxy : {
            type : 'ajax',
            api: {
                read: '../secureRole/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                root : 'secureRoles',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureRoles'                 
            }
        }
    });

    //The Store contains the AjaxProxy as an inline configuration
    var userRoleStore = Ext.create('Ext.data.Store', {
        autoLoad : true,
        model : 'SUserSRole',
        proxy : {
            type : 'ajax',
            api: {
                read: '../secureUserSecureRole/listJSON',
            },
            reader : {
                type : 'json',
                successProperty: 'success',
                idProperty: 'id',
                root : 'secureUserRoles',
                messageProperty: 'message'
            },
            writer : {
                type : 'json',
                encode: 'true',
                root: 'secureUsers'                 
            }
        }
    });

    //renderer needed to display correct field when not editing combo (see API)
    Ext.util.Format.comboRenderer = function(combo) {
        return function(value) {
            var record = combo.findRecord(combo.valueField, value);
            return record ? record.get(combo.displayField)
                    : combo.valueNotFoundText;
        }
    }

    var userCombo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        mode: 'remote',
        emptyText: 'Select User',
        store: userStore,
        valueField: 'username',
        displayField: 'username'
    });

    var roleCombo = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        mode: 'remote',
        emptyText: 'Select Role',
        store: roleStore,
        valueField: 'authority',
        displayField: 'authority'
    });

    // Grid-columns with meta-data from backend.
    var userRoleColumns = [ {
        header : "ID",
        width : 40,
        sortable : true,
        dataIndex : 'id'
    },{
        header : 'User Name',
        width : 130,
        dataIndex : 'username',
        editor : userCombo,
        renderer: Ext.util.Format.comboRenderer(userCombo)
    },{
        header : 'Authority',
        width : 130,
        dataIndex : 'authority',
        editor : roleCombo,
        renderer: Ext.util.Format.comboRenderer(roleCombo)
    }];

     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })

    // create youbrew.recipe.Grid instance (@see recipeGrid.js)
    var userRoleGrid = Ext.create('Ext.grid.Panel', {
        renderTo : document.body,
        plugins : [ rowEditing ],
        store: userRoleStore,
        width : 320,
        height : 300,
        clicksToEdit : 'auto',
        columns : userRoleColumns,
        dockedItems : [ {
            xtype : 'toolbar',
            items : [
                    {
                        text : 'Add',
                        handler : function() {
                            // empty record
                            var rowCount = userRoleStore.getCount();
                            userRoleStore.insert(rowCount, new SUserSRole());
                            userRoleGrid.getView().refresh();
                            rowEditing.startEdit(rowCount,0);
                        }
                    }
            ]
        }]

    });
});