extjs 4 - окно типа панели инструментов (тонкая рамка, без заголовка)?

Question

Я пробую свои силы на extjs 4, пытаясь воссоздать какой-то компонент, который у меня есть в старом проекте extjs 2.

Одним из компонентов было создание плавающей панели инструментов (как в фотошопе) с тонкой рамкой и без кнопок заголовка или мин / макс / закрытие. Вот так ..

В ext4 я не могу воспроизвести тот же результат. Вот как выглядит тот же код в ext 4:

Это код, который у меня был:

app.Toolbox = Ext.extend(Ext.Window, {  

    ,initComponent : function()
    {

        Ext.apply(this,{
            closable:false,
            border:false,
            width:345, 
            height:60,
            onEsc:Ext.emptyFn,
            resizable:false,
            x:20,
            y:20,
            items:[
                /* icons (a html items) */
            ]
        });

        app.Toolbox.superclass.initComponent.call(this, arguments);

    }

    /* handlers, methods, etc */

});

Есть ли способ получить аналогичный результат в ext 4?

Я пытался использовать некоторые CSS, чтобы скрыть некоторые элементы, такие как строка заголовка, но ext 4 всегда вычисляет высоту окна, как если бы элемент был видим, что выглядит еще более странным.

Есть идеи?

Answer 1

Ext.panel.Header - это просто расширенный Ext.container.Container, поэтому вы можете делать все, что пожелаете.

Answer 2

Я думаю, что ближе всего вы получите, применив frame: true, который заставляет контент заполнять рамку окна.

Тем не менее, это не работает, если у вас есть кнопка Закрыть в правом верхнем углу.

Ext.create('Ext.window.Window', {
    height: 60,
    width: 345,
    closable: false,
    layout: 'fit',
    frame: true,
    items: {
        html: '<p>hello</p>'
    }
}).show();

Вам все еще придётся придать ему немного стиля, но он гораздо ближе к тому, что вам нужно.