2
Ich bin neu zu ExtJS4. Ich teste einige einfache Demos in ExtJs4 Docs. Ich finde, dass die Kopfzeile des Panels immer etwas kleiner ist als die des Panels, und das Panel innen ist auch kleiner. Der Header ist immer 11px kürzer als der Körper unter der Maßnahme mit Firebug. Ich teste den Code in FF, IE8, Chrome, alle machen es wie das, was der Screenshot zeigt (der Bildlink). Entschuldigung für mein schlechtes Englisch. Ich bin verwirrt mit diesem Problem, hilf mir, bitte.ExtJS4 Panel Header ist immer kleiner als der Körper
der Screenshot Link:
http://i.stack.imgur.com/vb2Xo.jpg
or
http://www.tu265.com/di-c870adf0409aa61a99c774186dd9afa8.jpg
mein 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>