Search code examples
cssextjsextjs4extjs4.2

Removing the borders of a window in ExtJs 4.2

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

I'm using the window xtype because I can't seem to make a container/panel appear, even if I add renderTo: Ext.getBody(), it doesn't work.

The window appears as such:

enter image description here

I've also tried to use css I'm rather unsure on which properties to use.

Solution

  • Removing window border

    If you really want to remove borders of a window, you can use following configuration:

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

    Here is a working fiddle of removing window borders

    Showing a panel

    However, if you don't want to use any of the window functionality and could do with a container or a panel, you should use them. All you should need is the renderTo configuration you mentioned, to render the panel to the body or to any other element. I don't know why this configuration does not work for you, it works perfectly in the fiddle below.

    You can try adding a unique class to the panel via cls configuration property and search for it in the rendered HTML code. It is possible it is rendered correctly and just not visible for some reason.

    Here is a working fiddle of rendering panel to element

    EDIT:
    If you need to display only image, there is an image component in ExtJS, Ext.Img. You can work with this component the same way I described for the panel.