Javascript ExtJS:使用数组存储打开和关闭组合框行为异常

我尝试向ArrayStore动态添加值，并在组合框中显示这些值

我的商店看起来像：

'Selection' : Ext.create('Ext.data.ArrayStore', {
    storeId : 'selection-store',
    fields  : [
        { name : 'id', type : 'string' },
        { name : 'name', type : 'string' },
        { name : 'elements', type : 'array' },
        { name : 'properties', type : 'array' }
    ]
})

我使用以下代码向商店添加物品：

var selection = {id : id, name : id, elements : elements, properties : []};
Stores.Selection.add(selection);
Stores.Selection.commitChanges();

我的组合框看起来像

xtype        : 'combo',
store        : Stores.Selection,
displayField : 'name',
valueField   : 'name',
emptyText    : 'Choose Selection...',
id           : 'selection-dropdown',
editable     : false

因此，现在当我向存储中添加一些值时，我查看存储（例如通过FireBug），我添加的所有内容都应该在items数组中。 但只要我展开组合框，商店就会被清空，之后就空了；组合框也是空的

但是，当我在向存储添加内容之前展开并关闭组合框，然后开始添加内容时，它的行为就像它应该表现的那样（值被存储，组合框显示值的名称）

---

我使用的是ExtJS 4.1，我不知道这种奇怪的行为可能来自何处。

听起来您可能需要更改组合的

queryMode

属性，以防止它在组合打开时尝试重新创建存储。这似乎对我有用

这里有一个小提琴与此代码：

---

非常感谢你，它起作用了！我决不会想到这一点！

Ext.onReady(function() {    

    var selection = Ext.create('Ext.data.ArrayStore', {
        storeId : 'selection-store',
        fields  : [
            { name : 'id', type : 'string' },
            { name : 'name', type : 'string' },
            { name : 'elements', type : 'array' },
            { name : 'properties', type : 'array' }
        ]
    });

    selection.add({ id: 1, name: 1, 
                    elements: ['a', 'b'], properties: ['x', 'y']});
    selection.add({ id: 2, name: 2, 
                    elements: ['a', 'b'], properties: ['x', 'y']});
    selection.add({ id: 3, name: 3, 
                    elements: ['a', 'b'], properties: ['x', 'y']});
    selection.commitChanges();

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        border: false,
        margin: '10 10 10 10',
        items: [
            {
                xtype: 'combo',
                fieldLabel: 'Combo',
                name: 'combo',
                labelWidth: 50,
                width: 300,
                displayField: 'name',
                valueField: 'name',
                emptyText: 'Choose selection...',
                editable: false,
                store: selection,
                queryMode: 'local'
            }
        ]
    });

});