Question

我是ExtJS4的新手。我正在测试ExtJs4 Docs中的一些简单演示。我发现Panel的标题总是比面板的主体小一些，面板内部也是samller。标题总是比使用Firebug测量的主体短11px。我测试了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>

Answer 1

您的代码在我的电脑上运行正常（FF，IE 8和Chrome）。所以我认为你可以通过几种方式尝试：

ext-all-gray.css或ext-all-access.css代替ext-all.css。
ext-all.js代替ext-all-debug.js。
从Sencha网站重新下载ext-4.0.7-gpl。

Answer 2

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

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

查看working example

Answer 3

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

//Ext.scopeResetCSS = true;

ExtJS4 Panel的标题总是小于正文

3 个答案: