how to set an absolute position for a floating panel?

[MPeg]

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?

[NickT]

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?

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

[manoveg]

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

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

 {
                    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.

[mayasse]

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';