border layout and top border in north panel

[Geraldf]

I have a border layout with a panel including to buttons in the north panel. it seams, that the panel with the two buttons has a top value of 0 and overwriting the top borderline in the north panel, and I cannot get it moving down.

Here is a picture of it
14.02.13_21_31-Bildschirmkopie.jpg14.02.13_21_27-Bildschirmkopie.png

Here is the code showing the issue.

Ext.define('bcmWeb5.Viewport', {
    renderTo: Ext.getBody(),
    extend: 'Ext.container.Viewport',
    alias: 'widget.test',
    requires: [
        'Ext.tab.Panel',
        'Ext.layout.container.Border',
    ],
    layout: {
        type: 'border'
    },
    border: false,
    frame: false,
    items: [{
            region: 'west',
            xtype: 'panel',
            title: 'west',
            padding: '0 5 0 0',
            width: 150
        }, {
            //margins: '5 5 0 0',
            region: 'center',
            xtype: 'tabpanel',
            items: [{
                    title: 'Center Tab 1'
                }
            ]
        }, {
            region: 'north',
            xtype: 'panel',
            border: false,
            frame: false,
            items: [{
                    xtype: 'curuser'
                }],
            height: 100
        }]
});


Ext.define('bcmWeb5.CurUser',
        {
            extend: 'Ext.Panel',
            alias: 'widget.curuser',
            height: 100,
            border: false,
            frame: false,
            layout: {
                type: 'hbox'




            },
            items: [{
                    html: '',
                    flex: 1
                }, {
                    xtype: 'panel',
                    border: false,
                    frame: false,
                    id: 'bbb',
                    bodyStyle: {
                        background: 'transparent',
                        padding: '10px'
                    },
                    align: 'stretch',
                    height: 100,
                    defaults: {
                        width: 100


                    }, layout: {
                        type: 'vbox'
                    },
                    width: 100,
                    items: [{
                            xtype: 'button',
                            iconCls: 'aimg',
                            text: 'TestButton',
                            textAlign: 'left',
                            action: 'b1'
                        },
                        {
                            xtype: 'button',
                            iconCls: 'aimg',
                            text: 'TestButton2',
                            textAlign: 'left',
                            action: 'b2'
                        }
                    ]






                }]


        }
);


Ext.onReady(function() {
    var window = Ext.createWidget('test');
    window.show();
});

[mitchellsimoens]

The parent panel of the button is using height : 100, why not use the layout more and use flex config instead?

[Geraldf]

Hi Mitchel,
good idea, Done it.

thanks.
Gerald