爲什麼我的Ext.Window大小本身不適合Ext.Panel子類？

Question

在我的應用程序中，我試圖在Ext.Window中放置一個Ext.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

嘗試增加「佈局​​：‘適合’，以MockPanel

Answer 2

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