刚刚学习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样式