html - ExtJS HTML レンダリングが正しくない

Question

ExtJS を使用して次のウィンドウ環境をセットアップしています。上部の左隅にウィンドウの境界線があり、別の影の境界線が少し下と右にあり、最後に右下に実際のウィンドウがあります (「チャットの終了」ボタンを使用)。これら 3 つのコンポーネントが同じウィンドウの一部であることを確認しましたが、何らかの理由で一緒にレンダリングされません。ブラウザー ウィンドウのサイズを変更すると、(制約のために) 影の境界線を移動できますが、実際のウィンドウ ([チャットの終了] ボタンの 1 つ) をドラッグすると、他の 2 つの境界線はまったく移動しません。何か案は？

Ext.define('ipmcc.view.ChatWindow', {
extend: 'Ext.window.Window',
alias: 'widget.ChatWindow',
constructor: function (ChatInteractionModel, index) {
    this.callParent();
    me = this;
    this.chatInteractionModel = ChatInteractionModel;
    this.id = 'Chat_' + ChatInteractionModel.get('interactionUuid');
    this.setTitle(ipmcc.settings.strings.ChatWindowTitle + " - " +  ChatInteractionModel.get('name'));
    this.setPosition(560 + index*50, 30 + index*50);
    this.query("#txtMessageText")[0].focus();
    this.activeChat = true;
},
autoShow:true,  
closable: true,
closeAction: 'hide',
constrain: true,
frame: true,
height: 300,
hidden: true,
layout: {
    type: 'vbox',
    align: 'stretch',
    pack: 'start'
},
maximizable: true,
padding: 5,
width: 600,
items: [...]
});