学习ExtJS form布局

  一、 Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。

  hideLabels:tru表示隐藏标签,默认为false。

  labelAlign:标签队齐方式left、right、center,默认为left。

  

复制代码 代码如下:

  Ext.onReady(function(){

  var _panel = new Ext.Panel({

  title:"人员信息",

  renderTo:Ext.getBody(),

  frame:true,

  width:500,

  height:300,

  layout:"form",

  hideLabels:false,

  labelAlign:"right",

  height:120,

  defaultType: 'textfield',

  items:[

  {fieldLabel:"姓名",name:"name"},

  {fieldLabel:"请输入地址",name:"address"},

  {fieldLabel:"请输入电话",name:"tel"}

  ]

  }

  );

  二、在实际应用中,Ext.form.FormPanel这个类默认布局使用的是Form布局,因此我们直接使用FormPanel即可。上面的例子可改写成如下的形式:

  

复制代码 代码如下:

  Ext.onReady(function(){

  var _panel = new Ext.FormPanel({

  title:"人员信息",

  renderTo:Ext.getBody(),

  frame:true,

  width:500,

  height:300,

  hideLabels:false,

  labelAlign:"right",

  height:120,

  defaultType: 'textfield',

  items:[

  {fieldLabel:"姓名",name:"name"},

  {fieldLabel:"请输入地址",name:"address"},

  {fieldLabel:"请输入电话",name:"tel"}

  ]

  }

  );