将选项添加到无法正常工作的组件extjs 6的存储区

我有一个带有extjs（版本6）组合的组件。我想动态地修改存储，以便在一个组件中添加更多选项，该组件通过组合扩展该组件。我尝试了几种方法：

component.store.add({'OPTION_ONE_START_RENDER': 'OPTION_ONE_START_RENDER'});
component.store.add(['OPTION_ONE_START_RENDER', 'OPTION_ONE_START_RENDER']);
component.store.add({ display: 'OPTION_ONE_START_RENDER', value: 'OPTION_ONE_START_RENDER', name: 'OPTION_ONE_START_RENDER' });
component.store.add({ name: 'OPTION_ONE_START_RENDER' , value: 'OPTION_ONE_START_RENDER'});

但是我得到了选项，但不可见（选项一、选项二和选项三来自父组件），新添加的选项如下，但它们没有正确显示（它们占用了一些空间，但好像显示文本没有被渲染）：

我曾尝试在渲染前、渲染后以及定义组件时添加选项，但总是得到相同的结果，我无法找出原因。

您尝试过存储吗？ 我试过用这种方式工作

Ext.onReady(function () {

    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });
    
    var mycomponent = Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose State',
        store: states,
        id : "componentid",
        queryMode: 'local',
        valueField: 'abbr',
        renderTo: Ext.getBody(),
        tpl: Ext.create('Ext.XTemplate',
            '<ul class="x-list-plain"><tpl for=".">',
                '<li role="option" class="x-boundlist-item">{abbr} - {name}</li>',
            '</tpl></ul>'
        ),
        // template for the content inside text field
        displayTpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '{abbr} - {name}',
            '</tpl>'
        )
    });
    
    var button = Ext.create('Ext.Button', {
    text    : 'Add new select',
    renderTo: Ext.getBody(),
    handler : function() {
       var mycomp = Ext.getCmp("componentid");
       var mydata = mycomp.getStore().add({abbr: 'RO', name: "Romania"});
    }
});
    
});

Ext.onReady（函数（）{
var states=Ext.create（'Ext.data.Store'{
字段：['abbr'，'name']，
数据：[
{“abbr”：“AL”，“name”：“Alabama”}，
{“abbr”：“AK”，“name”：“Alaska”}，
{“abbr”：“AZ”，“name”：“亚利桑那州”}
]
});
var mycomponent=Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择状态”，
商店：美国，
id:“组件id”，
queryMode:'本地'，
valueField:'缩写'，
renderTo:Ext.getBody（），
tpl:Ext.create（'Ext.XTemplate'，
“
”，
“
{abbr}-{name}
”，
“
”
),
//文本字段内内容的模板
displayTpl:Ext.create（'Ext.XTemplate'，
'',
“{abbr}-{name}”，
''
)
});
var button=Ext.create（'Ext.button'{
文本：“添加新选择”，
renderTo:Ext.getBody（），
处理程序：函数（）{
var mycop=Ext.getCmp（“组件ID”）；
var mydata=mycomp.getStore（）；
}
});
});

也试试看。从组件获取当前数据。 假设var

myData=myComponent.getStore（）.data.items

并将新数据添加到myData数组中。之后，您应该使用myComponent.store.loadData（myData）

使用新数据重新加载存储。您是否尝试重新加载存储？ 我试过用这种方式工作

Ext.onReady(function () {

    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });
    
    var mycomponent = Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose State',
        store: states,
        id : "componentid",
        queryMode: 'local',
        valueField: 'abbr',
        renderTo: Ext.getBody(),
        tpl: Ext.create('Ext.XTemplate',
            '<ul class="x-list-plain"><tpl for=".">',
                '<li role="option" class="x-boundlist-item">{abbr} - {name}</li>',
            '</tpl></ul>'
        ),
        // template for the content inside text field
        displayTpl: Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '{abbr} - {name}',
            '</tpl>'
        )
    });
    
    var button = Ext.create('Ext.Button', {
    text    : 'Add new select',
    renderTo: Ext.getBody(),
    handler : function() {
       var mycomp = Ext.getCmp("componentid");
       var mydata = mycomp.getStore().add({abbr: 'RO', name: "Romania"});
    }
});
    
});

Ext.onReady（函数（）{
var states=Ext.create（'Ext.data.Store'{
字段：['abbr'，'name']，
数据：[
{“abbr”：“AL”，“name”：“Alabama”}，
{“abbr”：“AK”，“name”：“Alaska”}，
{“abbr”：“AZ”，“name”：“亚利桑那州”}
]
});
var mycomponent=Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择状态”，
商店：美国，
id:“组件id”，
queryMode:'本地'，
valueField:'缩写'，
renderTo:Ext.getBody（），
tpl:Ext.create（'Ext.XTemplate'，
“
”，
“
{abbr}-{name}
”，
“
”
),
//文本字段内内容的模板
displayTpl:Ext.create（'Ext.XTemplate'，
'',
“{abbr}-{name}”，
''
)
});
var button=Ext.create（'Ext.button'{
文本：“添加新选择”，
renderTo:Ext.getBody（），
处理程序：函数（）{
var mycop=Ext.getCmp（“组件ID”）；
var mydata=mycomp.getStore（）；
}
});
});

也试试看。从组件获取当前数据。

---

假设var

myData=myComponent.getStore（）.data.items

并将新数据添加到myData数组中。之后，您应该使用myComponent.store.loadData（myData）

使用新数据重新加载存储。我不确定您尝试添加数据的时间。 如果从另一个组件进行扩展，则该组件需要它自己的存储（因此最好在viewmodel中执行此操作）

扩展后，必须创建存储，这可能最好在init上进行，或者指定一个

加载
侦听器，然后在此时添加记录

下面是一个
我不确定您尝试添加数据的时间。
如果从另一个组件进行扩展，则该组件需要它自己的存储（因此最好在viewmodel中执行此操作）

扩展后，必须创建存储，这可能最好在init上进行，或者指定一个
加载
侦听器，然后在此时添加记录

这是一个