extjs 4 - toolbox type window (thin border, no title)?

Question

I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.

One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..

In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:

This is the code I had:

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 */

});

Is there any way to get a similar result in ext 4?

I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.

Any idea?

Answer 1

Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.

Answer 2

I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.

However, it doesn't seem to work if you have a Close button in the top right.

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

You're still going to have to style it a little, but its far closer to what you need.