Home/ Questions/Q 7818153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:29:00+00:00

I am new to ExtJS4. I’m testing some simple demos in ExtJs4 Docs. I

  • 0

I am new to ExtJS4. I’m testing some simple demos in ExtJs4 Docs. I find that the header of Panel is always little smaller than body of panel, and the panel inside is samller too. The header is always 11px shorter than the body under the measure with Firebug. I test the code in FF, IE8, Chrome, all of them render it like what the screen shot shows (the image link).
Sorry for my poor English. I’m confused with this probelm,help me,please.

the screen shot link:

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

                or

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

my js code:

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 code:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code works OK on my PC (FF, IE 8 and Chrome). So I think you can try it with several ways:

    • ext-all-gray.css or ext-all-access.css instead of ext-all.css.
    • ext-all.js instead of ext-all-debug.js.
    • re-download ext-4.0.7-gpl from Sencha site.
    • 0