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.