Modal Mask

Technical Q&A
1

Hi,

I was wondering if it was possible to mimic the “modalMask” feature which is available in the Window
widget (greys out everything except the window itself), but for non-root canvas/layout widgets …

I’d like to constrain the user to one specific sub-layout within a multi-layout screen and accompany them in
a “wizard”-like approach … Something similar to what Ext-JS calls Spotlight, which can be seen @
http://dev.sencha.com/deploy/dev/examples/core/spotlight.html …

I’ve played around with showClickMask() and bringToFront(), etc but I believe non-root layouts can’t be
changed their Z-order …

Any idea how this could be achieved using SmartClient 8, other than deparenting the concerned layouts
and manually managing their TOP/LEFT/HEIGHT/WIDTH properties to artificially align with their now
deparented container ?

Thanking you in advance for any suggestions or ideas on how to achieve something similar in the
simplest way possible …

Kind regards,

2

Anyone know how I could implement something similar to the Ext-JS Spotlight using the SmartClient JS framework ?

Thanks,

3

Hi,
You’re basically correct here – the built-in APIs to use are showClickMask() and bringToFront() but this limits you to unmasking top-level components only.

Your suggested approach of deparenting a component, redrawing it in the same position as a top level component and showing the click mask to mask everything else on the page would be a possibility.

Basically you’d want to:

  • call getPageRect() to determine the component’s size / position
  • create a LayoutSpacer sized to the result of getVisibleWidth() / getVisibleHeight() on the component
  • deparent() the component and add the layoutSpacer at the same spot to the layout
  • setPageRect() to put the component back into it’s original position
  • show it, call bringToFront(), and show a click mask.

Alternatively Isomorphic could possibly implement this feature directly - please feel free to post in the wishlist forums and/or contact us offline RE feature sponsorship if you’re interested.

4

Thanks Paul,

I’ll look into this with our product management team to see if this is something they’d be willing to pay for.

For the time being, I’ve disabled all other components while in “Spotlight” mode.

I’ll let you know if there’s any interest. Thanks!