PDA

View Full Version : border layout and top border in north panel



Geraldf
14 Feb 2013, 1:44 PM
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
4185641857

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
17 Feb 2013, 8:41 AM
The parent panel of the button is using height : 100, why not use the layout more and use flex config instead?

Geraldf
18 Feb 2013, 12:07 AM
Hi Mitchel,
good idea, Done it.

thanks.
Gerald