Layout 使用此.setItems（）动态构建容器

我试图通过创建所有组件，然后调用

this.setItems（[…]）

在

初始化

（）函数中构建我的

容器。由于某些原因，我的组件被放置在彼此的顶部，而不是在
vbox
中彼此之后

我能够抓住顶部的
组件
并将其向下移动，如所附图像所示


具有两个组件的简化视图：

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

我的问题是，我在选项卡控制器中添加的组件不正确。我包括一个例子，在一个选项卡上创建按钮，在另一个选项卡上创建复选框



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

Ext.Loader.setConfig({
已启用：true
});
外部应用程序({
姓名：（'SF'| |'SenchaFiddle'），
createRadioSet:函数（）{
this.radioFieldSet=Ext.create（'Ext.form.FormPanel'{
高度：“300px”，
宽度：“300px”，
项目：[
{
xtype:“字段集”，
标题：“标题”，
默认值：{
xtype:'无线电场'，
标签宽度：“40%”
},
说明：“最喜欢的颜色？”，
项目：[
{
名称：'颜色'，
值：“红色”，
标签：“红色”
},
{
名称：'颜色'，
值：“绿色”，
标签：“绿色”
}
]
}
]
});
返回此.radioFieldSet；
},
createButton:函数（i）{
返回Ext.create（'Ext.Button'{
文字：“你好”+i，
高度：'50px'，
宽度：“100px”
});
},
启动：函数（）{
var tabPanel=Ext.create（'Ext.tab.Panel'{
布局：“卡片”，
填充：2，
tabBarPosition:'底部'，
项目：[
{
id:'表1'，
标题:"家",，
布局：“hbox”，
xtype:'容器'，
iconCls:“家”
},
{
id:'表2'，
标题：“更多”，
布局：“hbox”，
xtype:'容器'，
iconCls:“明星”
}
]
});
Ext.Viewport.add（选项卡面板）；
变量a，b；
对于（变量i=0；i<3；i++）{
a=此.createButton（i）；
b=this.createRadioSet（）；
//tabPanel.getAt（0）.add（b）；//引用正确的组件：Tab 1
Ext.getCmp（'tab1'）。添加（a）；
Ext.getCmp（'tab2'）。添加（b）；
}
}
});

添加此.callParent（参数）；在初始化函数的开头。添加此.callParent（参数）没有帮助。@tdebaileul为了完整性，我添加了缺少的行。