请教各位：写一个Ext页面,页面内容主要为表单,并且将不同类的表单元素分组

写一个Ext页面,页面内容主要为表单,并且将不同类的表单元素分组

[code="java"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



04.form



<br> Ext.onReady(function(){</p> <pre><code>// HtmlEditor需要这个 Ext.QuickTips.init(); var form = new Ext.form.FormPanel({ labelAlign: &#39;right&#39;, labelWidth: 50, width: 600, title: &#39;form&#39;, frame: true, items: [{ layout: &#39;column&#39;, items: [{ columnWidth:.7, xtype:&#39;fieldset&#39;, checkboxToggle:true, title: &#39;单纯输入&#39;, autoHeight:true, defaults: {width: 300}, defaultType: &#39;textfield&#39;, items: [{ fieldLabel: &#39;文本&#39;, name: &#39;text&#39; },{ xtype: &#39;numberfield&#39;, fieldLabel: &#39;数字&#39;, name: &#39;number&#39; },{ xtype:&quot;combo&quot;, fieldLabel: &#39;选择&#39;, name: &#39;combo&#39;, store: new Ext.data.SimpleStore({ fields: [&#39;value&#39;, &#39;text&#39;], data: [ [&#39;value1&#39;, &#39;text1&#39;], [&#39;value2&#39;, &#39;text2&#39;] ] }), displayField: &#39;text&#39;, valueField: &#39;value&#39;, mode: &#39;local&#39;, emptyText:&#39;请选择&#39; },{ xtype: &#39;datefield&#39;, fieldLabel: &#39;日期&#39;, name: &#39;date&#39; },{ xtype: &#39;timefield&#39;, fieldLabel: &#39;时间&#39;, name: &#39;time&#39; },{ xtype: &#39;textarea&#39;, fieldLabel: &#39;多行&#39;, name: &#39;textarea&#39; },{ xtype: &#39;hidden&#39;, name: &#39;hidden&#39; }] },{ columnWidth:.3, layout:&#39;form&#39;, items:[{ xtype:&#39;fieldset&#39;, checkboxToggle:true, title: &#39;多选&#39;, autoHeight:true, defaultType: &#39;checkbox&#39;, hideLabels: true, style: &#39;margin-left:10px;&#39;, bodyStyle: &#39;margin-left:20px;&#39;, items: [{ boxLabel: &#39;首先要穿暖&#39;, name: &#39;check&#39;, value: &#39;1&#39;, checked: true, width: &#39;auto&#39; },{ boxLabel: &#39;然后要吃饱&#39;, name: &#39;check&#39;, value: &#39;2&#39;, checked: true, width: &#39;auto&#39; },{ boxLabel: &#39;房子遮风避雨&#39;, name: &#39;check&#39;, value: &#39;3&#39;, width: &#39;auto&#39; },{ boxLabel: &#39;行路方便&#39;, name: &#39;check&#39;, value: &#39;4&#39;, width: &#39;auto&#39; }] },{ xtype:&#39;fieldset&#39;, checkboxToggle:true, title: &#39;单选&#39;, autoHeight:true, defaultType: &#39;radio&#39;, hideLabels: true, style: &#39;margin-left:10px;&#39;, bodyStyle: &#39;margin-left:20px;&#39;, items: [{ boxLabel: &#39;渴望自由&#39;, name: &#39;rad&#39;, value: &#39;1&#39;, checked: true, width: &#39;auto&#39; },{ boxLabel: &#39;祈求爱情&#39;, name: &#39;rad&#39;, value: &#39;2&#39;, width: &#39;auto&#39; }] }] }] },{ layout: &#39;form&#39;, labelAlign: &#39;top&#39;, items: [{ xtype: &#39;htmleditor&#39;, fieldLabel: &#39;在线编辑器&#39;, id: &#39;editor&#39;, anchor: &#39;98%&#39; }] }], buttons: [{ text: &#39;保存&#39; },{ text: &#39;读取&#39; },{ text: &#39;取消&#39; }] }); form.render(&quot;form&quot;); </code></pre> <p>});<br>





[/code]

[code="java"]



04.form




<br> Ext.onReady(function(){</p> <pre><code>Ext.QuickTips.init(); var form = new Ext.form.FormPanel({ labelAlign: &#39;right&#39;, labelWidth: 60, title: &#39;form&#39;, frame:true, width: 450, url: &#39;form.jsp&#39;, items: [{ layout:&#39;column&#39;, items: [{ columnWidth:.5, layout: &#39;form&#39;, xtype: &#39;fieldset&#39;, title: &#39;俩字&#39;, autoHeight: true, defaultType: &#39;textfield&#39;, items:[ {fieldLabel: &#39;俩字&#39;}, {fieldLabel: &#39;俩字&#39;} ] },{ columnWidth:.5, layout: &#39;form&#39;, xtype: &#39;fieldset&#39;, title: &#39;三个字&#39;, autoHeight: true, style: &#39;margin-left: 20px;&#39;, defaultType: &#39;textfield&#39;, items:[ {fieldLabel: &#39;三个字&#39;}, {fieldLabel: &#39;三个字&#39;}, {fieldLabel: &#39;三个字&#39;}, {xtype: &#39;panel&#39;,html: &#39;&lt;center&gt;&lt;img src=&quot;user_female.png&quot; /&gt;&lt;/center&gt;&#39;} ] }] },{ xtype: &#39;fieldset&#39;, title: &#39;四个汉字&#39;, autoHeight: true, items: [{ width: 345, height: 100, xtype: &#39;textarea&#39;, fieldLabel: &#39;四个汉字&#39; }] }], buttons: [{ text: &#39;按钮&#39;, handler: function() { form.getForm().submit(); } }] }); form.render(&quot;form&quot;); </code></pre> <p>});<br>





[/code]

这些你都可以去看EXTJS里面自带的example来自己尝试啊
里面有那个group分组的示例的

你可以利用FieldSet组件

参考
[url]http://www.extjs.com/deploy/dev/examples/form/dynamic.html[/url]
[url]http://www.extjs.com/deploy/dev/examples/form/check-radio.html[/url]