ExtJS 4.2.3 floating image between window header and body

Question

Here is the output I require!

Here is how I try to achieve this:

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

The challenge is to get the service call icon between the window header and body.

How can I achieve this?

Answer 1

This is achievable through manipulating CSS and the various layouts. You would perhaps also need to get rid of the header and actually make your own "close" button which would fire the windows close method.

such as below:

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();
    }
});

Demo: https://fiddle.sencha.com/#fiddle/g6t