在 ExtJs 4.2 中删除 window 的边框

Question

var myWindow = Ext.create('Ext.window.Window', {
    header: false,
    style: 'background-color: transparent; border: false',
    bodyStyle: 'background-color: transparent; background-image: url(graphics/ss_message.png); background-size: 100% 100%;',
    id: 'ss_banner',
    width: 250,
    height: component.getBox().height,
    border: false,
    bodyBorder: false,
    frame: false,
    cls: 'noPanelBorder',
});

我正在使用 window xtype，因为我似乎无法显示 container/panel，即使我添加 renderTo: Ext.getBody()，它也不起作用。

window 显示如下：

我也尝试过使用 css 我不太确定要使用哪些属性。

Answer 1

删除window边框

如果你真的想删除window的边框，你可以使用以下配置：

var myWindow = Ext.create('Ext.window.Window', {

    // ...

    // What shows the 'border' is actually just the background of the window
    // shown via padding (+ 1px of actual border)
    style: 'padding: 0; border-width: 0;',
    // Show automatically
    autoShow: true,
    // Disable resizing, if you want
    resizable: false,
});

这是 removing window borders

的工作 fiddle

显示面板

但是，如果您不想使用任何 window 功能并且可以使用容器或面板，则应该使用它们。您所需要的只是您提到的 renderTo 配置，以将面板渲染到主体或任何其他元素。我不知道为什么这个配置对你不起作用，它在下面的fiddle

中完美运行。

您可以尝试通过 cls 配置属性向面板添加唯一 class 并在呈现的 HTML 代码中搜索它。它可能正确呈现，只是由于某种原因不可见。

这是 rendering panel to element

的工作 fiddle

编辑：
如果只需要显示图片，ExtJS中有图片组件，Ext.Img。您可以按照我为面板描述的方式使用此组件。

Answer 2

这对我有用：

var myWindow = Ext.create('Ext.window.Window', {
    // What shows the 'border' is actually just the background of the window
    // shown via padding (+ 1px of actual border)
    style: 'padding: 0; border-width: 0;',
});

在 ExtJs 4.2 中删除 window 的边框

Removing the borders of a window in ExtJs 4.2

css

extjs

extjs4

extjs4.2