Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Germany
    Posts
    7
    Answers
    1
    Vote Rating
    0
    Geraldf is on a distinguished road

      0  

    Default Answered: border layout and top border in north panel

    Answered: border layout and top border in north panel


    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.
    Code:
    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();
    });

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

Thread Participants: 1

Tags for this Thread