css - ExtJS 4.2.3 窗口标题和主体之间的 float 图像

Question

这是我需要的输出!

以下是我尝试实现此目标的方法:

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

挑战是获取窗口标题和主体之间的服务调用图标。

我怎样才能做到这一点？

Answer 1

这可以通过操纵 CSS 和各种布局来实现。您可能还需要摆脱 header 并实际制作您自己的“关闭”按钮，该按钮将触发 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