Ext JS JavaScript DHTML



Hello World Window






Ext.onReady(function() {
    var panel1 = {
      xtype  : 'form',
      title  : 'Form Panel',
      border      : false,
      anchor      : '100%',
      defaultType : 'field',
      items  : [
        {
          fieldLabel : 'First',
          name       : 'firstName'
        },
        {
          fieldLabel : 'Middle',
          name       : 'middle'
        },
        {
          fieldLabel : 'Last',
          name       : 'lastName'
        },
        {
          fieldLabel : 'Address',
          name       : 'address'
        },
        {
          fieldLabel : 'City',
          name       : 'city'
        },
        {
          xtype       : 'container',
          border      : false,
          layout      : 'column',
          anchor      : '100%',
          defaultType : 'field',
          items       : [
            {
              xtype  : 'container',
              layout : 'form', 
              width  : 170,
              items  : [
                {
                  xtype      : 'textfield',
                  fieldLabel : 'State',
                  name       : 'state',
                  anchor     : '-20'
                }
              ]
            
            },
            {
              xtype       : 'container',
              layout      : 'form',
              columnWidth : 1,
              labelWidth  : 20,
              items       : [
                {
                  xtype      : 'textfield',
                  fieldLabel : 'Zip',
                  anchor     : '-10',
                  name       : 'zip'
                  
                }      
              ]
            }
                  
          ]
        
        }
      ]
    }
    
    new Ext.Window({
      width        : 600,
      height       : 600,
      title        : 'Accordion window',
      layout       : 'accordion',
      border       : false,
      layoutConfig : {
        animate : true
      },
      items : [panel1]
    }).show();
});
 
asdf