Question

在我的应用程序中，我正在尝试将Ext.Panel的子类放在Ext.Window中。随着更多项目的添加，Panel可能会在运行时变得更大，所以我希望Window自动调整大小以适应Panel。我还希望窗口只能增长到最大宽度和高度，然后在之后自动滚动。下面我用MockPanel替换了我的真实内容，试图让事情更简单。 MockPanel只包含Google徽标图片。

var MockPanel = Ext.extend(Ext.Panel, {
    autoRender: true,
    html:"<img src='https://www.google.com/images/srpr/logo11w.png'/>"
});

var window = new Ext.Window({
    header: false,
    border: false,
    closable: false,
    draggable: false,
    resizable: false,
    frame: false,
    layout:"fit",
    boxMaxHeight: 400,
    boxMaxWidth: 1000,
    autoScroll: true,
    items : [
        new MockPanel()
    ]
});

window.show();

当我运行此代码时，我最终得到一个没有宽度且几乎没有高度的窗口，但我想要的是它自动大到足以容纳MockPanel。

我在这里做错了什么？

Answer 1

ExtJS无法神奇地知道您的MockPanel的大小 - 您必须直接设置大小或根据您正在加载的图像的大小计算它。例如，这有效：

Ext.onReady(function () {
    var MockPanel = Ext.extend(Ext.Panel, {
        html: "<img src='https://www.google.com/images/srpr/logo11w.png'/>",
        width: 538,
        height: 190
    });

    var window = new Ext.Window({
        layout: "fit",
        items: [
            new MockPanel()
        ]
    });

    window.show();
});

Answer 2

尝试将'layout：“fit”添加到MockPanel

为什么我的Ext.Window大小本身不适合Ext.Panel子类？

2 个答案: