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)。

 

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

 

转自：http://www.phpchina.com/html/01/64001_itemid_31806.html