PDA

View Full Version : Loading Indicator is positioned wrong



Qtx
25 May 2011, 2:44 AM
All browsers.

When a panel is rendered, I start loading data and set panel.setLoading(true) in a afterrender event. In that case the loading indicator is positioned wrong. See the picture. The complete code is here, name it
test.html and place into example/window


<!DOCTYPE html>
<html>

<head>
<title>Test</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<style type="text/css">
#header
{
background: #7F99BE url(../layout-browser/images/layout-browser-hd-bg.gif) repeat-x center;
}

#footer
{
background: #7F99BE url(../layout-browser/images/layout-browser-hd-bg.gif) repeat-x center;
}
</style>

<script type="text/javascript" src="../../bootstrap.js"></script>

<script type="text/javascript">
Ext.onReady(function(){

header = Ext.create('Ext.panel.Panel', {
id: 'header',

xtype: 'panel',
region: 'north',
border: true,
draggable: false,
autoScroll: false,
split: false,
collapsible: false,
baseCls: '',
margins: '3 3 3 3',
height: 30,

contentEl: 'header_content'
});

footer = Ext.create('Ext.panel.Panel', {
id: 'footer',

xtype: 'panel',
region:'south',
border: true,
draggable: false,
autoScroll: false,
split: false,
collapsible: false,
baseCls: '',

margins: '3 3 3 3',
height: 20,

contentEl: 'footer_content'
});

menu_area = Ext.create('Ext.panel.Panel', {

id: 'navigation_menu',

xtype: 'panel',
region: 'west',
draggable: false,
split: false,
collapsible: false,
width: 260,
minWidth: 260,

margins: '0 3 0 3',

border: true
});

body_area = Ext.create('Ext.panel.Panel', {
xtype: 'panel',
region:'center',
border: true,
draggable: false,
autoScroll: true,
split: false,
collapsible: false,

margins: '0 3 0 0',

listeners: {
afterrender: function (panel) {
body_area.setLoading(true);
}
}
});

viewport = Ext.create('Ext.Viewport', {
layout: 'border',
border: false,
renderTo: Ext.getBody(),

items: [header, menu_area, body_area, footer]
});
}); // Ext.onReady
</script>

</head>

<body>

<div class="x-hidden">

<div id="header_content">
</div>

<div id="footer_content">
</div>

</div>

</body>

</html>