Layout fieldset Container as vbox

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var fieldset1 = {
      xtype       : 'fieldset',
      title       : 'Name',
      flex        : 1,
      border      : false,
      labelWidth  : 50,
      defaultType : 'field',
      defaults    : {
        anchor     : '-10',
        allowBlank : false
      },
      items : [
        {
          fieldLabel : 'First',
          name       : 'firstName'
        },
        {
          fieldLabel : 'Middle',
          name       : 'middle'
        }
      ]
    }
    
    var fieldset2 = Ext.apply({}, {
      flex       : 1,
      labelWidth : 50,
      title      : 'Address',
      items      : [
        {
          fieldLabel : 'Address',
          name       : 'address'
        },
        {
          fieldLabel : 'City',
          name       : 'city'
        }
      ]
    
    }, fieldset1);
    
    
    
    var fieldsetContainer = {
      xtype  : 'container',
      layout  : 'vbox',
      height  : 120,
      layoutConfig : {
        align : 'stretch',
      },
      items  : [
        fieldset1,
        fieldset2
      ]
    }
    
    var fp = new Ext.form.FormPanel({
      renderTo     : Ext.getBody(),
      width        : 700,
      title        : 'Title',
      height       : 500,
      frame        : true,
      style        : 'margin: 20',
      layout       : 'vbox',
      layoutConfig : {
            align : 'stretch'
        },
    
      defaults     : {
        msgTarget : 'side',
        anchor    : '-20'
      },
      items        : [
        fieldsetContainer
      ]
    });
});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

Related examples in the same category

1.	Align two forms
2.	Layout form, form set and tab panel in a window
3.	Layout fieldset Container as hbox
4.	Layout two fiels in one row
5.	Wrap two forms into a field set container
6.	Set control x/y position
7.	Use form layout to layout the controls on a window
8.	Layout field controls in a single column
9.	Multi-Column form control layout
10.	Set form column to 3
11.	Set layout vertical to true
12.	Set form layout column width
13.	Add column header to column
14.	Set columnWidth
15.	Use autoHeight and autoWidth to dynamically size to fit it's data and columns.

Layout fieldset Container as vbox : Form Layout « Ext JS « JavaScript DHTML

Related examples in the same category