Cascading Windows

[NBRed5]

Animal,

Have you tried using your cascade method on windows that are constrained to one particular region of a viewport. I does not work as getPosition returns the global page cordinates and not the coordinates within the constraining element.

Try the following:

var p = this.el.translatePoints(prev.getPosition()[0], prev.getPosition()[1]);;
this.x = p.left + o;
this.y = p.top + o; 

[NBRed5]

Animal,

Just read up from API docs for BoxComponent.getPosition and founfd the following:

getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Parameters:
local : Boolean
(optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
Array
The XY position of the element (e.g., [100, 200])

So instead of the code I posted below you could use getPosition(true) and it would work for constrained windows as well.

[bpjohnson]

Animal,

Have you tried using your cascade method on windows that are constrained to one particular region of a viewport. I does not work as getPosition returns the global page cordinates and not the coordinates within the constraining element

Animal's plugin, while very elegant, also misses two features of my take on cascading that I seem to have failed to have previously mentioned:

If your windows bump the bottom of their container (or viewport), they'll start back over at the top, shifted a bit further right.

Also, if you call win.cascade() the window will return to it's original position. This could be used in something like this:

var cleanUpWindows = function (mgr) {
    mgr = (mgr)?mgr:Ext.WindowMgr;
    mgr.each(function(win) {
      if(win.minimized || win.hidden){
        win.show();
      }
      if (win.cascaded) {
        win.cascade();
      }
      win.toFront();
    });
}; 

Although neither would be difficult to re-implement using Animal's code.

[Animal]

OK, that's a bit of extra functionality you have.

Really the only thing I added was use of the previous sibling window to calculate the new window position, so it cascaded from wherever the last window in the heirarchy happened to be placed. I think that's a neat idea.

[bpjohnson]

OK, that's a bit of extra functionality you have.

Really the only thing I added was use of the previous sibling window to calculate the new window position, so it cascaded from wherever the last window in the heirarchy happened to be placed. I think that's a neat idea.

Don't get me wrong, I think that's a very neat idea, too! In fact, I plan to steal it, file the serial numbers off, and incorporate it into my own code the next chance I get.

It's a much cleaner way of getting the initial position than mine. I need to play with it a bit, though, see what happens in our use cases. I'm curious, if I move the current window, make a new window, it seems the cascade be based on the previous sibling's new position? Hmm... That could cause some strange clutter.

[Animal]

OK, perhaps it should just cascade off the topmost visible Window's position? That's doable too with Ext.WindowMgr.getActive()

[frew]

Just wanted to say that the original plugin works great with Ext 3 SVN.

[Nux]

Hi.

I've made a plugin compatible with ExtJS 4.x and probably higher. It works similar to the original concept in that when window is not visible in the owner container then postion is reset to top and moved a bit to the right. You can setup details of this behavior without changing the plugin.

Note that only windows using this plugin are taken into account. Also if last window is closed then the position is reset to whatever you set to default in your window.

Anyway the Gist for my take on CascadeWindows plugin is here:
https://gist.github.com/Eccenux/75fc9f903fc594e23de7

You can also find usage examples there. A bare minimum example:

Ext.define('App.view.MyWindow', {
    extend: 'Ext.Panel',
    //...
    requires: [
        'Ext.ux.CascadeWindows'
    ],
    plugins: [
        {
            ptype: 'cascadewindows'
        }
    ],
    //...
});

I extend Ext.Panel here, but of course you can extend Ext.Window or anything similar.

[bpjohnson]

Very cool!