使用表单和html组件自动调整窗口大小

Question

我正在尝试创建一个弹出窗口，其中包含一个表单和按钮。因为我想添加一些自定义样式，所以我在窗口顶部添加了一个div（创建一个新组件）并将其插入到窗口项中。问题是这个div占据了我窗口的整个高度，并且css高度规则与!important后缀无关。我尝试将style: {height: 45}添加到a​​utoEl定义中，设置组件的高度但没有成功。使用css虽然我的表单（autoHeight：true）不适合窗口，因为它缺少45个像素，并被按钮隐藏。

这是我的窗口定义。

Ext.define('Dialog', {
    extend : 'Ext.window.Window',    
    modal : false,
    width : 240,
    cls: 'sch-pdfexportdialog',
    frame : false,
    header : false,
    title : null,
    layout : 'fit',
    draggable : true,
    padding: 0,

    autoHeight: true,
    headerTpl: Ext.create('Ext.XTemplate', 
            '<h4>{headerText}</h4>'+
            '<span id="close"></span>'
    ),

    initComponent: function () {
        var me        = this;

        Ext.apply(this, {
            items : [
                me.createHeader(),
                me.formPanel
            ],
            fbar : {
                xtype: 'button',
                scale: 'medium',
                text: this.cancelButtonText,
                handler: function() {
                    this.hideDialog();
                },
                scope: this
            }          
        });  

        this.callParent(arguments);
    },

    createHeader: function () {
        var me = this;

        return new Ext.Component({
            autoEl: { 
                tag: 'div', 
                cls: 'sch-pdfexportdialog-header', 
                html: me.headerTpl.apply({ headerText: me.dialogHeader })
            }
        });
    }
})

这就是现在的样子：

我已经通过在表单的'resize'事件上添加一个监听器来临时修复它，并通过缺少45px的那些更新对话框的高度，但我想让它变得更干净。

---

修改

我已经对组件进行了一些修改，使用了Ext.panel.Header，但这在ext的'initContainer'方法中给出了'container is null'错误：/

Ext.define('Dialog', {
    extend : 'Ext.window.Window',    
    modal : false,
    width : 240,
    frame : false,
    header : false,
    title : null,
    layout : 'fit',
    draggable : true,
    padding: 0,

    autoHeight: true,
    headerTpl: new Ext.XTemplate(
            '<h4>{headerText}</h4>',
            '<span id="{id}-btnClose"></span>'
    ),
    headerText: 'Foo',

    initComponent: function () {
        var me        = this;

        Ext.apply(this, {
            header: me.createHeader(),
            items : [
                me.formPanel
            ],
            fbar : {
                xtype: 'button',
                scale: 'medium',
                text: this.cancelButtonText,
                handler: function() {
                    this.hideDialog();
                },
                scope: this
            }          
        });  

        this.callParent(arguments);
    },

    createHeader: function () {
        var me = this;

        return {
            renderTpl: me.headerTpl,
            renderData: {
                headerText: me.headerText
            },
            childEls: ["btnClose"]
        }
    }
})