css - カスタム CSS ボーダーを使用した Ext.Panel 表示エラー

Question

問題を表示できるようにJSfiddleを作成しました... http://jsfiddle.net/mrgamer/u3Z48/

x-panel-body のelement.widthが正しく計算されていません。上記の例では 340px に設定されていますが、設定した境界線を正しく表示するには、338px に設定する必要がありました。

さらに明確にするためのスクリーンショット：

それはどうですか：

それがどうあるべきか：

これは本当に小さな「問題」であることは理解していますが、それでも修正方法がわかりません。

Answer 1

この問題を解決するには、次のようにスタイル設定で幅を定義するだけで十分です。

var panel1 = new Ext.Panel({
    title: 'Inner Panel',
    height: 300,
    style: {width: '350px'},
    border: false,
    cls: 'panel_class',
    bodyCssClass: 'body_border'
});

可能な限りクリーンではありませんが、ExtJSの誤算に対する適切な解決策だと思います。

Answer 2

以下を試してください

.x-panel-body .body_border{
    padding: 2px;
    border: 1px solid red;
    margin: 1px;
}​