Ext.Window, DOM e performance

[tarini]

I'm trying to evaluate Ext.Window performance analyzing page DOM.

This is my test code:


function init() {
var window = new Ext.Window({
height:300,
width: 400,
items: new Ext.Panel({html:'test'})
});
window.render(Ext.getBody());
window.show();
}

Ext.onReady(init);



With firebug I discovered some interesting thing and i would like to share with you.
A Ext.Window translate itself in different <div> element with these classes (i think class is a good ID to identify divs):
- x-window x-resizable-pinned: rappresent the visible window
- x-shadow: rappresent the shadow of the window (it's simpli positioned behind window with a little offset)
- x-resizable-proxy x-unselectable: rappresent the window proxy (the trasparent rectangle using when you resize the window - it starts hide)
- x-window-proxy: misterious div... (after some experiments it has always been hidden... mah)

There are some <div> element reguarding a Ext.Window that is created automatically when you do something with the window:
- x-panel-ghost: rappresent the "fake" window that moves when you d&d the window (it's created when you start dragging and it's destroyed from DOM when you drop window - it has a short life)
- x-resizable-overlay x-unselectable: a misteriuos div than initially doesn't exists but when you resize the window for the first time will appear and never go away; its dimension are fixed and they neved changed: when you start resizing the window it appear and when you end resizing it become hidden.

My next experiment is about modal window and the different between this behaviour and the original one.
Obviously modal window needs another div that is the one with the class "ext-el-mask" that rappresent the grey mask behind window but over all other elements.


I left you with two question:
- what rappresents the "x-window-proxy" div?
- what rappresents the "x-resizable-overlay" div and why it is created onresize and it never gets destroyed like the ghost-panel?

I hope that you'll fin this thread interesting :)

[tarini]

In my next experiment, i trying to undestand behavour when you close/destroy window

I discovered that if you close the window every divs but x-shadow are destroyed. why?? it's a little bug or it's a known thing??

When you set window hidable (using closeAction:'hide') every divs but x-window are hide via CSS while the window "core" div are simply moved in a remote and hidden position (-10000px right e -10000px right) but it's still visible (display:block). why??