PDA

View Full Version : How to remove double border from adjacent panels?



Just-Boris
4 Dec 2012, 7:34 AM
I have two ajacent panels, arranged by hbox layout


Ext.onReady(function(){
var panel = Ext.widget('viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
flex: 1,
html: 'first panel'
}, {
xtype: 'panel',
border: '0 1 1 1',
flex: 1,
html: 'second panel'
}]
});
});

I want to remove double border between panels.
I try to set border: '0 1 1 1' to second panel, but it had no effect.
Setting style: {borderWidth: '0 1px 1px 1px'} didn't help too.
Set style: {borderWidth: '0 1px 1px 1px'} helps, until there is no toolbars.
If I decide to add topbar to second panel, between toolbar and panel body will hasn't border, but between toolbar and first panel appear double border again.
How I can describe boundaries so that between all elements boundary will be single?
Here is my codepen example: http://codepen.io/Just-Boris/pen/bdsrn

mitchellsimoens
6 Dec 2012, 7:49 AM
First thought is it doesn't seem like you need to use panel there but can just use component (or container if you need child items but no title)

Just-Boris
6 Dec 2012, 11:39 PM
I helps me in this case, but what would I do if I need to create more difficult interface?
http://codepen.io/Just-Boris/pen/fDnjK
In this case first panel become grid, and second panel has title.
There is are needed panels and problem still remains.