PDA

View Full Version : ext.window not centered



Traktopel
8 Jul 2009, 12:33 AM
Hi all,

First of all, thanks for your awesome work guys.

I notice a change from 3.0-rc2 to 3.0 ...

We have a window to authenticate users so there is nothing else at start but this window.

With 3.0-rc2, this window is well centered (like documentation said) .. but when testing with ext 3.0 it moved to the bottom of the screen, although no code change.

When looking for the DOM differences, we notice that :


<div id="loginbox-window" class=" x-window nws-padding" style="position: absolute; z-index: 9003; visibility: visible; left: 440px; top: 357px; width: 390px; display: block;">


<div id="loginbox-window" class=" x-window nws-padding" style="position: absolute; z-index: 9003; visibility: visible; left: 440px; top: 258px; width: 390px; display: block;">Just the css top attribute changes .... Did we miss something ??

Thanks in advance.
Have a good day.

aconran
8 Jul 2009, 4:45 AM
Can you create a testcase? What code are you using to generate the Window? Did you open up firebug which shifts the center of the window?

Traktopel
8 Jul 2009, 6:21 AM
Here you are ... I would have posted that on the previous post .. sorry

the js code :



Ext.onReady(function(){

var usernameTextField = new Ext.form.TextField({
fieldLabel: 'Username',
id: 'username',
inputType: 'text',
enableKeyEvents: true,
allowBlank: false,
msgTarget: 'side',
minLength: 1,
maskRe: /^\w+$/
});

var passwordTextField = new Ext.form.TextField({
fieldLabel: 'Password',
id: 'password',
inputType: 'text',
enableKeyEvents: true,
allowBlank: false,
msgTarget: 'side',
minLength: 1,
maskRe: /^\w+$/
});


var logInButton = new Ext.Button({
text: 'Log in',
disabled: false,
id: 'login-signup-button'
});

var loginForm = new Ext.form.FormPanel({
id: 'loginForm',
frame: true,
defaults: {
labelSeparator: ''
},
labelWidth: 130,
autoHeight: true,
cls: 'nws-padding',
items: [usernameTextField, passwordTextField]
});

var dlg = new Ext.Window({
id: 'loginbox-window',
title: 'loginbox-window',
modal: true,
autoHeight: true,
width: 400,
cls: 'nws-padding',
buttonAlign: 'center',
iconCls: 'nws-key-icon',
resizable: false,
draggable: false,
closable: false,
defaults: {
labelSeparator: ':'
},
items: loginForm,
buttons: [logInButton]
});
dlg.show();
});
The html :



<!--DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"-->
<html>
<!-- coding:utf-8 -->
<head>
<title> title </title>
<link rel="shortcut icon" href="/res/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" id="ext-thema">
<!-- ExtJS 3 Framework -->
<link rel="stylesheet" type="text/css" href="libs/ext-3.0-rc2/resources/css/ext-all.css">

</head>
<body>
<!-- ExtJS 3 Framework -->
<script type="text/javascript" src="libs/ext-3.0-rc2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="libs/ext-3.0-rc2/ext-all-debug.js"></script>
<!-- prod -->
<script type="text/javascript" id="ext-locale"></script>
<script type="text/javascript" src="toto.js"></script>
</body>
</html>
I also attached both screenshots (I only replace ext-3.0 by ext-3.0-rc2) :

evant
8 Jul 2009, 6:25 AM
You need to give the window an explicit height.

Traktopel
8 Jul 2009, 6:40 AM
Thanks Evant,

The window seems to be centered when setting a fixed height.

Is this new from 3.0-rc2 to 3.0 .. I don't remember that shift with the autoHeight token set to true ?

We also add to this window a collapsible panel (options part)... so we need to change the window size on the collapse event of the panel ?

evant
8 Jul 2009, 6:47 AM
autoHeight has never been supported correctly cross browser for auto heights.