form和column:extJS的布局关键字

 

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

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

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

  1. var login = new Ext.FormPanel({
  2.     labelAlign: 'top',
  3.     frame:true,
  4.     title: 'Login',
  5.     id: 'login',
  6.     bodyStyle:'padding:5px 5px 0',
  7.     width: 400,
  8.     items: [{
  9.         layout: 'column'//把整个空间划分成两列
  10.         items:[{
  11.             html:'<img src="loginLogo.png" />' //左边列放一个logo
  12.         },{
  13.             columnWidth:.5,
  14.             layout: 'form', //右边列再分成上下两行
  15.             items: [{
  16.                 xtype:'textfield',
  17.                 fieldLabel: 'Username', //第一行是用户名输入框
  18.                 name: 'name',
  19.                   id: 'name',
  20.                 anchor:'100%'
  21.             },{
  22.                 xtype:'textfield'
  23.                 fieldLabel: 'Password', //第二行是密码输入框
  24.                 name: 'pass',
  25.                 id: 'pass',
  26.                 anchor:'100%',
  27.                 inputType: 'password'
  28.             }]
  29.         }]
  30.     }],
  31.     buttons: [{
  32.         text: 'OK',    //用户名密码确认按钮
  33.         handler: function(){               
  34.             var name=Ext.get('name').dom.value;
  35.             var pass=Ext.get('pass').dom.value;
  36.             if(name=='good'&&pass=='good'){
  37.                 //login correct, do something
  38.             }else{
  39.                 Ext.MessageBox.alert('Warning!', 'Incorrect Login');
  40.             }
  41.                            
  42.         },{
  43.         text: 'Reset'//用户名密码重置按钮
  44.         handler:function(){
  45.             Ext.get('name').dom.value='';
  46.             Ext.get('pass').dom.value='';
  47.         }
  48.     }]
  49. });
  50. login.render(document.body);
  51. login.getEl().center();

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

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

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

你可能感兴趣的:(form和column:extJS的布局关键字)