删除ExtJs4.2中窗口的边框

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',
});

我使用的是xtype窗口，因为我似乎无法使容器/面板出现，即使我添加了renderTo: Ext.getBody()，它也不起作用。

窗口是这样出现的：

​

​

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

Answer 1

删除窗口边框

如果确实希望删除窗口的边框，可以使用以下配置：

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

下面是移除窗口边框的一个工作小提琴

显示面板

但是，如果您不想使用任何窗口功能，并且可以使用容器或面板，则应该使用它们。您只需使用您提到的renderTo配置，就可以将面板呈现给主体或任何其他元素。我不知道为什么这个配置不适合你，它在下面的小提琴中完美地工作。

您可以尝试通过cls configuration属性向面板添加一个惟一类，并在呈现的HTML代码中搜索它。它有可能被正确地呈现，只是由于某种原因而不可见。

下面是绘制面板到元素的一个工作小提琴

编辑：

如果只需要显示图像，则在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;',
});