Spotlight with Panel in card layout does not bind

[santosr666]

I have a Panel (parentPanel) with layout='card'.

Inside it, there are two FormPanels:

- vPanel: this.getLayout().setActiveItem(0);
- ePanel: this.getLayout().setActiveItem(1);

I have added a spotlight to parentPanel and an updateSpot method which is triggered every time I change the active panel. The idea is to use the spotlight when ePanel is activated:

====
spot: new Ext.ux.Spotlight({easing:'easeOut', duration: .3}),


updateSpot: function(id){
if(typeof id == 'string'){
this.spot.show(id);
}else if (!id && this.spot.active){
this.spot.hide();
}
},
====

Problem: It seems the spotlight is not bound to the active panel. So whenever the scrollbar is used the page moves but the spot stays static.

Moreover, when vPanel is smaller than ePanel and ePanel is not fully displayed in the screen (when page is bigger then the screen), the spotlight created has the vPanel size, but I'm calling my updateSpot method after setting ePanel active and after doLayout().

Have you ever faced this problem? Any clue how to solve it?

[santosr666]

Guess I know why now ...

Once Spotlight does use windows dimensions to draw the bounds:

==============================
Spotlight.js > applyBounds method:

var dw = Ext.lib.Dom.getViewWidth(true);
var dh = Ext.lib.Dom.getViewHeight(true);
==============================

And at the moment I'm calling Spotlight.show() in my parentPanel my window is still not resized with new ePanel I'm getting this error (I guess).

Any hints of how to proceed to get the new size of the window before drawing the spot will be very welcome! :-D

Cheers,