Set multiple items with setItems

Question

As title, is it possible to use setItems to set the items to show on a panel?

If say the panel has an id : 'panel'

So the code becomes

setPanelItems: function (){
    var number = [],
    panel = Ext.getCmp('panel');

    number = this.num.numVal;

    for (i = 0; i < number.length; i++){
        if (panel){
            switch(number[i]){
                case 1:
                panel.setItems(this.itemOne);
                break;

                case 2:
                panel.setItems(this.itemTwo);
                break;

                case 3:
                panel.setItems(this.itemThree);
                break;

                case 4:
                panel.setItems(this.itemFour);
                break;

                default:
                console.log('No item matched');
            }
        }
    }
},

num: {numVal: [1,2]},

itemOne: [
    {
        xtype: 'panel',
        //item blocks in here
    }
],

itemTwo: [
    {
        xtype: 'panel',
        //item blocks in here
    }
],

itemThree: [
    {
        xtype: 'panel',
        //item blocks in here
    }
],

itemFour: [
    {
        xtype: 'panel',
        //item blocks in here
    }
],

I managed to dynamically add the item based on the number and show it on the panel accordingly. But here comes the problem, when i tried to add 2 or more items into the panel, only 1 item will be shown. For example if i want to show item 1 and item 4 together in the panel, only item 4 will be shown, and i suspect that item 1 was overwritten by item 4 in the switch block. I tried multiple solutions, like below

panel.setItems(this.itemOne, this.itemTwo);

panel.setItems([this.itemOne, this.itemTwo]);

panel.setItems({this.itemOne, this.itemTwo});

But neither works.

I want to know if my method in adding items to the panel was wrong, or was there anything that i missed?

EDIT:

Added source code to my post

Ext.define('view.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'survey',
    id: 'survey',

    requires: [
        'Ext.form.*',
        'Ext.field.*',
        'Ext.Button',
        'Ext.Toolbar',
        'Ext.TitleBar'
    ],

    config: {

        centered: true,
        modal: true,
        height: '95%',
        width: '95%',
        margin: '1%',
        hideOnMaskTap: true,

        scrollable: {
            direction: 'vertical',
            directionLock: true,
        },

        defaults: {
            required: true
        },

        items: [

            {
                xtype: 'titlebar',
                action: 'formTitle',
                docked: 'top',
                title: 'Simple survey'
            },

            {
               xtype: 'panel',
               id: 'panel',
               layout: {type: 'vbox'}
               //items: []
            }
        ]
    },

    initialize: function () {
        var me = this;
        this.callParent(arguments);
        this.setPanel();
    },

    setPanel: function () {
        var num = [],
            panel = Ext.getCmp("panel");

        num = this.number.numArr;

        for (var i = 0; i < num.length; i++){
            if (panel){
                    switch (num[i]){
                    case 1:
                        //To be done
                        panel.setItems(this.itemOne);
                        console.log('Number 1');
                        break;

                    case 2:
                        //to be done
                        panel.setItems(this.itemTwo);
                        console.log('Number 2');
                        break;

                    case 3:
                        //to be done
                        panel.setItems(this.itemThree);
                        console.log('Number 3');
                        break;

                    case 4:
                        //to be done
                        panel.setItems(this.itemFour);
                        console.log('Number 4');
                        break;

                    default:
                        console.log('No number matching');
                }
            }
        }
    },

    number: {
        numArr : [1, 3]
    },

    itemOne: [
        {
            xtype: 'fieldset',
            title: 'How is the overall rating?',
            defaults: { xtype: 'radiofield' },
            items: [
                { name : 'rating', label: 'Excellent', value: 'excellent' },
                { name : 'rating', label: 'Good', value: 'good' },
            ]
        },
    ],

    itemTwo: [
        {
            xtype: 'fieldset',
            title: 'How is the overall quality?',
            defaults: { xtype: 'radiofield' },
            items: [
                { name : 'quality', label: 'Excellent', value: 'excellent' },
                { name : 'quality', label: 'Good', value: 'good' },
            ]
        },
    ],

    itemThree: [
        {
            xtype: 'fieldset',
            title: 'Do you like it?',
            defaults: { xtype: 'radiofield' },
            items: [
                { name : 'acceptance', label: 'Love it', value: 'loveIt' },
                { name : 'acceptance', label: 'Like it', value: 'likeIt' },
            ]
        },
    ],

    itemFour: [
        {
            xtype: 'textareafield',
            required: false,
            maxRows: 3,
            name: 'anyComments',
            label: 'Anything you wanna add?',
            labelAlign: 'top'
        },
    ]

});

I want so that if based on any condition, any of the items can be shown on the panel without problem.

Answer 1

This is the right way to set multiple items with setItems

panel.setItems([this.itemOne, this.itemTwo]);

If your panel just shows one item, be sure that its (the parent container) layout config is not 'card', you should use vbox, hbox or just default for your layout config, for example if you want to arrange your items vertically, one below another, you should add layout: 'vbox'