ExtJs学习笔记(19)_复杂Form示例

Form布局在所有布局中是最为复杂，使用频度最广，同时也是最难掌握的,下面给出几个示例

 

1.登录UI界面

 

2.加入其它不同类型的输入组件后

 

3.更加复杂的结构：

>

 

 

 转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/09/03/1283042.html

 

技巧:
1.先用new Ext.FormPanel({
items:[
{...},{...},{...}...
]
})
类似的代码，确定整个form的行数，即items里{}的个数
2.每行如果要分列，再利用
{
layout:"column",
items:[{},{},{}...]
}
以column布局，横向分切为N列,即items:[{},{},{}...]中{}的个数
3.每列中，如果要放输入项，再把每行相关列(其实就是单元格)，采用form布局方式处理，并标明输入项，类似以下代码:
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype:"textfield",
fieldLabel:"A1",
anchor:"90%"
}
}, {
columnWidth: 0.5,
html: "aaaaaaaaaaa"
}]