开发者

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

开发者 https://www.devze.com 2023-04-03 18:19 出处:网络
I\'m trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.

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..

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

In ext4 , I can't seem to be开发者_如何学C able to reproduce that same result. Here's what the same code looks like in ext 4:

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

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?


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号