Ext JS 6 Viewport issue insane width calulated

[beaver870426]

I'd like to ask about how the viewport size is calculated in extjs6? we're migrating from Ext 4 to ext 6 and im new to the extjs. My problem are the followings. I have a login panel which loads, when the first time loads it calculates the following values:

height: 1060px
width: 20019px;
position: relative;
left: 0px;
top: -426px;


When I load it in second time the following values are calculated:

height: 618px;
width: 1350px;
z-index: 18996;
left: 0px;
top: 0px;

What could cause this insane with (20019px) when i first load the page? The login panel is extended from Ext.window.Window

[Animal]

We'd need to see some code. No idea what you're doing.

[beaver870426]

We'd need to see some code. No idea what you're doing.

I'm sorry here are they:

LoginFormPanel: https://pastebin.com/viuEs6F1
css: https://pastebin.com/1VXYENZd
viewport: https://pastebin.com/X5hL6eQQ

[Animal]

Seems strange that Viewport extends Whatever.view.LoginFormPanel

I can't visualize what you're doing

[beaver870426]

Seems strange that Viewport extends Whatever.view.LoginFormPanel

I can't visualize what you're doing

Animal, do you think should I try to extend with Ext.viewport?

[Animal]

It depends what you want.

Do you want a special Viewport (A Viewport encapsulates the browser window, and lays out contained components)?

Or a Window which floats above inline components?

[beaver870426]

It depends what you want.

Do you want a special Viewport (A Viewport encapsulates the browser window, and lays out contained components)?

Or a Window which floats above inline components?

I'd like a simple viewport with a loginFormPanel centered within it.

[Animal]

Just create an Ext.Window (classic) or Ext.Dialog (modern). They show in the center