EXT中Form的行列布局

刚刚学习EXT，感觉布局有点麻烦，记录下:

在网上找到的，可惜解决了之后才发现的：
第一次用Extjs的column布局时遇见了很多问题，记录下来，供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题，导致这些问题的常见原因如下：

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3.在每个column里再加上form layout，再在form里加textfield。

4.在新建TabPanel时，将其属性layoutOnTabChange设置为true即可。（此方法不通用）

下面将输出两行四列

 var panel = new Ext.FormPanel({
  title:"人员信息",
  frame: true,
  width:500,
  height:300,
  layout:'form',
  items:[{
   layout:"column",
   items:[{html:"列1",width:200},
   {html:"列2",columnWidth:.3},
   {html:"列3",columnWidth:.3},
   {html:"列4",columnWidth:.4}]
  },{
   layout:"column",
   items:[{html:"列1",width:200},
   {html:"列2",columnWidth:.3},
   {html:"列3",columnWidth:.3},
   {html:"列4",columnWidth:.4}]
  }]
 })
 panel.render('install');

总结：

要在form里面输出一个无文本框的label可以有两种方法来实现

1. {baseCls: 'form-label', html: '*请填写数据库用户名'}
2. {xtype: 'textfield', hidden: true, labelSeparator: '', fieldLabel: '*请填写数据库用户名'}

方法1中每一行样式为x-panel，方法二为x-form-item，具体应用过程中可能需要修改CSS样式