ExtJS 4: replace two components in the array of Viewport elements after clicking a button

Question

Below is the code that works after pressing one button. When I set this “view” variable again with another button (for another button) and run this exact code with a different grid and different shape, these two elements completely disappear. Why does it run in the first iteration, but not the second?

More importantly, how can I properly switch components for these two elements? I tried using the "itemId" configuration in these two components (via getComponent), I tried using the "id" configuration in these components (via getCmp), and I tried to use the "items" object from the parent component of these two elements. I have not been successful. The only way to make it work (at least the first time the button is pressed) was with the "region" configuration (see below).

Function called after pressing a button:

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:

Reply to @Thevs, I have this code. How to apply it to replace a given element in an array of elements for presentation?

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            
    });

Answer 1

, . Sencha, add , . , @Thevs , Ext.id(). , , .

, "main", "hbox". "" , "" . . , - . doLayout() .

    var view = this.getViewportAdmin();
    var main = view.getComponent('main');
    main.remove('grid', false);
    main.remove('form', false);
    main.add({
        itemId: 'grid',
        xtype: 'view-property-grid',            
        width: '50%',
        store: Ext.create('App.store.Properties'),
        split: false
    });
    main.add({
        itemId: 'form',
        xtype: 'view-property-form',
        width: '50%',
        split: true
    });
    main.doLayout(true);

Answer 2

itemId . Ext.id().