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布局，因为这会干扰手风琴布局的工作方式，因为它会根据用户的操作使用或多或少的垂直空间。此外，手风琴不应将scrollable设置为true，因为它是应该滚动的父窗口。

用于手风琴中项目的标题在JS中被视为整数值，因此0在title中使用时不会被解释为i串）。将0明确转换为字符串可确保layout:fit正确显示。

总之，以下更改将使您的代码更好地运行：

在外窗口：删除scrollable:true并添加scrollable:true。
关于手风琴：删除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();。
关于手风琴中的项目：确保标题始终转换为字符串。

请参阅更新的小提琴here。

// this is the first page the player sees
<div class="page1">
    <div class="button button_selected" data-link="choosegame">Choose a game</div>
    <div class="button" data-link="highscores">Highscores</div>
    <div class="button" data-link="settings">Settings</div>
</div>

// if the player selects "choose a game", it shows this page:
<div class="choosegame">
    <div class="button" data-link="chooseplayers" data-options="{game:'checkers',players:'2',playersmax:'2'}">Checkers</div>
    <div class="button" data-link="chooseplayers" data-options="{game:'bingo',playersmin:'2',playersmax:'4'}">Bingo</div>
    <div class="button" data-link="chooseplayers" data-options="{game:'scrabble',players:'2',playersmax:'2'}">Scrabble</div>
</div>

// if the player selects a game (ex. checkers), it shows this page:
<div class="chooseplayers">
    <div class="button" data-link="playgame" data-options="{player:'Jimmy'}">Jimmy</div>
    <div class="button" data-link="playgame" data-options="{player:'Billy'}">Billy</div>
    <div class="button" data-link="playgame" data-options="{player:'Arnold'}">Arnold</div>
</div>

// after players are selected, it shows this page:
<div class="playgame">
    PLAYING!
</div>

ExtJS 6中可滚动手风琴中的两个错误

1 个答案: