Dynamically Building a Container with this.setItems()

Question

I'm trying to build my container in the initialize() function by creating all my components then calling this.setItems([...]). For some reason, my components are being placed on top of each other, rather than after each other in the vbox.

I am able to grab the top component and move it down, as is shown in the attached image.

Simplified view with two components:

Ext.define("Sencha.view.DynamicView", {
    extend: 'Ext.Container',
    xtype: 'dynamic-view',
    requires: [],
    config: {
        layout: {
            type: 'vbox'
        },
        flex: 1,
        cls: 'view-container',
        store: null
    },

    createRadioSet: function() {
        this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
            flex: 1,
            items: [{
                xtype: 'fieldset',

                title: 'About You',
                defaults: {
                    xtype: 'radiofield',
                    labelWidth: '40%'
                },
                instructions: 'Favorite color?',
                items: [{
                        name: 'color',
                        value: 'red',
                        label: 'Red'
                    },
                    {
                        name: 'color',
                        value: 'green',
                        label: 'Green'
                    }
                ]
            }]
        });
        return this.radioFieldSet;
    },

    createCheckboxSet: function() {
        this.checkboxFieldSet = Ext.create('Ext.form.FormPanel', {
            flex: 1,

            items: [{
                xtype: 'fieldset',

                title: 'Check all that apply',
                defaults: {
                    xtype: 'checkboxfield',
                    labelWidth: '40%'
                },
                instructions: 'Tell us all about yourself',
                items: [{
                        name: 'firstName',
                        value: 'First',
                        label: 'First Name'
                    },
                    {
                        name: 'lastName',
                        value: 'Last',
                        label: 'Last Name'
                    }
                ]
            }]
        });
        return this.checkboxFieldSet;
    },

    initialize: function() {

        this.callParent(arguments); // @TDeBailleul - fixed

        var r1 = this.createRadioSet();
        var cbSet1 = this.createCheckboxSet();

        //        this.add(cbSet1);
        //        this.add(r1);

        this.setItems([r1, cbSet1]);
    }
});

Answer 1

My problem was that I was adding my components incorrectly in a tab controller. I'm including an example that creates buttons on one tab and the checkboxes on another tab.

Ext.Loader.setConfig({
    enabled : true
});

Ext.application({
    name : ('SF' || 'SenchaFiddle'),

    createRadioSet: function () {
        this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
            height: '300px',
            width: '300px',
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Title',
                    defaults: {
                        xtype: 'radiofield',
                        labelWidth: '40%'
                    },
                    instructions: 'Favorite color?',
                    items: [
                        {
                            name: 'color',
                            value: 'red',
                            label: 'Red'
                        },
                        {
                            name: 'color',
                            value: 'green',
                            label: 'Green'
                        }
                    ]
                }
            ]
        });
        return this.radioFieldSet;
    },
    createButton: function(i) {
        return Ext.create('Ext.Button', {
            text: 'hello' + i,

            height: '50px',
            width: '100px'
        });
    },
    launch: function () {

        var tabPanel = Ext.create('Ext.tab.Panel', {
            layout: 'card',
            padding: 2,
            tabBarPosition: 'bottom',

            items: [
                {
                    id: 'tab1',
                    title: 'Home',
                    layout: 'hbox',
                    xtype: 'container',
                    iconCls: 'home'
                },
                {
                    id: 'tab2',
                    title: 'More',
                    layout: 'hbox',
                    xtype: 'container',
                    iconCls: 'star'
                }
            ]

        });
        Ext.Viewport.add(tabPanel);

        var a,b;
        for (var i = 0; i < 3; i++) {
            a = this.createButton(i);
            b = this.createRadioSet();

            //            tabPanel.getAt(0).add(b); // Reference the proper component: Tab 1
            Ext.getCmp('tab1').add(a);
            Ext.getCmp('tab2').add(b);
        }
    }
});