Wednesday, May 2, 2012

Align Sencha Touch Overlay in Center


Recently I was working on a project where requirement was to show overlay panel with some controls and align it to center.  We know that sencha provide function showBy where we can pass an element to display overlay.

Something like this panel.showBy(element)

Overlay will be displayed adjacent to the element you pass with a triangle arrow displayed towards control. See the image below.

So to make it center I did some tweaks. See the code below.


var viewPortHeight = Ext.Viewport.windowHeight;
var viewPortWidth = Ext.Viewport.windowWidth;

var windowWidth = viewPortWidth / 2.5;
var windowHeight = viewPortHeight / 3.0;


 myPanel.setLeft((viewPortWidth - windowWidth) / 2);
 myPanel.setTop((viewPortHeight - windowHeight) / 2);

Following code is to remove that black triangle if you want.

if (discountPanel.element.dom.childNodes[1]) {

That's it and your overlay is aligned to center.


  1. Really like your blog content the way you put up the things…I’ve read the topic with great interest and definitely will stick your blog routinely for other great posts.roofing southlake

  2. Good tutorial, Please help me to point this overlay to an html element.
    i have a dive with some id
    How can i point an overlay to that div? I can able to point the overlay to a sencha component but not to a html element like div ..