PDA

View Full Version : Extjs4 border layout north panel border at the top



Geraldf
14 Feb 2013, 12:34 PM
Hi,
I have a border layout and I cannot get rid of the top border in the north panel.
I have a panel with two buttons in the north area. It seams, that the panel with the two buttons has a top level at 0 and is "overwriting" the top borderline of the north panel.
See screen shots:
4185141852

Here is the code showing the problem:


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

droessner
15 Feb 2013, 6:46 AM
In bcmWeb5.CurUser, your first item in the items array does not have an xtype specified so it defaults to panel. Since panel has a border by default it is showing you this border. One way to fix this would be to add xtype: 'container' to the item.



{
xtype: 'container'
html: '',
flex: 1
}

Geraldf
15 Feb 2013, 10:32 AM
Hi droessner,
that was the cause of the problem.
thanks a lot
Gerald