Mixing vbox / hbox

I am trying to do the following split the screen vertically with two list items on the right and left side.
Underneath the list items there must be buttons to send items from left to right.
Some extra stuf is needed above the left side.
So I am mixing vbox and hbox layout as follows:

Code:

---

Ext.define ('OpenmodelingMobile.view.ActionButtons', {
  extend  : 'Ext.form.FormPanel',
  xtype  : 'ActionButtons',
  config  : {
          itemId: 'ActionButtons',
          layout : 'hbox',
          items: [
            {
              xtype  : 'button',
              id    : 'verwijderopname',
              pressedCls : 'x-button-pressed',
              handler: function () {
                //om_helper.deleteopname ();
              },
              text  : 'Select all',
              width  : '220px',
              height : '50px',
              ui    : 'confirm',
              scope  : this,
              flex  : 2
            },
            {
              xtype: 'spacer',
              flex : 1
            }
            ,
            {
              xtype  : 'button',
              pressedCls : 'x-button-pressed',
              id    : 'nieuwgebrek',
              text  : 'Nieuw gebrek',
              handler: function () {
                //om_helper.deleteopname ();
              },
              width  : '220px',
              height : '50px',
              ui    : 'confirm',
              scope  : this,
              flex  : 2
            } // button
          ] // items
        } // config
}); // Ext `define formpanel


Ext.define ('OpenmodelingMobile.view.RelationDialoguePanel', {
    extend    : 'Ext.Container',
    xtype      : 'relationdialoguepanel',
    fullscreen : true,


    config: {
      layout:'hbox',


      items: [
        {       
          flex:1,
          config: {
            xtype:'panel',
            border:true,
            layout:'vbox',
            items:[// item is missing as well
              {
                itemId: 'picklist_title',
                xtype: 'container',
                html:'test',    // there is no test displayed 
                defaults: {
                  styleHtmlContent: true
                },
                //height: '10%',
                flex:0.1
              } 
              ,
              {       
                xtype: 'picklist', // this one is not displayed at all
                height: '90%',
                flex:1     
              }                       
            ]
          }
        } 
        ,{
          xtype: 'selecteditemlist', // this one is displayed fine
          flex:1
        }
      ]
    }//config
});

---

John

I modified your post, wrapping your code in CODE tags. Please use that in the future, John :).

But no results so far.

Issue solved by putting the elements in separated panels and one panel gluing things together.

John