PDA

View Full Version : [4.2.1.883] toolbar alignment issue under the border layout!



andong
30 Jun 2013, 7:12 PM
var desktopViewPort = Ext.create('Ext.container.Viewport',
{
layout: 'border', border: false, items:
[
{region: 'center', ...},
{
region: 'south', height: 32, border: true, xtype: 'toolbar', items:
[
{text: 'Start Menu', menu: startMenu},
'-',
{icon: '../image/application_cascade.png'},
{icon: '../image/application_view_tile.png'},
{icon: '../image/image_1.png'},
'-',
{xtype: 'toolbar', id: 'taskBar', flex: 1},
'-',
'<p id="trayTime">00:00</p>'
]
}
]
});


The code above is created a desktop layout and the south toolbar is a taskbar.
44628
The issue is the items of the south toolbar were not show at the middle of the vertical direction, I have noticed that extra css was added to the items: top 9px;, this is the key issue. But the menu items was showed at the middle of the vertical direction after I clicked the start menu button and showed the menu.44629

Where was the extra css added? Is this a bug?

slemmon
2 Jul 2013, 12:19 AM
I've not been able to reproduce the issue you're seeing. Can you offer an inclusive test case that demonstrates the issue? In what browser or browsers are you seeing the issue?

andong
2 Jul 2013, 11:46 PM
I have found this issue under Chrome 26, IE 10 and Firefox 22.

You can reproduce this issue by whole codes below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<link href='js/extjs/resources/css/ext-all.css' rel='stylesheet' type='text/css'>
<script language='javascript' src='js/extjs/ext-all.js'></script>
<script language='javascript' src='js/extjs/locale/ext-lang-zh_CN.js'></script>
<title>Desktop</title>

<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
</head>

<script>
Ext.onReady(function()
{
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = 'js/extjs/resources/themes/images/default/tree/s.gif';

var desktopViewPort = Ext.create('Ext.container.Viewport',
{
layout: 'border', border: false, items:
[
{region: 'center', border: false, html: 'Desktop area'},
{
region: 'south', height: 32, border: true, xtype: 'toolbar', items:
[
{
text: 'Start Menu', menu: Ext.create('Ext.menu.Menu',
{
frame: true, forceLayout: true, autoHeight: true, shadow: 'frame', allowOtherMenus: true, items:
[
{xtype: 'panel', indent: false, html: 'My Profile', style: 'background: white;', height: 32},
'-',
{text: 'Wallpaper', icon: 'image/picture.png', minWidth: 200, margins: '2 0 2 0'},
{text: 'Font Color', icon: 'image/large_tiles.png', minWidth: 200, margins: '2 0 2 0'},
{text: 'Skin', icon: 'image/bonus.png', minWidth: 200, margins: '2 0 2 0'}
],
rbar: {xtype: 'toolbar', id: 'recentUsedItems', vertical: true, autoScroll: false, items: []}
})
},
'-',
{icon: 'image/application_cascade.png'},
{icon: 'image/application_view_tile.png'},
{icon: 'image/image_1.png'},
'-',
{xtype: 'toolbar', id: 'taskBar', flex: 1, border: false},
'-',
'<p id="trayTime">00:00</p>'
]
}
]
});
});
</script>

<body>
</body>

</html>

slemmon
3 Jul 2013, 2:46 PM
Your use of paragraph tags is throwing it off. Use another tag like span or anchor:


'<a id="trayTime">00:00</a>'

andong
3 Jul 2013, 5:03 PM
=D> Thanks. The toolbar is looked very well now.