Comportamiento de diseño de borde invertido de ExtJS

I have a border layout with all regions in use.

As you know the normal behavior of a borderlayout is that you define initial sizes for the north, south, east and west regions and the center gets the rest of the available space.

In my case I need to invert this. I want the center, the west and the north region to have a defined size and want to make all the other regions to get the rest of the available space. If I resize the browser window the outer regions must not flow over the center content.

Actually the center gets all the space when no sizes are defined for the outer regions and if i resize it only the center region shrinks and its content is violently deformed or overlayed by the other regions.

¿Alguien sabe como hacer esto?

preguntado el 01 de febrero de 12 a las 13:02

Can you make a sketch of how you would like it to look like? -

Me gusta este the center and the north have hard coded sizes and the east and the south subordinate themselves to the rest available space. It is important, that the center panel is visible at any time, even if the user resizes his browser window. -

1 Respuestas

Hmm... I don't know if this is what you want. I've used vbox y hbox layouts instead to create something that might be closer to what you describe:

new Ext.Window({
    xtype: 'window',        
    layout: 'vbox',
    title: 'My Window',
    layoutConfig: {
        align : 'stretch',
        pack  : 'start'
    },
    items: [
    {
        xtype: 'panel',
        height: 100,                
        title: 'My Panel'
    }, {
        xtype: 'container',
        height: 150,
        layout: 'hbox',
        layoutConfig: {
            align : 'stretch',
            pack  : 'start'
        },
        items: [
            {
                xtype: 'panel',                        
                width: 300,
                title: 'My Panel'
            }, {
                xtype: 'panel',                    
                title: 'My Panel',
                flex: 1
            }
        ]
    }, {
        xtype: 'panel',                
        title: 'My Panel',
        flex: 1
    }]
});

Respondido 02 Feb 12, 12:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.