Hi,

i try to make an absolute layout. But i have a lot of problems with that. First i can not resize the browser the inner panels disappear.

This is my complete layout:

Code:
        
        var viewport = Ext.create('Ext.container.Viewport', {
          title: 'Absolute Layout',
          layout: 'fit',
          listeners:{
            resize: { 
              fn: function(el) {
//                pwidth=el.getWidth()/5;
//                pheight=el.getHeight();
//                Ext.getCmp('east').setPosition(0,0);
//                Ext.getCmp('east').setWidth(pwidth);
//                Ext.getCmp('east').setHeight(pheight);
//                Ext.getCmp('center').setPosition(pwidth,0); 
//                Ext.getCmp('center').setWidth(pwidth);
//                Ext.getCmp('center').setHeight(pheight);
//                Ext.getCmp('west').setPosition(pwidth*2,0);
//                Ext.getCmp('west').setWidth(pwidth);
//                Ext.getCmp('west').setHeight(pheight);
                console.info("viewport width = " + pwidth);
              }
            }
          },
          items : [ 
            // need this for bbar
            mainForm = Ext.create('Ext.panel.Panel',{
              xtype: 'panel',
              layout: 'absolute',
              //bbar: statusBar,                  
              items: [
                east = Ext.create('Ext.panel.Panel',{
                  title: 'East Region',
                  id: 'east',
                  xtype: 'panel',
                  layout: {
                    type: 'vbox',
                    align: 'stretch'
                  },              
                  anchor: '20% 100%',
                  listeners:{
                    resize: { 
                      fn: function(el) {
                        pwidth=el.up('viewport').getWidth();
                        pheight=el.up('viewport').getHeight();
                        //this.setHeight(pheight);
                        //this.setPosition(0,0);
                        this.setWidth(pwidth/5);
                        console.info("east "+pwidth/5);
                      }
                    }
                  },
                  collapsible: true,   // make collapsible
                  hideCollapseTool: true,
                  collapseDirection : 'left',
                  itemId: 'dummy-region-container'
                }),
                west = Ext.create('Ext.panel.Panel',{
                  title: 'West Region',
                  id: 'west',
                  xtype: 'panel',
                  layout: {
                    type: 'vbox',
                    align: 'stretch'
                  },              
                  anchor: '20% 100%',
                  listeners:{
                    resize: { 
                      fn: function(el) {
                        pwidth=el.up('viewport').getWidth();
                        pheight=el.up('viewport').getHeight();
                        //this.setHeight(pheight);
                        this.setPosition((pwidth/5)*2,0);
                        this.setWidth(pwidth/5);
                        console.info("west "+(pwidth/5)*2);
                      }
                    }
                  },             
                  collapsible: true,   // make collapsible
                  hideCollapseTool: true,
                  collapseDirection : 'left',
                  itemId: 'west-region-container'
                }),
                center = Ext.create('Ext.panel.Panel',{
                  title: 'Center Region',
                  xtype: 'panel',
                  id: 'center',
                  anchor: '20% 100%',
                  layout: {
                    type: 'vbox',
                    align: 'stretch'
                  },              
                  hideCollapseTool: true,
                  collapseDirection : 'left',
                  collapsible: true,   // make collapsible 
                  listeners:{
                    resize: { 
                      fn: function(el) {
                        pwidth=el.up('viewport').getWidth();
                        pheight=el.up('viewport').getHeight();
                        //this.setHeight(pheight);
                        this.setPosition(pwidth/5,0);
                        this.setWidth(pwidth/5);
                        console.info("center "+pwidth/5);
                      }
                    }
                  }
                })]
            })],
          renderTo: Ext.getBody()
        });
It is an viewport with fit layout which contains a form with absolute layout. I need this because i need a bbar and its not possible to place a bbar in a viewport. After creation the absolute panel conatins 3 inner panels and looks like this:

absolute.jpg

If i now resize the browser window center and west region disappear?!

I played with anchor and flex and the resize handler, but this is the best result i can produce.

Second problem is adding new panels. There is a lot of space on the right edge in this viewport. I need a way to add a panel dynamically on user request to the already existing mainForm.

What is necessary to add a panel to the mainForm?

Code:
        

         var addPanel = Ext.create('Ext.panel.Panel', {
          title: 'add - One Region',
          hideCollapseTool: true,
          collapseDirection : 'right',
          collapsible: true,   // make collapsible 
          layout: {
            type: 'vbox',
            align: 'stretch'
          },
          anchor: '20% 100%',
          flex: 1,
          html: 'new panel inside dummy'
        });

        addPanel.setPosition(west.x+west.getWidth(),0);
        mainForm.insert(3, addPanel);
If i add the panel in this way the layout gets corrupt and just one panel is visible.

I need the absolute layout to animate/slide the inner panels. I played with the build in layouts from Sencha but the animations for collapse/expand/move are looking bad. So i think i have to do the positioning on my own. This is in 4.1.

Can anybody give me some help on this. Thanks!