Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    0
    jop_008 is on a distinguished road

      0  

    Default Mixing vbox / hbox

    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

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    0
    jop_008 is on a distinguished road

      0  

    Default Layout webpage

    Layout webpage


    But no results so far.

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    0
    jop_008 is on a distinguished road

      0  

    Default


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

    John

Thread Participants: 1

Tags for this Thread