Удаление границ окна в ExtJs 4.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 Свойство конфигурации и найдите его в отображаемом 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;',
});