这是最重要的一个布局,几乎所有的表单界面都可以采用form布局,详细的用法本文不作讨论(可以查阅官方API文档),这里只给出一个简单的示例
<
script type
=
"
text/javascript
"
>
![img_405b18b4b6584ae338e0f6ecaf736533.gif](https://yqfile.alicdn.com/img_405b18b4b6584ae338e0f6ecaf736533.gif?x-oss-process=image/resize,w_1400/format,webp)
Ext.onReady(
function
()
{
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
var win = new Ext.Window({
title: "form Layout",
height: 150,
width: 230,
plain: true,
bodyStyle: 'padding:15px',
items:
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
{
xtype: "form",
labelWidth: 30,
defaultType: "textfield",
frame:true,
items:
[
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
{
fieldLabel:"姓名",
name:"username",
allowBlank:false
},
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
{
fieldLabel:"呢称",
name:"nickname"
},
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
{
fieldLabel: "生日",
xtype:'datefield',
name: "birthday",
width:127
}
]
}
});
win.show();
}
);
<
/
script>
效果图:
![](http://images.cntvs.com/jimmy/080902/06.jpg?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_a6339ee3e57d1d52bc7d02b338e15a60.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_405b18b4b6584ae338e0f6ecaf736533.gif](https://yqfile.alicdn.com/img_405b18b4b6584ae338e0f6ecaf736533.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_1c53668bcee393edac0d7b3b3daff1ae.gif](https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_7a2b9a960ee9a98bfd25d306d55009f8.gif](https://yqfile.alicdn.com/img_7a2b9a960ee9a98bfd25d306d55009f8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_7a2b9a960ee9a98bfd25d306d55009f8.gif](https://yqfile.alicdn.com/img_7a2b9a960ee9a98bfd25d306d55009f8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_7a2b9a960ee9a98bfd25d306d55009f8.gif](https://yqfile.alicdn.com/img_7a2b9a960ee9a98bfd25d306d55009f8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_105a1e124122b2abcee4ea8e9f5108f3.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_7a2b9a960ee9a98bfd25d306d55009f8.gif](https://yqfile.alicdn.com/img_7a2b9a960ee9a98bfd25d306d55009f8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_105a1e124122b2abcee4ea8e9f5108f3.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_2887d91d0594ef8793c1db92b8a1d545.gif](https://yqfile.alicdn.com/img_2887d91d0594ef8793c1db92b8a1d545.gif?x-oss-process=image/resize,w_1400/format,webp)
![img_7a2b9a960ee9a98bfd25d306d55009f8.gif](https://yqfile.alicdn.com/img_7a2b9a960ee9a98bfd25d306d55009f8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_105a1e124122b2abcee4ea8e9f5108f3.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_105a1e124122b2abcee4ea8e9f5108f3.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_105a1e124122b2abcee4ea8e9f5108f3.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_33d02437d135341f0800e3d415312ae8.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_05dd8d549cff04457a6366b0a7c9352a.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_a6339ee3e57d1d52bc7d02b338e15a60.gif?x-oss-process=image/resize,w_1400/format,webp)
效果图:
![](http://images.cntvs.com/jimmy/080902/06.jpg?x-oss-process=image/resize,w_1400/format,webp)