Align Sencha Touch Overlay in Center

Hello,

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.


myPanel.showBy(ele);

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

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

myPanel.setWidth(windowWidth);
myPanel.setHeight(windowHeight);

 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]) {
         myPanel.element.dom.childNodes[1].parentNode.removeChild(myPanel.element.dom.childNodes[1]);
        }        

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