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

Question

我正在尝试通过创建我的所有组件然后调用 container 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);
        }
    }
});

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