<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ru">
		<id>http://wbex.ru/index.php?action=history&amp;feed=atom&amp;title=JavaScript_DHTML%2FExt_JS%2FForm_Layout</id>
		<title>JavaScript DHTML/Ext JS/Form Layout - История изменений</title>
		<link rel="self" type="application/atom+xml" href="http://wbex.ru/index.php?action=history&amp;feed=atom&amp;title=JavaScript_DHTML%2FExt_JS%2FForm_Layout"/>
		<link rel="alternate" type="text/html" href="http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Form_Layout&amp;action=history"/>
		<updated>2026-04-04T04:40:35Z</updated>
		<subtitle>История изменений этой страницы в вики</subtitle>
		<generator>MediaWiki 1.30.0</generator>

	<entry>
		<id>http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Form_Layout&amp;diff=2478&amp;oldid=prev</id>
		<title> в 09:59, 26 мая 2010</title>
		<link rel="alternate" type="text/html" href="http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Form_Layout&amp;diff=2478&amp;oldid=prev"/>
				<updated>2010-05-26T09:59:51Z</updated>
		
		<summary type="html">&lt;p&gt;&lt;/p&gt;
&lt;table class=&quot;diff diff-contentalign-left&quot; data-mw=&quot;interface&quot;&gt;
				&lt;tr style=&quot;vertical-align: top;&quot; lang=&quot;ru&quot;&gt;
				&lt;td colspan=&quot;1&quot; style=&quot;background-color: white; color:black; text-align: center;&quot;&gt;← Предыдущая&lt;/td&gt;
				&lt;td colspan=&quot;1&quot; style=&quot;background-color: white; color:black; text-align: center;&quot;&gt;Версия 09:59, 26 мая 2010&lt;/td&gt;
				&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot; style=&quot;text-align: center;&quot; lang=&quot;ru&quot;&gt;&lt;div class=&quot;mw-diff-empty&quot;&gt;(нет различий)&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</summary>
			</entry>

	<entry>
		<id>http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Form_Layout&amp;diff=2479&amp;oldid=prev</id>
		<title>Admin: 1 версия</title>
		<link rel="alternate" type="text/html" href="http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Form_Layout&amp;diff=2479&amp;oldid=prev"/>
				<updated>2010-05-26T07:21:32Z</updated>
		
		<summary type="html">&lt;p&gt;1 версия&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Новая страница&lt;/b&gt;&lt;/p&gt;&lt;div&gt;==Add column header to column==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                itemCls: &amp;quot;x-check-group-alt&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Name&amp;quot;,&lt;br /&gt;
                allowBlank: false,&lt;br /&gt;
                anchor: &amp;quot;95%&amp;quot;,&lt;br /&gt;
                items: [{&lt;br /&gt;
                    columnWidth: &amp;quot;.25&amp;quot;,&lt;br /&gt;
                    items: [&lt;br /&gt;
                        {xtype: &amp;quot;label&amp;quot;, text: &amp;quot;Heading 1&amp;quot;, cls:&amp;quot;x-form-check-group-label&amp;quot;, anchor:&amp;quot;-15&amp;quot;},&lt;br /&gt;
                        {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                        {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2}&lt;br /&gt;
                    ]&lt;br /&gt;
                }]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Align two forms==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    Ext.QuickTips.init();&lt;br /&gt;
    var fieldset1 = {&lt;br /&gt;
      xtype       : &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
      title       : &amp;quot;Name&amp;quot;,&lt;br /&gt;
      flex        : 1,&lt;br /&gt;
      border      : false,&lt;br /&gt;
      labelWidth  : 50,&lt;br /&gt;
      defaultType : &amp;quot;field&amp;quot;,&lt;br /&gt;
      defaults    : {&lt;br /&gt;
        anchor     : &amp;quot;-10&amp;quot;,&lt;br /&gt;
        allowBlank : false&lt;br /&gt;
      },&lt;br /&gt;
      items : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;First&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;firstName&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Middle&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;middle&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fieldset2 = Ext.apply({}, {&lt;br /&gt;
      flex       : 1,&lt;br /&gt;
      labelWidth : 50,&lt;br /&gt;
      title      : &amp;quot;Address&amp;quot;,&lt;br /&gt;
      items      : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Address&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;address&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;City&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;city&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    &lt;br /&gt;
    }, fieldset1);&lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    var fieldsetContainer = {&lt;br /&gt;
      xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
      layout  : &amp;quot;hbox&amp;quot;,&lt;br /&gt;
      height  : 120,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
        align : &amp;quot;stretch&amp;quot;,&lt;br /&gt;
      },&lt;br /&gt;
      items  : [&lt;br /&gt;
        fieldset1,&lt;br /&gt;
        fieldset2&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fp = new Ext.form.FormPanel({&lt;br /&gt;
      renderTo     : Ext.getBody(),&lt;br /&gt;
      width        : 700,&lt;br /&gt;
      title        : &amp;quot;Title&amp;quot;,&lt;br /&gt;
      height       : 500,&lt;br /&gt;
      frame        : true,&lt;br /&gt;
      style        : &amp;quot;margin: 20&amp;quot;,&lt;br /&gt;
      layout       : &amp;quot;vbox&amp;quot;,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
            align : &amp;quot;stretch&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
    &lt;br /&gt;
      defaults     : {&lt;br /&gt;
        msgTarget : &amp;quot;side&amp;quot;,&lt;br /&gt;
        anchor    : &amp;quot;-20&amp;quot;&lt;br /&gt;
      },&lt;br /&gt;
      items        : [&lt;br /&gt;
        fieldsetContainer&lt;br /&gt;
      ]&lt;br /&gt;
    });&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Layout field controls in a single column==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Single Column&amp;quot;,&lt;br /&gt;
                itemCls: &amp;quot;x-check-group-alt&amp;quot;,&lt;br /&gt;
                columns: 1,&lt;br /&gt;
                items: [&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2, checked: true},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 3&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 3}&lt;br /&gt;
                ]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ],&lt;br /&gt;
        buttons: [{&lt;br /&gt;
            text: &amp;quot;Save&amp;quot;,&lt;br /&gt;
            handler: function(){&lt;br /&gt;
               if(fp.getForm().isValid()){&lt;br /&gt;
                    Ext.Msg.alert(&amp;quot;asdf&amp;quot;);&lt;br /&gt;
                }&lt;br /&gt;
            }&lt;br /&gt;
        },{&lt;br /&gt;
            text: &amp;quot;Reset&amp;quot;,&lt;br /&gt;
            handler: function(){&lt;br /&gt;
                fp.getForm().reset();&lt;br /&gt;
            }&lt;br /&gt;
        }]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Layout fieldset Container as hbox==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    Ext.QuickTips.init();&lt;br /&gt;
    var fieldset1 = {&lt;br /&gt;
      xtype       : &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
      title       : &amp;quot;Name&amp;quot;,&lt;br /&gt;
      flex        : 1,&lt;br /&gt;
      border      : false,&lt;br /&gt;
      labelWidth  : 50,&lt;br /&gt;
      defaultType : &amp;quot;field&amp;quot;,&lt;br /&gt;
      defaults    : {&lt;br /&gt;
        anchor     : &amp;quot;-10&amp;quot;,&lt;br /&gt;
        allowBlank : false&lt;br /&gt;
      },&lt;br /&gt;
      items : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;First&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;firstName&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Middle&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;middle&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fieldset2 = Ext.apply({}, {&lt;br /&gt;
      flex       : 1,&lt;br /&gt;
      labelWidth : 50,&lt;br /&gt;
      title      : &amp;quot;Address&amp;quot;,&lt;br /&gt;
      items      : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Address&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;address&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;City&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;city&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    &lt;br /&gt;
    }, fieldset1);&lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    var fieldsetContainer = {&lt;br /&gt;
      xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
      layout  : &amp;quot;hbox&amp;quot;,&lt;br /&gt;
      height  : 120,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
        align : &amp;quot;stretch&amp;quot;,&lt;br /&gt;
      },&lt;br /&gt;
      items  : [&lt;br /&gt;
        fieldset1,&lt;br /&gt;
        fieldset2&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fp = new Ext.form.FormPanel({&lt;br /&gt;
      renderTo     : Ext.getBody(),&lt;br /&gt;
      width        : 700,&lt;br /&gt;
      title        : &amp;quot;Title&amp;quot;,&lt;br /&gt;
      height       : 500,&lt;br /&gt;
      frame        : true,&lt;br /&gt;
      style        : &amp;quot;margin: 20&amp;quot;,&lt;br /&gt;
      layout       : &amp;quot;vbox&amp;quot;,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
            align : &amp;quot;stretch&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
    &lt;br /&gt;
      defaults     : {&lt;br /&gt;
        msgTarget : &amp;quot;side&amp;quot;,&lt;br /&gt;
        anchor    : &amp;quot;-20&amp;quot;&lt;br /&gt;
      },&lt;br /&gt;
      items        : [&lt;br /&gt;
        fieldsetContainer&lt;br /&gt;
      ]&lt;br /&gt;
    });&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Layout fieldset Container as vbox==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    Ext.QuickTips.init();&lt;br /&gt;
    var fieldset1 = {&lt;br /&gt;
      xtype       : &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
      title       : &amp;quot;Name&amp;quot;,&lt;br /&gt;
      flex        : 1,&lt;br /&gt;
      border      : false,&lt;br /&gt;
      labelWidth  : 50,&lt;br /&gt;
      defaultType : &amp;quot;field&amp;quot;,&lt;br /&gt;
      defaults    : {&lt;br /&gt;
        anchor     : &amp;quot;-10&amp;quot;,&lt;br /&gt;
        allowBlank : false&lt;br /&gt;
      },&lt;br /&gt;
      items : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;First&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;firstName&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Middle&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;middle&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fieldset2 = Ext.apply({}, {&lt;br /&gt;
      flex       : 1,&lt;br /&gt;
      labelWidth : 50,&lt;br /&gt;
      title      : &amp;quot;Address&amp;quot;,&lt;br /&gt;
      items      : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Address&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;address&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;City&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;city&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    &lt;br /&gt;
    }, fieldset1);&lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    var fieldsetContainer = {&lt;br /&gt;
      xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
      layout  : &amp;quot;vbox&amp;quot;,&lt;br /&gt;
      height  : 120,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
        align : &amp;quot;stretch&amp;quot;,&lt;br /&gt;
      },&lt;br /&gt;
      items  : [&lt;br /&gt;
        fieldset1,&lt;br /&gt;
        fieldset2&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fp = new Ext.form.FormPanel({&lt;br /&gt;
      renderTo     : Ext.getBody(),&lt;br /&gt;
      width        : 700,&lt;br /&gt;
      title        : &amp;quot;Title&amp;quot;,&lt;br /&gt;
      height       : 500,&lt;br /&gt;
      frame        : true,&lt;br /&gt;
      style        : &amp;quot;margin: 20&amp;quot;,&lt;br /&gt;
      layout       : &amp;quot;vbox&amp;quot;,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
            align : &amp;quot;stretch&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
    &lt;br /&gt;
      defaults     : {&lt;br /&gt;
        msgTarget : &amp;quot;side&amp;quot;,&lt;br /&gt;
        anchor    : &amp;quot;-20&amp;quot;&lt;br /&gt;
      },&lt;br /&gt;
      items        : [&lt;br /&gt;
        fieldsetContainer&lt;br /&gt;
      ]&lt;br /&gt;
    });&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Layout form, form set and tab panel in a window==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
Ext.QuickTips.init();&lt;br /&gt;
var fieldset1 = {&lt;br /&gt;
  xtype       : &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
  title       : &amp;quot;Name&amp;quot;,&lt;br /&gt;
  width       : 300,&lt;br /&gt;
  border      : true,&lt;br /&gt;
  labelWidth  : 50,&lt;br /&gt;
  defaultType : &amp;quot;textfield&amp;quot;,&lt;br /&gt;
  defaults    : {&lt;br /&gt;
    anchor     : &amp;quot;-10&amp;quot;,&lt;br /&gt;
    allowBlank : false&lt;br /&gt;
  },&lt;br /&gt;
  items : [&lt;br /&gt;
    {&lt;br /&gt;
      fieldLabel : &amp;quot;First&amp;quot;,&lt;br /&gt;
      name       : &amp;quot;firstName&amp;quot;,&lt;br /&gt;
      allowBlank : false&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
var fieldset2 = Ext.apply({}, {&lt;br /&gt;
  flex       : 1,&lt;br /&gt;
  labelWidth : 50,&lt;br /&gt;
  title      : &amp;quot;Address&amp;quot;,&lt;br /&gt;
  items      : [&lt;br /&gt;
    {&lt;br /&gt;
      fieldLabel : &amp;quot;Address&amp;quot;,&lt;br /&gt;
      name       : &amp;quot;address&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}, fieldset1);&lt;br /&gt;
var fieldsetContainer = {&lt;br /&gt;
  xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
  autoEl : {},&lt;br /&gt;
  layout : &amp;quot;hbox&amp;quot;,&lt;br /&gt;
  anchor : &amp;quot;100%&amp;quot;,&lt;br /&gt;
  height  : 120,&lt;br /&gt;
  layoutConfig : {&lt;br /&gt;
    align : &amp;quot;stretch&amp;quot;,&lt;br /&gt;
  },&lt;br /&gt;
  items  : [&lt;br /&gt;
    fieldset1,&lt;br /&gt;
    fieldset2&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
var tabs = [&lt;br /&gt;
  {&lt;br /&gt;
    title    :&amp;quot;Phone Numbers&amp;quot;,&lt;br /&gt;
    layout   : &amp;quot;form&amp;quot;,&lt;br /&gt;
        bodyStyle:&amp;quot;padding:5px 5px 0&amp;quot;,&lt;br /&gt;
    defaults  : {&lt;br /&gt;
      xtype : &amp;quot;textfield&amp;quot;,  &lt;br /&gt;
      width : 230&lt;br /&gt;
    },&lt;br /&gt;
    items   : [&lt;br /&gt;
      {&lt;br /&gt;
        fieldLabel : &amp;quot;Home&amp;quot;,&lt;br /&gt;
        name       : &amp;quot;home&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    ]&lt;br /&gt;
  },&lt;br /&gt;
  {&lt;br /&gt;
    title  : &amp;quot;Resume&amp;quot;,&lt;br /&gt;
    xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
    autoEl : {},&lt;br /&gt;
    layout : &amp;quot;fit&amp;quot;,&lt;br /&gt;
    items  : {&lt;br /&gt;
      xtype : &amp;quot;htmleditor&amp;quot;,&lt;br /&gt;
      name  : &amp;quot;resume&amp;quot;&lt;br /&gt;
    &lt;br /&gt;
    }&lt;br /&gt;
  }&lt;br /&gt;
]&lt;br /&gt;
var tabPanel = {&lt;br /&gt;
  xtype             :&amp;quot;tabpanel&amp;quot;,&lt;br /&gt;
  activeTab         : 0,&lt;br /&gt;
  deferredRender    : false,&lt;br /&gt;
  layoutOnTabChange : true,&lt;br /&gt;
  border            : false,&lt;br /&gt;
  cls               : &amp;quot;x-panel-body&amp;quot;,&lt;br /&gt;
  flex              : 1,&lt;br /&gt;
  plain             : true,&lt;br /&gt;
  items             : tabs&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
var fp = new Ext.form.FormPanel({&lt;br /&gt;
  renderTo     : Ext.getBody(),&lt;br /&gt;
  width        : 600,&lt;br /&gt;
  title        : &amp;quot;Title&amp;quot;,&lt;br /&gt;
  height       : 350,&lt;br /&gt;
  frame        : true,&lt;br /&gt;
  layout       : &amp;quot;vbox&amp;quot;,&lt;br /&gt;
  layoutConfig : {&lt;br /&gt;
        align : &amp;quot;stretch&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
  items        : [&lt;br /&gt;
    fieldsetContainer,&lt;br /&gt;
    tabPanel&lt;br /&gt;
  ]&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Layout two fiels in one row==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var panel1 = {&lt;br /&gt;
      xtype  : &amp;quot;form&amp;quot;,&lt;br /&gt;
      title  : &amp;quot;Form Panel&amp;quot;,&lt;br /&gt;
      border      : false,&lt;br /&gt;
      anchor      : &amp;quot;100%&amp;quot;,&lt;br /&gt;
      defaultType : &amp;quot;field&amp;quot;,&lt;br /&gt;
      items  : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;First&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;firstName&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Middle&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;middle&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Last&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;lastName&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Address&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;address&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;City&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;city&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          xtype       : &amp;quot;container&amp;quot;,&lt;br /&gt;
          border      : false,&lt;br /&gt;
          layout      : &amp;quot;column&amp;quot;,&lt;br /&gt;
          anchor      : &amp;quot;100%&amp;quot;,&lt;br /&gt;
          defaultType : &amp;quot;field&amp;quot;,&lt;br /&gt;
          items       : [&lt;br /&gt;
            {&lt;br /&gt;
              xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
              layout : &amp;quot;form&amp;quot;, &lt;br /&gt;
              width  : 170,&lt;br /&gt;
              items  : [&lt;br /&gt;
                {&lt;br /&gt;
                  xtype      : &amp;quot;textfield&amp;quot;,&lt;br /&gt;
                  fieldLabel : &amp;quot;State&amp;quot;,&lt;br /&gt;
                  name       : &amp;quot;state&amp;quot;,&lt;br /&gt;
                  anchor     : &amp;quot;-20&amp;quot;&lt;br /&gt;
                }&lt;br /&gt;
              ]&lt;br /&gt;
            &lt;br /&gt;
            },&lt;br /&gt;
            {&lt;br /&gt;
              xtype       : &amp;quot;container&amp;quot;,&lt;br /&gt;
              layout      : &amp;quot;form&amp;quot;,&lt;br /&gt;
              columnWidth : 1,&lt;br /&gt;
              labelWidth  : 20,&lt;br /&gt;
              items       : [&lt;br /&gt;
                {&lt;br /&gt;
                  xtype      : &amp;quot;textfield&amp;quot;,&lt;br /&gt;
                  fieldLabel : &amp;quot;Zip&amp;quot;,&lt;br /&gt;
                  anchor     : &amp;quot;-10&amp;quot;,&lt;br /&gt;
                  name       : &amp;quot;zip&amp;quot;&lt;br /&gt;
                  &lt;br /&gt;
                }      &lt;br /&gt;
              ]&lt;br /&gt;
            }&lt;br /&gt;
                  &lt;br /&gt;
          ]&lt;br /&gt;
        &lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    new Ext.Window({&lt;br /&gt;
      width        : 600,&lt;br /&gt;
      height       : 600,&lt;br /&gt;
      title        : &amp;quot;Accordion window&amp;quot;,&lt;br /&gt;
      layout       : &amp;quot;accordion&amp;quot;,&lt;br /&gt;
      border       : false,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
        animate : true&lt;br /&gt;
      },&lt;br /&gt;
      items : [panel1]&lt;br /&gt;
    }).show();&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Multi-Column form control layout==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Multi-Column&amp;lt;br/&amp;gt;(second line)&amp;quot;,&lt;br /&gt;
                columns: 3,&lt;br /&gt;
                items: [&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2, checked: true},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 3&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 3},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 4&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 4},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 5&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 5}&lt;br /&gt;
                ]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ],&lt;br /&gt;
        buttons: [{&lt;br /&gt;
            text: &amp;quot;Save&amp;quot;,&lt;br /&gt;
            handler: function(){&lt;br /&gt;
               if(fp.getForm().isValid()){&lt;br /&gt;
                    Ext.Msg.alert(&amp;quot;asdf&amp;quot;);&lt;br /&gt;
                }&lt;br /&gt;
            }&lt;br /&gt;
        },{&lt;br /&gt;
            text: &amp;quot;Reset&amp;quot;,&lt;br /&gt;
            handler: function(){&lt;br /&gt;
                fp.getForm().reset();&lt;br /&gt;
            }&lt;br /&gt;
        }]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Set columnWidth==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                itemCls: &amp;quot;x-check-group-alt&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Name&amp;quot;,&lt;br /&gt;
                allowBlank: false,&lt;br /&gt;
                anchor: &amp;quot;95%&amp;quot;,&lt;br /&gt;
                items: [{&lt;br /&gt;
                    columnWidth: &amp;quot;.25&amp;quot;,&lt;br /&gt;
                    items: [&lt;br /&gt;
                        {xtype: &amp;quot;label&amp;quot;, text: &amp;quot;Heading 1&amp;quot;, cls:&amp;quot;x-form-check-group-label&amp;quot;, anchor:&amp;quot;-15&amp;quot;},&lt;br /&gt;
                        {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                        {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2}&lt;br /&gt;
                    ]&lt;br /&gt;
                }]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Set control x/y position==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;!--&lt;br /&gt;
/*!&lt;br /&gt;
 * Ext JS Library 3.0.0&lt;br /&gt;
 * Copyright(c) 2006-2009 Ext JS, LLC&lt;br /&gt;
 * licensing@extjs.ru&lt;br /&gt;
 * http://www.extjs.ru/license&lt;br /&gt;
 */&lt;br /&gt;
--&amp;gt;&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;!-- Revised from demo code in ext3.0.0 --&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
/*!&lt;br /&gt;
 * Ext JS Library 3.0.0&lt;br /&gt;
 * Copyright(c) 2006-2009 Ext JS, LLC&lt;br /&gt;
 * licensing@extjs.ru&lt;br /&gt;
 * http://www.extjs.ru/license&lt;br /&gt;
 */&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var form = new Ext.form.FormPanel({&lt;br /&gt;
        baseCls: &amp;quot;x-plain&amp;quot;,&lt;br /&gt;
        layout:&amp;quot;absolute&amp;quot;,&lt;br /&gt;
        url:&amp;quot;save-form.php&amp;quot;,&lt;br /&gt;
        defaultType: &amp;quot;textfield&amp;quot;,&lt;br /&gt;
        items: [{&lt;br /&gt;
            x: 0,&lt;br /&gt;
            y: 5,&lt;br /&gt;
            xtype:&amp;quot;label&amp;quot;,&lt;br /&gt;
            text: &amp;quot;Send To:&amp;quot;&lt;br /&gt;
        },{&lt;br /&gt;
            x: 60,&lt;br /&gt;
            y: 0,&lt;br /&gt;
            name: &amp;quot;to&amp;quot;,&lt;br /&gt;
            anchor:&amp;quot;100%&amp;quot;  // anchor width by percentage&lt;br /&gt;
        },{&lt;br /&gt;
            x: 0,&lt;br /&gt;
            y: 35,&lt;br /&gt;
            xtype:&amp;quot;label&amp;quot;,&lt;br /&gt;
            text: &amp;quot;Subject:&amp;quot;&lt;br /&gt;
        },{&lt;br /&gt;
            x: 60,&lt;br /&gt;
            y: 30,&lt;br /&gt;
            name: &amp;quot;subject&amp;quot;,&lt;br /&gt;
            anchor: &amp;quot;100%&amp;quot;  // anchor width by percentage&lt;br /&gt;
        },{&lt;br /&gt;
            x:0,&lt;br /&gt;
            y: 60,&lt;br /&gt;
            xtype: &amp;quot;textarea&amp;quot;,&lt;br /&gt;
            name: &amp;quot;msg&amp;quot;,&lt;br /&gt;
            anchor: &amp;quot;100% 100%&amp;quot;  // anchor width and height&lt;br /&gt;
        }]&lt;br /&gt;
    });&lt;br /&gt;
    var window = new Ext.Window({&lt;br /&gt;
        title: &amp;quot;Resize Me&amp;quot;,&lt;br /&gt;
        width: 500,&lt;br /&gt;
        height:300,&lt;br /&gt;
        minWidth: 300,&lt;br /&gt;
        minHeight: 200,&lt;br /&gt;
        layout: &amp;quot;fit&amp;quot;,&lt;br /&gt;
        plain:true,&lt;br /&gt;
        bodyStyle:&amp;quot;padding:5px;&amp;quot;,&lt;br /&gt;
        buttonAlign:&amp;quot;center&amp;quot;,&lt;br /&gt;
        items: form,&lt;br /&gt;
        buttons: [{&lt;br /&gt;
            text: &amp;quot;Send&amp;quot;&lt;br /&gt;
        },{&lt;br /&gt;
            text: &amp;quot;Cancel&amp;quot;&lt;br /&gt;
        }]&lt;br /&gt;
    });&lt;br /&gt;
    window.show();&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Set form column to 3==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Multi-Column&amp;lt;br/&amp;gt;(second line)&amp;quot;,&lt;br /&gt;
                columns: 3,&lt;br /&gt;
                items: [&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2, checked: true},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 3&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 3},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 4&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 4},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 5&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 5}&lt;br /&gt;
                ]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ],&lt;br /&gt;
        buttons: [{&lt;br /&gt;
            text: &amp;quot;Save&amp;quot;,&lt;br /&gt;
            handler: function(){&lt;br /&gt;
               if(fp.getForm().isValid()){&lt;br /&gt;
                    Ext.Msg.alert(&amp;quot;asdf&amp;quot;);&lt;br /&gt;
                }&lt;br /&gt;
            }&lt;br /&gt;
        },{&lt;br /&gt;
            text: &amp;quot;Reset&amp;quot;,&lt;br /&gt;
            handler: function(){&lt;br /&gt;
                fp.getForm().reset();&lt;br /&gt;
            }&lt;br /&gt;
        }]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Set form layout column width==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Name&amp;quot;,&lt;br /&gt;
                columns: [100, 100],&lt;br /&gt;
                vertical: true,&lt;br /&gt;
                items: [&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2, checked: true},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 3&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 3},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 4&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 4},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 5&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 5}&lt;br /&gt;
                ]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Set layout vertical to true==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    var radioGroup = {&lt;br /&gt;
        xtype: &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
        title: &amp;quot;Groups&amp;quot;,&lt;br /&gt;
        autoHeight: true,&lt;br /&gt;
        items: [&lt;br /&gt;
            {&lt;br /&gt;
                xtype: &amp;quot;radiogroup&amp;quot;,&lt;br /&gt;
                fieldLabel: &amp;quot;Name&amp;quot;,&lt;br /&gt;
                itemCls: &amp;quot;x-check-group-alt&amp;quot;,&lt;br /&gt;
                columns: 3,&lt;br /&gt;
                vertical: true,&lt;br /&gt;
                items: [&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 1&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 1},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 2&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 2, checked: true},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 3&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 3},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 4&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 4},&lt;br /&gt;
                    {boxLabel: &amp;quot;Item 5&amp;quot;, name: &amp;quot;yourName&amp;quot;, inputValue: 5}&lt;br /&gt;
                ]&lt;br /&gt;
            }&lt;br /&gt;
        ]&lt;br /&gt;
    };&lt;br /&gt;
    var fp = new Ext.FormPanel({&lt;br /&gt;
        title: &amp;quot;Title&amp;quot;,&lt;br /&gt;
        frame: true,&lt;br /&gt;
        labelWidth: 110,&lt;br /&gt;
        width: 600,&lt;br /&gt;
        renderTo:Ext.getBody(),&lt;br /&gt;
        bodyStyle: &amp;quot;padding:0 10px 0;&amp;quot;,&lt;br /&gt;
        items: [&lt;br /&gt;
           radioGroup&lt;br /&gt;
        ]&lt;br /&gt;
    });&lt;br /&gt;
&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Use autoHeight and autoWidth to dynamically size to fit it&amp;quot;s data and columns.==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
&amp;lt;!--&lt;br /&gt;
/*!&lt;br /&gt;
 * Ext JS Library 3.0.0&lt;br /&gt;
 * Copyright(c) 2006-2009 Ext JS, LLC&lt;br /&gt;
 * licensing@extjs.ru&lt;br /&gt;
 * http://www.extjs.ru/license&lt;br /&gt;
 */&lt;br /&gt;
--&amp;gt;&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;!-- Revised from demo code in ext3.0.0 --&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
/*!&lt;br /&gt;
 * Ext JS Library 3.0.0&lt;br /&gt;
 * Copyright(c) 2006-2009 Ext JS, LLC&lt;br /&gt;
 * licensing@extjs.ru&lt;br /&gt;
 * http://www.extjs.ru/license&lt;br /&gt;
 */&lt;br /&gt;
Ext.onReady(function(){&lt;br /&gt;
    // create the Data Store&lt;br /&gt;
    var store = new Ext.data.Store({&lt;br /&gt;
        // load using HTTP&lt;br /&gt;
        url: &amp;quot;ext-3.0.0/examples/grid/sheldon.xml&amp;quot;,&lt;br /&gt;
        // the return will be XML, so lets set up a reader&lt;br /&gt;
        reader: new Ext.data.XmlReader({&lt;br /&gt;
               // records will have an &amp;quot;Item&amp;quot; tag&lt;br /&gt;
               record: &amp;quot;Item&amp;quot;,&lt;br /&gt;
               id: &amp;quot;ASIN&amp;quot;,&lt;br /&gt;
               totalRecords: &amp;quot;@total&amp;quot;&lt;br /&gt;
           }, [&lt;br /&gt;
               // set up the fields mapping into the xml doc&lt;br /&gt;
               // The first needs mapping, the others are very basic&lt;br /&gt;
               {name: &amp;quot;Author&amp;quot;, mapping: &amp;quot;ItemAttributes &amp;gt; Author&amp;quot;},&lt;br /&gt;
               &amp;quot;Title&amp;quot;, &amp;quot;Manufacturer&amp;quot;, &amp;quot;ProductGroup&amp;quot;&lt;br /&gt;
           ])&lt;br /&gt;
    });&lt;br /&gt;
    // create the grid&lt;br /&gt;
    var grid = new Ext.grid.GridPanel({&lt;br /&gt;
        store: store,&lt;br /&gt;
        columns: [&lt;br /&gt;
            {header: &amp;quot;Author&amp;quot;, width: 120, dataIndex: &amp;quot;Author&amp;quot;, sortable: true},&lt;br /&gt;
            {header: &amp;quot;Title&amp;quot;, width: 180, dataIndex: &amp;quot;Title&amp;quot;, sortable: true},&lt;br /&gt;
            {header: &amp;quot;Manufacturer&amp;quot;, width: 115, dataIndex: &amp;quot;Manufacturer&amp;quot;, sortable: true},&lt;br /&gt;
            {header: &amp;quot;Product Group&amp;quot;, width: 100, dataIndex: &amp;quot;ProductGroup&amp;quot;, sortable: true}&lt;br /&gt;
        ],&lt;br /&gt;
        renderTo:&amp;quot;example-grid&amp;quot;,&lt;br /&gt;
        width:540,&lt;br /&gt;
        height:200&lt;br /&gt;
    });&lt;br /&gt;
    store.load();&lt;br /&gt;
});&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;div id=&amp;quot;example-grid&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Use form layout to layout the controls on a window==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Ext.onReady(function(){&lt;br /&gt;
  &lt;br /&gt;
    var w = new Ext.Window({&lt;br /&gt;
      layout: &amp;quot;form&amp;quot;,&lt;br /&gt;
      items:[&lt;br /&gt;
        { xtype: &amp;quot;textfield&amp;quot;, fieldLabel: &amp;quot;First Name&amp;quot;},&lt;br /&gt;
        new Ext.form.TextField({fieldLabel: &amp;quot;Surname&amp;quot;})&lt;br /&gt;
      ]&lt;br /&gt;
    });&lt;br /&gt;
    w.show();&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
    &amp;lt;div id=&amp;quot;mainContent&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;br /&gt;
    &lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Wrap two forms into a field set container==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
  &amp;lt;!-- start source code --&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &amp;lt;source lang=&amp;quot;html4strict&amp;quot;&amp;gt;&lt;br /&gt;
  &lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;Hello World Window&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; href=&amp;quot;ext-3.0.0/resources/css/ext-all.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/adapter/ext/ext-base.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;ext-3.0.0/ext-all.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
Ext.onReady(function() {&lt;br /&gt;
    Ext.QuickTips.init();&lt;br /&gt;
    var fieldset1 = {&lt;br /&gt;
      xtype       : &amp;quot;fieldset&amp;quot;,&lt;br /&gt;
      title       : &amp;quot;Name&amp;quot;,&lt;br /&gt;
      flex        : 1,&lt;br /&gt;
      border      : false,&lt;br /&gt;
      labelWidth  : 50,&lt;br /&gt;
      defaultType : &amp;quot;field&amp;quot;,&lt;br /&gt;
      defaults    : {&lt;br /&gt;
        anchor     : &amp;quot;-10&amp;quot;,&lt;br /&gt;
        allowBlank : false&lt;br /&gt;
      },&lt;br /&gt;
      items : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;First&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;firstName&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Middle&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;middle&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fieldset2 = Ext.apply({}, {&lt;br /&gt;
      flex       : 1,&lt;br /&gt;
      labelWidth : 50,&lt;br /&gt;
      title      : &amp;quot;Address&amp;quot;,&lt;br /&gt;
      items      : [&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;Address&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;address&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
        {&lt;br /&gt;
          fieldLabel : &amp;quot;City&amp;quot;,&lt;br /&gt;
          name       : &amp;quot;city&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
      ]&lt;br /&gt;
    &lt;br /&gt;
    }, fieldset1);&lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    var fieldsetContainer = {&lt;br /&gt;
      xtype  : &amp;quot;container&amp;quot;,&lt;br /&gt;
      layout  : &amp;quot;hbox&amp;quot;,&lt;br /&gt;
      height  : 120,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
        align : &amp;quot;stretch&amp;quot;,&lt;br /&gt;
      },&lt;br /&gt;
      items  : [&lt;br /&gt;
        fieldset1,&lt;br /&gt;
        fieldset2&lt;br /&gt;
      ]&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    var fp = new Ext.form.FormPanel({&lt;br /&gt;
      renderTo     : Ext.getBody(),&lt;br /&gt;
      width        : 700,&lt;br /&gt;
      title        : &amp;quot;Title&amp;quot;,&lt;br /&gt;
      height       : 500,&lt;br /&gt;
      frame        : true,&lt;br /&gt;
      style        : &amp;quot;margin: 20&amp;quot;,&lt;br /&gt;
      layout       : &amp;quot;vbox&amp;quot;,&lt;br /&gt;
      layoutConfig : {&lt;br /&gt;
            align : &amp;quot;stretch&amp;quot;&lt;br /&gt;
        },&lt;br /&gt;
    &lt;br /&gt;
      defaults     : {&lt;br /&gt;
        msgTarget : &amp;quot;side&amp;quot;,&lt;br /&gt;
        anchor    : &amp;quot;-20&amp;quot;&lt;br /&gt;
      },&lt;br /&gt;
      items        : [&lt;br /&gt;
        fieldsetContainer&lt;br /&gt;
      ]&lt;br /&gt;
    });&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/script&amp;gt; &lt;br /&gt;
&amp;lt;div id=&amp;quot;div1&amp;quot;&amp;gt;asdf&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;&lt;br /&gt;
   &lt;br /&gt;
    &lt;br /&gt;
  &amp;lt;/source&amp;gt;&lt;/div&gt;</summary>
		<author><name>Admin</name></author>	</entry>

	</feed>