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

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

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

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)

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?
In this case first panel become grid, and second panel has title.
There is are needed panels and problem still remains.