form和column：extJS的布局

对于一个容器组件，比如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)。

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