1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default Spotlight with Panel in card layout does not bind

    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'){
    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,087
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would first debug the applyBounds method to see if that's where the bug is.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    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
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    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:

    Code:
    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.

Thread Participants: 1

Tags for this Thread