对于一个容器组件，比如Ext.FormPanel，其内部空间无非是按照横向或纵向划分；如果需要更复杂的布局方式，就对第一次划分得到的子区域进行再划分。

form的含义是把容器按照横向划分，划分得到的行数与容器内的子元素（直接子元素，而不包含子元素内部的元素）个数相同，每个元素占一行；
column的含义是把容器按照纵向划分，划分得到的列数同上。

下面看看如何使用form和column
比如让我们实现一个登录的界面：

var login = new Ext.FormPanel({ 

    labelAlign: 'top',

    frame:true,

    title: 'Login',

    id: 'login',

    bodyStyle:'padding:5px 5px 0',

    width: 400,

    items: [{

        layout: 'column',  //把整个空间划分成两列

        items:[{

            html:'<img src="loginLogo.png" />' //左边列放一个logo

        },{

            columnWidth:.5,

            layout: 'form', //右边列再分成上下两行

            items: [{

                xtype:'textfield',

                fieldLabel: 'Username', //第一行是用户名输入框

                name: 'name',

                  id: 'name',

                anchor:'100%'

            },{

                xtype:'textfield', 

                fieldLabel: 'Password', //第二行是密码输入框

                name: 'pass',

                id: 'pass',

                anchor:'100%',

                inputType: 'password'

            }]

        }]

    }],

    buttons: [{

        text: 'OK',    //用户名密码确认按钮

        handler: function(){               

            var name=Ext.get('name').dom.value;

            var pass=Ext.get('pass').dom.value;

            if(name=='good'&&pass=='good'){

                //login correct, do something

            }else{

                Ext.MessageBox.alert('Warning!', 'Incorrect Login');

            }

                           

        },{

        text: 'Reset',  //用户名密码重置按钮

        handler:function(){

            Ext.get('name').dom.value='';

            Ext.get('pass').dom.value='';

        }

    }]

});

login.render(document.body);

login.getEl().center();

这段代码中，第8行至第30行与本文的主题“布局”相关。这几行代码把一个FormPanel分成两列，左边放一个图片logo；右列再被细分为上下两行，上面一行为用户名输入框，下面一行为密码输入框。这样一个简单的例子已经展示了布局的嵌套，以此递归地嵌套下去，就可以创建出非常复杂的布局方式。但是切记，网页是越简单越好。

从第31行开始，是为了这段login代码的完整性，加入了用于事件响应的按钮(buttons)。

最后两行代码的含义是把该登录界面显示出来，并居中。