0

I would like to remove a panel frame and place it on the panel body only,

the effect should look like this: ( the header has no border or background and the panel body has rounded corners.)

enter image description here

here is what I have tried:

Ext.define('SomePanel', {
    extend: 'Ext.panel.Panel',
    frame: true,
    frameHeader: false,
    cls: 'x-portlet'
});

I have also tried with the following Sass definitions:

$panel-body-border-color:Gray !default;
$panel-body-border-width:1px !default;
$panel-header-background-color:transparentize(Gray,1) !default;
$panel-header-color:#30495c !default;
$panel-header-border-width:0px;
AMember
  • 3,037
  • 2
  • 33
  • 64

2 Answers2

1

The way I ended up doing this was by nesting another panel within the main panel, the nested one has a border radius, while the main one has a transparent header with a few css twicks.

AMember
  • 3,037
  • 2
  • 33
  • 64
0

try to use border-radius in your CSS:

.myStyle
{    
    border-radius: 8px;    
}

This did the trick for me :)

further informations: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

nemesis
  • 68
  • 2
  • 7
  • that will not be supported in IE 8,7,6 and we must support it, this is why Ext comes with a handy config option for framing panels, it adds the ability to have round images for border. – AMember Jul 12 '13 at 20:26