ExtJS 4: Windows within a Container
I have an application that opens windows in the centre region of a viewport (with a border layout) that also has east, west and south regions. As far as I can tell there are two ways to open these windows and both have caveats.
The 开发者_Python百科first is to use .add() to add the window component to its container (the centre region). This method suffers from the following problems:
Windows are not repositioned as the east/west regions are expanded/collapsed. For example, with a west region 200px wide, if the west region is collapsed and a window positioned 150px from the west edge of the centre region, then the west region is expanded, the west edge of the centre region will move by 200px, but the window will stay in place, overlapping the expanded west region. If any attempt to move the window is made, it will snap back to the west edge of the centre region due to its
constrainHeader: truesetting, but it should be repositioning on the expand/collapse.Z-Index Management: The window is only constrained by its header, so the body of the window is able to be dragged below the south edge of the centre region. Ideally, when positioned in such a manner, it should appear below the south region, but it appears above. Likewise, if the east or west regions are floated (not expanded), they should also appear above any windows positioned close enough to overlap. It would appear that although the windows are added as children of the centre region, they are not actually DOM children of the centre region's element, thus their z-indices are not relative to the centre region but to the page body. So even using a custom ZIndexManager with a custom zseed, it is not possible to guarantee that the z-index of all open windows will remain below that of the other regions.
When a window is expanded and restored back to its original size, its original position is shifted to the right by an amount equal to the visible width of the west region - a small amount if the region is collapsed, as only the header is visible, otherwise the full width.
The second way to open windows is using the renderTo config option, with the centre region's element as its value. This solves problems 1) and 2) above - windows are correctly repositioned when the east/west regions are expanded/collapsed and, due to the window's elements being actual DOM children of the centre region's element (and thus their z-indices are relative to the centre region), the z-index management issues are no longer issues. However:
The Ext.AbstractComponent documentation states not to use renderTo when adding the component as a child component of some container, as the containers layout manager should handle it. Is this relevant for floated components?
A similar issue to 3) above - windows maximise and restore just fine, but a similar eastward migration happens when dragging-and-dropping the window, and it is a lot more obvious. Whenever you drop a window, it is positioned some amount to the right of where it was dropped, with the amount being equal (or close to) the visible width of the west region. When the west region is expanded, this is particularly jarring.
All of these issues (except the maximise-restore one) can be seen in this simple application:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-4.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [{
region: 'west',
width: 200,
collapsible: true,
collapsed: true,
html: 'West Region'
}, {
region: 'center'
}, {
region: 'east',
width: 200,
collapsible: true,
collapsed: true,
html: 'East Region'
}, {
region: 'south',
height: 50,
html: 'South Region'
}]
});
var win = Ext.create('Ext.window.Window', {
//renderTo: viewport.layout.regions.center.getEl(), // using renderTo
width: 400,
height: 300,
title: 'Test',
constrainHeader: true
});
viewport.layout.regions.center.add(win); // using add()
win.show()
});
</script>
</head>
<body>
</body>
</html>
Does either one of these approaches have an advantage over the other, and can it be adapted to overcome all listed issues?
UPDATE:
Something that probably should have occurred to me earlier is to use both methods together. Doing so means windows are correctly repositioned when the east/west regions are expanded/collapsed, there are no z-index issues and windows don't position themselves incorrectly when maximising/restoring. Good news! HOWEVER, windows still don't position themselves correctly when dragging and dropping, and this is easily the most obvious and annoying issue. Any ideas on why this is happening and how to stop it (short of manually subtracting the width of the west region from the windows x position when it is dropped)?
加载中,请稍侯......
精彩评论