2

我是 ExtJS4 的新手。我正在 ExtJs4 Docs 中测试一些简单的演示。我发现 Panel 的 header 总是比 panel 的 body 小一点，而且里面的 panel 也更小。标题总是比使用 Firebug 测量的正文短 11 像素。我在 FF、IE8、Chrome 中测试代码，它们都将其呈现为屏幕截图显示的内容（图片链接）。对不起我的英语不好。我对这个问题感到困惑，请帮助我。

屏幕截图链接：

http://i.stack.imgur.com/vb2Xo.jpg

                or

http://www.tu265.com/di-c870adf0409aa61a99c774186dd9afa8.jpg

我的js代码：

Ext.create('Ext.panel.Panel', {
    title: 'container panel',
    renderTo: 'container',
    width: 400,
    height: 300,
    layout: 'accordion',
    items: [{
        tools: [{ type: 'gear', handler: function () {
            Ext.Msg.alert('msgWindow', 'btn is Clicked');
        }
        }, { type: 'refresh'}],
        title: 'panel1',
        xtype: "panel",
        html: "insidePanel1"

    }, {
        title: 'panel2',
        xtype: "panel",
        html: "insidePanel2"
    }, {
        id: 'panel3',
        title: 'panel3',
        xtype: "panel",
        html: "insidePanel3"
    }]
});
Ext.create("Ext.Button", {
    renderTo: 'container',
    text: "open panel3",
    handler: function () {
        Ext.getCmp('panel3').expand(true);
    }
});

html代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Layouts</title>
<link href="../../ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../../ext-4.0.7-gpl/ext-all-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//js code
</script>  
</body>
</html>
4

3 回答 3

1

您的代码在我的 PC（FF、IE 8 和 Chrome）上运行良好。所以我认为您可以通过以下几种方式进行尝试：

  • ext-all-gray.css或ext-all-access.css代替ext-all.css.
  • ext-all.js而不是ext-all-debug.js.
  • ext-4.0.7-gpl从 Sencha 网站重新下载。
于 2012-04-17T08:07:05.633 回答
0

例如，您可以使用自己的 css 文件和这样的规则

.x-panel-body .x-panel-header-text{
    font-size:12px;
    font-weight:bold;
}​

看一个工作示例

于 2012-04-15T07:53:43.757 回答
0

我有类似的事情。尝试设置 scopeResetCSS = false，有时它带有演示示例，所以只需评论它们。

//Ext.scopeResetCSS = true;
于 2012-04-16T20:04:21.357 回答