前台html <body> <div id="form1"></div> <div id="form2"></div> <div id="form3"></div> </body> js文件 Ext.onReady(function() { //fieldset应用1 var form1 = new Ext.form.FormPanel({ width: 350, frame: true, //圆角和浅蓝色背景 renderTo: 'form1', //呈现 title: "form1", bodyStyle: "padding:5px 5px 0", items: [ { fieldLabel: "UserName", //文本框标题 xtype: "textfield", //表单文本框 name: "user", id: "user", width: 200 }, { fieldLabel: "PassWord", xtype: "textfield", name: "pass", id: "pass", width: 200 } ], buttons: [{ text: "确定" }, { text: "取消", handler: function() { alert("事件!"); } }] }); /* fieldset应用2 items中属性相同的情况下,可以提取公共属性 在FormPanel的defaults属性中配置 */ var form2 = new Ext.form.FormPanel({ width: 350, frame: true, renderTo: "form2", title: "form2", bodyStyle: "padding:5px 5px 0", defaults: { width: 200, xtype: "textfield" }, //*****简化****// items: [ { fieldLabel: "说明", name: "description", id: "description" }, { fieldLabel: "备考", name: "Notes", id: "notes" } ], buttons: [{ text: "确定" }, { text: "取消", handler: function() { alert(); } }] }); /* inputType的类型,参数如下 radio check text(默认) file password等等 --------------------------------------- xtype的类型,在extjs的form表单中的定义 form Ext.FormPanel checkbox Ext.form.Checkbox combo Ext.form.ComboBox datefield Ext.form.DateField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label Ext.form.Label numberfield Ext.form.NumberField radio Ext.form.Radio textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerField */ //fieldset实例 var form3 = new Ext.form.FormPanel({ width: 350, frame: true, renderTo: "form3", title: "form3", bodyStyle: "padding:5px 5px 0", defaults: { width: 200, xtype: "textfield" }, method: 'post', ulr: 'ExtjsWindow.aspx', items: [{ xtype: "fieldset", checkboxToggle: true, //true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false checkboxName: "dfdf", //当上面为true时,作为checkbox的name,方便表单操作 title: "选填信息", defaultType: 'textfield', width: 330, autoHeight: true, //使自适应展开排版 items: [{ fieldLabel: "UserName", name: "user", anchor: "95%"//330px-labelWidth剩下的宽度的95%,留下5%作为后面提到的验证错误提示 }, { fieldLabel: "PassWord", inputType: "password", //密码文本 name: "pass", anchor: "95%" }] }, { xtype: 'fieldset', title: '个人信息', collapsible: true, autoHeight: true, width: 330, defaults: { width: 150 }, defaultType: 'textfield', items: [{ fieldLabel: '爱好', name: 'hobby', value: '' }, { xtype: "combo", name: 'sex', store: ["男", "女", "保密"], fieldLabel: "性别", emptyText: '请选择性别.' }] }], buttons: [{ text: "确定" }, { text: "取消", handler: function() { alert(); } }] }); });