Question

作为标题，是否可以使用setItems设置要在面板上显示的项目？

如果说面板有id：'panel'

所以代码变成了

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
    }
],

我设法根据号码动态添加项目并相应地在面板上显示。但问题来了，当我尝试在面板中添加2个或更多项时，只会显示1个项目。例如，如果我想在面板中一起显示项目1和项目4，则仅显示项目4，并且我怀疑项目1被交换机块中的项目4覆盖。我尝试了多种解决方案，如下面的

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

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

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

但两者都不起作用。

我想知道我在面板中添加项目的方法是错误的，还是我错过了什么？

编辑：

在我的帖子中添加了源代码

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'
        },
    ]

});

我希望如果基于任何条件，任何项目都可以在面板上显示而没有问题。

Answer 1

这是使用setItems

设置多个项目的正确方法

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

如果您的面板只显示一个项目，请确保其（父容器）layout配置不是'card'，您应该使用vbox，hbox或仅default配置layout，例如，如果您想垂直排列项目，一个在另一个之下，则应添加layout: 'vbox'

使用setItems设置多个项目

1 个答案: