Window Blinds
What is it?
A window blind is a design technique used to display or gather context sensitive information from a user working within a window. The content or prompt being displayed is bound to the window and is shown based on particular application level events in which the user must take action before proceeding. Think of things like confirmations, error messages, detail drill downs, etc as things that can ride on a blind. I think of them as modal dialogs for the window itself.
Blinds can be found in a lot applications that run on Mac, however they don't seem to popup in UI designs for Windows based applications. The classic implementation of a blind is to animate a panel into view from underneath the window's header. The blind is a layer on top of the window's body and the focus of the interaction (modal). In order for the user to continue working in the Window, the blind must be hidden or dismissed.
An Ext Window Blind solution
I've spent the better part of the last year developing an application for a client using Ext 1.x. The whole single page web desktop theme where user interaction with the system is driven with dialog windows, specifically extensions of Ext.BasicDialog. So the initial solution for the window blind was based on 1.1, the version being presented here is for 2.0.
In any case in 2.0 terms the blind can be thought of as a layer, even though it doesn't extend the Ext.Layer class. In other ways it is similar to a panel, but it doesn't extend Ext.Panel. As a layer the blind floats on top of the window. When it is shown the blind masks the window and subsequently when it is hidden it unmasks the window. As a layer the blind also supports a shadow, giving it a visual representation of being higher in the stack order. As a panel the blind contains a body element that can contain just about any type of content from simple markup to Ext.Panels (examples to follow include text, form and grid). In addition the blind's footer contains a button container for rendering register buttons.
The blind supports all the animation and easing effects of the Ext.Fx library for bringing the blind into or out of view.
View the demo here.
TODOs:
This is just the first cut of the solution. There maybe issues if a blind is used more than once and the parent window has been resized. In particular the GridBlind may have issues. I have solved these problems with my solution that was based on 1.1x and will migrate the changes soon.