PDA

View Full Version : [CLOSED-169][3.0.0] The window position error when applyTo a nested div



arron
22 Aug 2009, 6:22 PM
The window position erro when applyTo a nested div.

The html:


<body><div id="j_id8_html">
<div id="j_id9_html"></div>
</div></body>


The JS:

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({autoShow:true,width:200,text:'win',
height:150,title:'Window',
id:'j_id9',applyTo:'j_id9_html',closeAction:'hide'});
}
win.show(this);
});
});

Window shows half

arron
22 Aug 2009, 6:33 PM
you can reproduce the problem use the 3.0 doc example/window/hello.html. like this:


<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<div>
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World 1">
<p>Hello...</p>
</div>
<!-- Auto create tab 2 -->
<div class="x-tab" title="Hello World 2">
<p>... World!</p>
</div>
</div>
</div>
</div>
<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>

</body>

move the <div id="hello-win" class="x-hidden"> After the body.and add a div.

mjlecomte
23 Aug 2009, 8:45 AM
Thanks for the report. In the future, it is very helpful if you post a working test case, along with a screenshot.



<html>
<head>
<title>Window Test</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window({

applyTo:'hello-win',
applyTo:'x-window-header', // positions window so top half is beyond top edge of browser window

html: 'something',
title: 'some title',
layout:'fit',
width:500,
height:300
}).show();
});
</script>

</head>
<body>
<div id="hello-win">
<div id="x-window-header">Hello Dialog</div>
</div>
</body>
</html>

mystix
23 Aug 2009, 8:53 AM
@mj - you've got a duplicate applyTo config in your test case.

mjlecomte
23 Aug 2009, 8:57 AM
yeah, the second supersedes the first and causes the problem. someone can comment out the second and see it working properly. So, yes, but it was intentional.

mjlecomte
23 Aug 2009, 8:59 AM
Thinking more about this, I guess this may be more misuse than bug.

evant
23 Aug 2009, 6:16 PM
I agree with MJ. In this case, you're applying it to (basically rendering to), a div that doesn't have any dimensions. You need to give the outer div dimensions because the window is floating.

Marking this as closed.

arron
24 Aug 2009, 5:28 AM
oh!sorry,l don't find the attachments button. haha!=P~