下面是一些单击按钮后即可运行的代码。当我在另一个按钮中再次设置“视图”变量（对于不同的按钮）并使用不同的网格和不同的表单运行这个确切的代码时，这两个项目完全消失。为什么它在第一次迭代时运行，但在第二次迭代时不运行？

更重要的是，我怎样才能正确地切换这两个项目的组件？我尝试在这两个组件中使用“itemId”配置（通过 getComponent），我尝试在这些组件中使用“id”配置（通过 getCmp），并且我尝试使用父级中的“items”对象这两项的组成部分。我没有成功。我可以让它工作的唯一方法（至少在第一次单击按钮时）是使用“区域”配置（见下文）。

单击按钮后调用的函数：

openAssociationGrid : function() {

    var view = this.getViewportAdmin();
    var main = view.down('[region=west]');
    main.removeAll();
    main.add({
        region: 'center',
        itemId: 'grid',
        xtype: 'view-association-grid',            
        width: '50%',
        store: 'Associations',
        split: true
    });
    main.add({
        region: 'east',
        itemId: 'form',
        xtype: 'view-association-form',
        width: '50%',
        split: true            
    });
},

EDIT:

根据 @Thevs 的回答，我已经得到了这段代码。如何应用它来替换视图的项目数组中的给定项目？

var id1 = Ext.id();
alert(id1);
var id2 = parseInt(id1.replace("ext-gen", ""));
alert(id2);

我已经尝试过以下方法，但还没有工作。我更喜欢使用 id，而不是这些边框布局区域，因为我将来可能会将布局更改为 vbox 或 hbox 或两者的组合。

    var view = this.getViewportAdmin();
    var center = view.down('[region=center]');
    var east = view.down('[region=east]');

    Ext.apply(center, {
        region: 'center',
        itemId: Ext.id(),
        xtype: 'view-property-grid',            
        width: '50%',
        store: 'Properties',
        split: true
    });
    Ext.apply(east, {
        region: 'east',
        itemId: Ext.id(),
        xtype: 'view-property-form',
        width: '50%',
        split: true            
    });

您必须为以下内容生成唯一的 iditemId用于网格和表单。您可以使用Ext.id()为此功能。