ExtJS 4.2.3 窗口标题和正文之间的浮动图像答案

【问题标题】：ExtJS 4.2.3 floating image between window header and bodyExtJS 4.2.3 窗口标题和正文之间的浮动图像
【发布时间】：2015-01-06 11:56:41
【问题描述】：

这是我需要的输出！

这是我尝试实现这一目标的方法：

win = Ext.create('Ext.window.Window', {
                height: 650,
                width: 500,
                layout: 'fit',
                border: false,
                bodyPadding: 10,
                modal:true,
                itemId:'serviceCallWindow',
                header: {
                    cls: 'n-service-call-window-header',
                    height: 80,
                    items:[{
                        xtype: 'component',
                        floating: true,
                        autoShow: true,
                        shadow: false,
                        focusOnToFront:false,
                        defaultAlign: 't',
                        autoEl: {
                            tag: 'img',
                            src: NG.serverMapPath('~/resources/images/support/support_icon.png')
                        },
                        componentCls: 'n-service-call-support-icon'
                    }]
                },
                items: [{
                    xtype: 'servicecall',
                    border: false,
                    bodyPadding: 10
                }]
            });

挑战是在窗口标题和正文之间获取服务调用图标。

我怎样才能做到这一点？

【问题讨论】：

你用的是什么 CSS？

标签： css extjs window z-index floating

【解决方案1】：

这可以通过操纵 CSS 和各种布局来实现。您可能还需要摆脱标题并实际制作自己的“关闭”按钮，该按钮将触发 Windows close 方法。

如下：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        win = Ext.create('Ext.window.Window', {
            height: 300,
            width: 500,
            border: false,
            bodyPadding: 10,
            header: false,
            modal: true,
            layout: 'vbox',
            itemId: 'serviceCallWindow',
            items: [{
                xtype: 'container',
                /*layout: {
                    type: 'hbox',
                    pack: 'center'
                },*/
                width: '100%',
                items: [{
                    xtype: 'image',
                    cls: 'testLogo',
                    style: {
                        margin: '0 auto',
                        width: '50px',
                        display: 'block'
                    },
                    src: 'http://placehold.it/50x50'

                }, {
                    xtype: 'button',
                    cls: 'testClose',
                    style: {
                        top: 0,
                        right: 0,
                        position: 'absolute'
                    },
                    icon: 'http://placehold.it/20x20',
                    listeners: {
                        click: function() {
                            win.close();
                        }
                    }

                }],
            }, {
                xtype: 'container',
                border: false,
                bodyPadding: 10,
                html: 'this is the content of another container'
            }]
        });
        win.show();
    }
});

演示：https://fiddle.sencha.com/#fiddle/g6t

【讨论】：