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