Results 1 to 3 of 3

Thread: Spotlight with Panel in card layout does not bind

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Vote Rating

    Default Spotlight with Panel in card layout does not bind

    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'){;
    }else if (!id &&{;

    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?

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    I would first debug the applyBounds method to see if that's where the bug is.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Vote Rating


    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'});
      = bd.createChild({cls:'x-spotlight'});
            this.bottom = bd.createChild({cls:'x-spotlight'});
            this.all = new Ext.CompositeElement([this.right, this.left,, 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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts