Extjs 4.2，如何在面板主体周围创建一个带圆角的框架答案

【问题标题】：Extjs 4.2, how to I create a frame around the panel body with rounded cornersExtjs 4.2，如何在面板主体周围创建一个带圆角的框架
【发布时间】：2013-07-09 16:38:58
【问题描述】：

我想移除一个面板框架并将其仅放置在面板主体上，

效果应该是这样的：（标题没有边框或背景，面板主体有圆角。）

这是我尝试过的：

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

我也尝试过以下 Sass 定义：

$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;

【问题讨论】：

标签： javascript extjs sass compass-sass extjs4.2

【解决方案1】：

尝试在您的 CSS 中使用 border-radius：

.myStyle
{    
    border-radius: 8px;    
}

这对我有用:)

【讨论】：

在 IE 8,7,6 中将不支持，我们必须支持它，这就是为什么 Ext 带有一个方便的框架面板配置选项，它增加了为边框提供圆形图像的能力.

【解决方案2】：

我最终这样做的方式是在主面板中嵌套另一个面板，嵌套的有一个边界半径，而主要的有一个透明的标题和一些 css twicks。

【讨论】：