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.

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

Related examples in the same category