ExtJS HTML渲染不正确

Question

我使用ExtJS设置了以下窗口环境。您可以看到顶部，左角有一个窗口边框，另一个向下和向右的阴影边框，最后是右下角的实际窗口（使用“结束聊天”按钮）。我已经确认这三个组件是同一个窗口的一部分，但由于某种原因，它们不能一起渲染。如果我调整浏览器窗口的大小，我可以移动阴影边框（因为约束），但是当我拖动实际窗口（“结束聊天”按钮之一）时，其他两个边框根本不会移动。有什么想法吗？

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: [...]
});