1

我正在尝试创建一个弹出窗口，其中将包含一个表单和按钮。因为我想添加一些自定义样式，所以我在窗口顶部添加了一个 div（创建一个新组件）并将其插入到窗口项中。问题是这个 div 占据了我窗口的整个高度，除了带有!important后缀的 css 高度规则之外，什么都没有。我尝试添加style: {height: 45}到 autoEl 定义，设置组件的高度但没有成功。使用 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 })
            }
        });
    }
})

这就是它现在的样子：

对话的当前状态

我已经通过在表单的“调整大小”事件上添加一个侦听器并通过缺少 45px 的那些更新对话框的高度来临时修复它，但我想让它更干净。

编辑

我对组件进行了一些修改，以使用 Ext.panel.Header，但这在 ext 的“initContainer”方法中给了我“容器为空”错误：/

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"]
        }
    }
})
4

0 回答 0