Results 1 to 3 of 3

Thread: How to shrink wrap button panel

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103

    Default How to shrink wrap button panel

    I am trying to create a panel that will show a group of buttons at the top of the viewport followed by a list at the bottom. I can't see to get the layouts to work correctly though to shrink wrap the top panel around the buttons to a minimum size. (I have tried various settings of flex and resizing and it always goes wrong).

    Here is a picture of what I have so far:



    As you can see, there is extra space below the button panel that I would like to get rid of. Any ideas?

    Here is the current code:

    Code:
    <html>
      <head>
        <title>Button Panel Test</title>
        <link rel="stylesheet" href="../deps/sencha_touch/resources/css/sencha-touch.css" type="text/css"/>
        <script type="text/javascript" src="../deps/sencha_touch/sencha-touch-debug-w-comments.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    Ext.setup({
    onReady: function() {
       // Setup contact store
       Ext.regModel('Contact', {
               fields: ['name']
       });
       data = []
       for(var x=0; x<30; x++)
       { data.push({name: String(x)}); }
    
       Ext.regStore('contacts', {
               model: 'Contact',
               data: data
       });
    
       // create buttons to show
       buttons = [];
       for(x=0; x<8; x++)
       {
          buttons.push(new Ext.Button({
             text: 'button ' + x,
             margin: '2px'
          }));
       }
    
       // create panel with buttons and list of contacts
       var panel = new Ext.Panel({
          fullscreen: true,
          id: 'Control Area',
          xtype: 'panel',
          layout: {
             type: 'vbox',
             align: 'stretch',
          },
          dockedItems: [
          ],
          items: [
            {
                flex: 1,
                id: 'top_panel',
                xtype: 'panel',
                style: 'background-color: #C0C0C0',
                padding: 5,
                layout: {
                   type: 'hbox',
                   align: 'stretch'
                },
                items: [
                   {
                      xtype: 'panel',
                      id: 'left_panel',
                      flex: 1,
                      //width: '50%',
                      style: 'background-color: #B0B0B0',
                      layout: {
                         type: 'vbox',
                         align: 'stretch'
                      },
                      items: [
                         buttons[0],
                         buttons[1],
                         buttons[2]
                      ]
                   },
                   {
                      xtype: 'panel',
                      id: 'right_panel',
                      flex: 1,
                      //width: '50%',
                      style: 'background-color: #E0E0E0',
                      layout: {
                         type: 'vbox',
                         align: 'stretch'
                      },
                      items: [
                         buttons[3],
                         buttons[4],
                         buttons[5],
                      ]
                   },
                ]
             },
             {
                flex: 2,
                xtype: 'list',
                margin: 5,
                store: 'contacts',
                scroll: 'vertical',
                itemTpl: '{name}',
                style: 'background-color: #E0B0B0',
                onItemDisclosure: function() {console.log('selected'); }
             }
          ]
       }); // panel
    }
    });
    </script>
    </body>
    </html>

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Remove flex on top panel and use auto height. Bottom panel have flex of 1
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Remove flex on top panel and use auto height. Bottom panel have flex of 1
    Thanks for the hint. I tried it, but it didn't seem to work. Here is the new screenshot.



    The changed code is here:

    Code:
    <html>
      <head>
        <title>Button Panel Test</title>
        <link rel="stylesheet" href="../deps/sencha_touch/resources/css/sencha-touch.css" type="text/css"/>
        <script type="text/javascript" src="../deps/sencha_touch/sencha-touch-debug-w-comments.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    Ext.setup({
    onReady: function() {
       // Setup contact store
       Ext.regModel('Contact', {
               fields: ['name']
       });
       data = []
       for(var x=0; x<30; x++)
       { data.push({name: String(x)}); }
    
       Ext.regStore('contacts', {
               model: 'Contact',
               data: data
       });
    
       // create buttons to show
       buttons = [];
       for(x=0; x<8; x++)
       {
          buttons.push(new Ext.Button({
             text: 'button ' + x,
             margin: '2px'
          }));
       }
    
       // create panel with buttons and list of contacts
       var panel = new Ext.Panel({
          fullscreen: true,
          id: 'Control Area',
          xtype: 'panel',
          layout: {
             type: 'vbox',
             align: 'stretch',
          },
          dockedItems: [
          ],
          items: [
            {
                //flex: 1,
                height: 'auto',
                id: 'top_panel',
                xtype: 'panel',
                style: 'background-color: #C0C0C0',
                padding: 5,
                layout: {
                   type: 'hbox',
                   align: 'stretch'
                },
                items: [
                   {
                      xtype: 'panel',
                      id: 'left_panel',
                      flex: 1,
                      //width: '50%',
                      style: 'background-color: #B0B0B0',
                      layout: {
                         type: 'vbox',
                         align: 'stretch'
                      },
                      items: [
                         buttons[0],
                         buttons[1],
                         buttons[2]
                      ]
                   },
                   {
                      xtype: 'panel',
                      id: 'right_panel',
                      flex: 1,
                      //width: '50%',
                      style: 'background-color: #E0E0E0',
                      layout: {
                         type: 'vbox',
                         align: 'stretch'
                      },
                      items: [
                         buttons[3],
                         buttons[4],
                         buttons[5],
                      ]
                   },
                ]
             },
             {
                flex: 1,
                xtype: 'list',
                margin: 5,
                store: 'contacts',
                scroll: 'vertical',
                itemTpl: '{name}',
                style: 'background-color: #E0B0B0',
                onItemDisclosure: function() {console.log('selected'); }
             }
          ]
       }); // panel
    }
    });
    </script>
    </body>
    </html>

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •