javascript - ExtJS 6 中可滚动 Accordion 的两个错误

Question

我遇到了两个错误。这是fiddle它演示了这些错误。首先，如果您单击第一个面板或任何其他面板，您将看到出现一些缺少标题的新面板:

第二个错误是无法看到面板的内容(一个文本字段，我将其放入每个面板)。代码很简单:

    Ext.create("Ext.window.Window", {
        width: 300,
        height: 400,
        layout: "fit",
        items:[{
            xtype: "panel",
            layout: {
                type: "accordion"
            },
            scrollable: true,
            listeners: {
                beforerender: function () {
                    var i;
                    for (i = 0; i < 30; i += 1) {
                        this.add({
                            title: i,
                            items:[{
                                xtype: "textfield",
                                value: i
                            }]
                        });
                    }
                }
            }
        }]
    }).show();

那么，问题是如何解决这一切？

Answer 1

外窗不应有 fit布局，因为这会干扰 Accordion 布局的工作方式，因为它根据用户的操作使用或多或少的垂直空间。另外， Accordion 不应该有 scrollable设置为 true，因为它是应该滚动的父窗口。

您在 Accordion 中使用的项目标题在 JS 中被视为整数值，因此 0在 title 中使用时，未按照您想要的方式进行解释(需要一个字符串)。显式转换i到一个字符串将确保 0显示正确。

总之，以下更改将使您的代码更好地工作:

1. 在外窗上:删除 layout:fit并添加scrollable:true 。
2. 在 Accordion 上:删除 scrollable:true .
3. 对于 Accordion 中的项目:确保标题一致地转换为字符串。

查看更新的 fiddle here .

Ext.create("Ext.window.Window", {
    width: 300,
    height: 400,
    scrollable: true,
    items: [{
        xtype: "panel",
        layout: {
        type: "accordion"
        },

        listeners: {
        beforerender: function () {
            var i;
            for (i = 0; i < 30; i += 1) {
            this.add({
                title: 'box ' + i,
                items: [{
                xtype: "textfield",
                value: i
                }]
            });
            }
        }
        }
    }]
    }).show();