1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Vicenza, Veneto, Italy
    Posts
    18
    Vote Rating
    0
    MPeg is on a distinguished road

      0  

    Default Answered: how to set an absolute position for a floating panel?

    Answered: how to set an absolute position for a floating panel?


    Hi, I setted up a floating panel to acts like a modal.

    I fixed its dimensions... well, now I want it to be horizontally centered but vertically attached to the bottom side of its container (the viewport).

    I have tried to use "Ext.Panel.setPositions(X,Y)" but with no results...

    Do you have an answer?
    Follow my blog at: MovableApp.com!
    http://twitter.com/#!/movableapp - My Sencha Touch Learning Experience

  2. I have created an example panel, that after render, sets its position. Perhaps it is just a typo in your method invocation? i noticed you used setPositions instead of setPosition?



    Code:
                {                height: 500,
                    width: 500,
                    xtype: 'panel',
                    float: true,
                    modal: true,
                    items:[
                        {html: 'asd'}
                    ],
                    listeners:{
                        'afterrender': function(panel){
                            panel.setPosition(100,300);
                        }
                    }
                }

  3. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Vote Rating
    2
    Answers
    27
    NickT is on a distinguished road

      0  

    Default


    I have created an example panel, that after render, sets its position. Perhaps it is just a typo in your method invocation? i noticed you used setPositions instead of setPosition?



    Code:
                {                height: 500,
                    width: 500,
                    xtype: 'panel',
                    float: true,
                    modal: true,
                    items:[
                        {html: 'asd'}
                    ],
                    listeners:{
                        'afterrender': function(panel){
                            panel.setPosition(100,300);
                        }
                    }
                }

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    35
    Vote Rating
    0
    manoveg is on a distinguished road

      0  

    Default unable to set absolute position of popup

    unable to set absolute position of popup


    Hi,

    I am trying to position my popup panel but above mentioned method does not seems to work for me. Please advice where i am going wrong

    Code:
    Myapp.views.appEmpfehlenPopup = new Ext.Panel({
         floating: true,
         centered: true,
         modal: true,
         width: '300px',
         height: '150px',
         border:0,
         styleHtmlContent: true,
         items:[            
         {   xtype:'box',
             html:loadURL('app/views/facebookbutton.html')
                     },
            { 
             html:loadURL('app/views/twitter.html')
            }
            
           ],
           listeners:{
               'afterrender': function(panel){
                   panel.setPosition(40,300);
                   console.log("inside after render");
               }
           },
         dockedItems: [{
           xtype: 'toolbar',
           cls:'welcometoolbar',
             title: 'Weitersagen über:',
              items: []
                }]
              });
    and the code to open the popup

    Code:
     {
                        xtype:'button',
                        name : 'cashbackAppEmpfehlen',
                        text : '',
                        border:0,
                        cls :'btncashbackappempfehlen',
                        handler:function(btn){
                            Myapp.views.appEmpfehlenPopup.showBy(btn);    
            
                        }
    
    
                        
                    },

    I am able to see the message "inside after render" so the function is called but property not applied.

  5. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    1
    Vote Rating
    0
    mayasse is on a distinguished road

      0  

    Default


    For Sencha Touch 2.1.1 I found I had to:
    - make a new CSS class: .my_modal_cssclass { position: absolute;}
    - and then set cls property on the panel: cls: 'my_modal_cssclass';