layout - 使用 this.setItems() 动态构建容器

Question

我试图通过创建我的所有组件然后调用来构建我container的 in initialize()this.setItems([...])函数。出于某种原因，我的组件被放置在彼此之上，而不是在vbox.

我可以抓住顶部component并将其向下移动，如附图所示。

包含两个组件的简化视图：

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

我的问题是我在选项卡控制器中错误地添加了组件。我包括一个在一个选项卡上创建按钮并在另一个选项卡上创建复选框的示例。

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