What's the difference between Ext.Viewport.setActiveItem and Ext.Viewport.add

[reco123]

Anyone can explain some details ?

[jerome76]

The setActiveItem() function is used by the framework behind the scenes, but you can use it basically to switch between multiple pages. Calling the add() function will essentially call setActiveItem() as well. You can see it here in the source code taken from Ext.Container:

/**
 * Adds one or more Components to this Container. Example:
 *
 *     var myPanel = Ext.create('Ext.Panel', {
 *         html: 'This will be added to a Container'
 *     });
 *
 *     myContainer.add([myPanel]);
 *
 * @param {Object/Object[]/Ext.Component/Ext.Component[]} newItems The new items to add to the Container.
 * @return {Ext.Component} The last item added to the Container from the `newItems` array.
 */
add: function(newItems) {
    var me = this,
        i, ln, item, newActiveItem;

    newItems = Ext.Array.from(newItems);

    ln = newItems.length;

    for (i = 0; i < ln; i++) {
        item = me.factoryItem(newItems[i]);
        this.doAdd(item);
        if (!newActiveItem && !this.getActiveItem() && this.innerItems.length > 0 && item.isInnerItem()) {
            newActiveItem = item;
        }
    }
    if (newActiveItem) {
        this.setActiveItem(newActiveItem);
    }

    return item;
},

The activeItems are usually components that are a child of a Container, such as a Panel. If you were to set up a scenario to use setActiveItem(), you can have a Container, such as Ext.Viewport, and 2 child components, such as Panels.

You have already added the two Panels to your Container with the add() function, and that will have set the top-most item as the new active item. Suppose your Container has a 'card' layout and you want your 2 Panels to be shown (one at a time) by a button-tap. You can then listen for the button tap event, reference your Container and call the setActiveItem() function to set a new Panel "on top".

You can think of a 'card' layout like a deck of cards, and each Panel is a card stacked on one another. Using the setActiveItem can pull out a card and place it on the top of the deck.

Here is a sample pseudo-code:

//assuming you have created a variable to reference Container
//and another to reference Panel2
Container.setActiveItem(Panel2);

I hope I explained it well enough. It has been a few months since I've worked with it