CODEWITHSUNDEEP
cssextjsextjs4extjs4.2
Razgriz
Razgriz

Reputation: 7343

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.

Upvotes: 0

Views: 2213

Answers (2)

Gama_aide
Gama_aide

Reputation: 61

This works for me:

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

Upvotes: 0

MarthyM
MarthyM

Reputation: 1849

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.

Upvotes: 4

Related Questions