Why won't my Ext.Window size itself to fit a Ext.Panel subclass?

Question

In my app, I'm trying to place a subclass of Ext.Panel in a Ext.Window. The Panel can potentially get bigger at run-time as more items are added to it, so I want the Window to dynamically size itself to fit the Panel. I also want the Window to only grow up to a max width and height and then autoScroll after that. Below I've substituted MockPanel for my real one to try to make things simpler. MockPanel just contains the Google logo image.

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

When I run this code I wind up getting a Window with no width and almost no height, but what I want is for it to automatically be big enough to accommodate MockPanel .

What am I doing wrong here?

Answer 1

ExtJS can't magically know the size of your MockPanel - you either have to set the size directly or calculate it from the size of the image you're loading. For example, this works:

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

尝试在MockPanel中添加'layout：“ fit”