ext

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样式