javascript - フォームと HTML コンポーネントでウィンドウのサイズを自動変更

Question

フォームとボタンを含むポップアップ ウィンドウを作成しようとしています。カスタム スタイルを追加したいので、ウィンドウの上部に div を追加し (新しいコンポーネントを作成)、それをウィンドウ項目に挿入しました。問題は、この div がウィンドウ全体の高さを占めており、css の高さルール以外に!importantサフィックスが機能しないことです。style: {height: 45}コンポーネントの高さを設定して autoEl 定義に追加しようとしましたが、成功しませんでした。私のフォーム (autoHeight: true) で css を使用すると、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 })
            }
        });
    }
})

これが今の様子です：

フォームの「サイズ変更」イベントにリスナーを追加し、ダイアログの高さを 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"]
        }
    }
})