ExtJS 4: Replace two components in Viewport items

问题:

Below is some code that works after one button click. When I set that "view" variable again in another button click (for a different button) and run this exact code with a different grid and a different form, the two items disspapear completely. Why does it run on the first iteration, but not the second?

More importantly, how can I switch the components for these two items the correct way? I've tried using the "itemId" config in these two components (via getComponent), I've tried using the "id" config in these components (via getCmp) and I've tried using the "items" object from the parent component of these two items. I was unsuccessful. The only way I could get it to work (at least on the first button click) was with the "region" config (see below).

Function called after button click:

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:

Per @Thevs answer, I've got this code. How do I apply it to replace a given item in an items array for a view?

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

I've tried the following, and does not work yet. I'd prefer to use the id, and not these border layout regions, since I may change the layout in the future to vbox or hbox or a combination of both.

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

回答1:

You have to generate unique ids for itemId's for grid and form. You can use Ext.id() function for this.

回答2:

So to solve this one, I had to switch to another layout. I read on Sencha's forum that the add function destroys objects if rendered via border layout. That's probably why @Thevs answer said to use Ext.id(). His answer is correct if using border layout, but then you have to manage the ids for all of your components yourself with another store.

So I just changed 'main' to use 'hbox' layout. Then removed the 'region' configs in both add function calls since that 'region' defines the location of a child item for a component with layout border. I did however keep border layout for the viewport. Also had to create a new store, since the old store wouldn't load for some reason. I also called doLayout() to re-render the components.

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