Ext.Panel使用自定义css边框显示错误

Question

我创建了一个JSfiddle来让你展示这个问题...... http://jsfiddle.net/mrgamer/u3Z48/

x-panel-body 的元素宽度计算错误，在上面的示例中设置为340px，而不是正确显示我设置的边框应该设置为338px！

屏幕截图以进一步澄清：

如何：

应该如何：

我知道这是一个非常小的'问题'，我仍然不知道如何纠正它，在像Ext.Panel这样过度使用的组件中出现这样的显示错误很烦人。

Answer 1

尝试以下

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

Answer 2

要解决问题就足以在样式配置中定义宽度，如下所示：

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

它不尽可能干净，但我认为这是ExtJS错误计算的一个不错的解决方案！