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?

[mitchellsimoens]

I would first debug the applyBounds method to see if that's where the bug is.

[santosr666]

I did it ...

Unfortunatelly, I can't say precisely where is the error, but here goes my point:

What spotlight does is to draw four new "square" elements surrounding the element to be in the spot (target).

I have override the the Spotlight createElements function, because I don't want the mask to be in the header/footer of my screen, so I just change the Ext.getBody by my inner page element like below:

createElements : function(){
        
        // getting the page id
        var page = Ext.ComponentMgr.all.filterBy(function(c) {
          return c.getXType() == 'tpage';
        });


        var bd = Ext.get(page.items[0].id);


        this.right  = bd.createChild({cls:'x-spotlight'});
        this.left   = bd.createChild({cls:'x-spotlight'});
        this.top    = bd.createChild({cls:'x-spotlight'});
        this.bottom = bd.createChild({cls:'x-spotlight'});


        this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
    }

My target element is a Panel, layout='card' with two inner FormPanels of different sizes. When smaller panel is active (FormPanel1), the screen has no scrollbar and everything is fine. Then, when activating the second and bigger panel (FormPanel2) the scroll get's in the scene and the Spotlight is triggered, but it looks like the Spotlight belongs to the main window and it does not move with the scrolling.

My guess is the Spotlight (maybe bottom element) has the size it should have if both panels have the same size. So, it is possible that the Spotlight is getting the size of the Panel+FormPanel1 and not Panel+FormPanel2.

Or maybe the size of my inner page ( var bd = Ext.get(page.items[0].id) was not the new one in the moment the Spotlight has been created.

Note: I'm creating the Spotlight after this.doLayout(); inside my main panel.

Thanks for the help.