Layout form, form set and tab panel in a window : Form Layout « Ext JS « JavaScript DHTML





Layout form, form set and tab panel in a window

  

<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',
  width       : 300,
  border      : true,
  labelWidth  : 50,
  defaultType : 'textfield',
  defaults    : {
    anchor     : '-10',
    allowBlank : false
  },
  items : [
    {
      fieldLabel : 'First',
      name       : 'firstName',
      allowBlank : false
    }
  ]
}

var fieldset2 = Ext.apply({}, {
  flex       : 1,
  labelWidth : 50,
  title      : 'Address',
  items      : [
    {
      fieldLabel : 'Address',
      name       : 'address'
    }
  ]

}, fieldset1);

var fieldsetContainer = {
  xtype  : 'container',
  autoEl : {},
  layout : 'hbox',
  anchor : '100%',
  height  : 120,
  layoutConfig : {
    align : 'stretch',
  },
  items  : [
    fieldset1,
    fieldset2
  ]
}


var tabs = [
  {
    title    :'Phone Numbers',
    layout   : 'form',
        bodyStyle:'padding:5px 5px 0',
    defaults  : {
      xtype : 'textfield',  
      width : 230
    },
    items   : [
      {
        fieldLabel : 'Home',
        name       : 'home'
      }
    ]
  },
  {
    title  : 'Resume',
    xtype  : 'container',
    autoEl : {},
    layout : 'fit',
    items  : {
      xtype : 'htmleditor',
      name  : 'resume'
    
    }
  }
]

var tabPanel = {
  xtype             :'tabpanel',
  activeTab         : 0,
  deferredRender    : false,
  layoutOnTabChange : true,
  border            : false,
  cls               : 'x-panel-body',
  flex              : 1,
  plain             : true,
  items             : tabs
}


var fp = new Ext.form.FormPanel({
  renderTo     : Ext.getBody(),
  width        : 600,
  title        : 'Title',
  height       : 350,
  frame        : true,
  layout       : 'vbox',
  layoutConfig : {
        align : 'stretch'
    },
  items        : [
    fieldsetContainer,
    tabPanel
  ]
});


});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

   
    
  










Related examples in the same category

1.Align two forms
2.Layout fieldset Container as hbox
3.Layout fieldset Container as vbox
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.