Ext JS JavaScript DHTML



Hello World Window






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
  ]
});
});
 
asdf