根據預先配置動態產生單個或者一組form字段。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>動態產生form字段</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script> <script src="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script> </head> <body> <script> //這個能夠是後臺返回的一個字段定義json,這是一個個的字段,也能夠是一行行的佈局,嵌套一層 var formData = [{ "id": 1, "name": "real_name", "text": "姓名", "type": "textfield", "isnull": false }, { "id": 2, "name": "age", "text": "年齡", "type": "numberfield", "isnull": false }, { "id": 3, "name": "gender", "text": "性別", "type": "textfield", "isnull": true }] //fieldset形式的數據返回示例 var complexData = [{ "id": 20, "name": "我的信息", "fields": [{ "id": 1, "name": "real_name", "text": "姓名", "type": "textfield", "isnull": false }, { "id": 2, "name": "age", "text": "年齡", "type": "numberfield", "isnull": false }, { "id": 3, "name": "gender", "text": "性別", "type": "textfield", "isnull": true }] }, { "id": 21, "name": "單位信息", "fields": [{ "id": 4, "name": "cname", "text": "單位名稱", "type": "textfield", "isnull": false }, { "id": 5, "name": "location", "text": "單位地址", "type": "textfield", "isnull": false }, { "id": 6, "name": "phone", "text": "聯繫電話", "type": "textfield", "isnull": true }] }] //一個一個的加 function addField(data, theform) { if (data && data.length > 0) { for (var i = 0; i < data.length; i++) { var item = data[i]; theform.add({ xtype: item.type, fieldLabel: item.text, name: item.name, allowBlank: item.isnull, flex: 1 }); } } } //一行一行的加 function addComplexField(data, theform) { if (data && data.length > 0) { for (var i = 0; i < data.length; i++) { var item = data[i]; var fs = Ext.create('Ext.form.FieldSet', { collapsible: false, layout: "column", //若是須要多列,則按照列寬度進行column佈局 border: false, id: 'myfield-' + item.id, items: [] }) var fields = item.fields; if (fields && fields.length > 0) { for (var j = 0; j < fields.length; j++) { var field = fields[j] // console.log(field) var component = { columnWidth: 1 / fields.length, layout: "column", border: false, items: [{ xtype: field.type, fieldLabel: field.text, name: field.name, allowBlank: field.isnull, flex: 1 }] } fs.add(component); } } theform.add(fs); } } } var fieldset_index = 0; Ext.application({ name: 'luter-dynamic-form', launch: function () { var form = Ext.create('Ext.form.Panel', { fieldDefaults: { labelAlign: 'right', labelWidth: 120, //這裏控制全局label寬度 labelStyle: 'font-weight:bold;' }, autoHeight: true, border: false, items: [], buttons: ['->', { text: '來一行', action: 'save', handler: function () { var fs = Ext.create('Ext.form.FieldSet', { collapsible: false, layout: "column", //若是須要多列,則按照列寬度進行column佈局 border: false, id: 'myfield-' + fieldset_index, items: [{ columnWidth: .5, layout: "column", border: false, items: [{ xtype: 'textfield', fieldLabel: '掛牌始日期' + fieldset_index, name: 'listingstarttime_date', allowBlank: false, flex: 1 }] }, { columnWidth: .5, layout: "column", border: false, items: [{ columnWidth: .6, layout: "form", border: false, items: [{ xtype: 'datefield', fieldLabel: '掛牌始日期', name: 'listingstarttime_date', flex: 1 }] }, { columnWidth: .4, layout: "form", border: false, items: [{ xtype: 'button', text: '幹掉這個', id: '' + fieldset_index, handler: function (me) { form.remove(Ext.getCmp('myfield-' + me.id)) } }] }] }] }) form.add(fs); fieldset_index++; }, scope: this }, '-', { text: '全乾掉', action: 'close', handler: function () { form.removeAll(); }, scope: this }, { text: '取值看看', action: 'close', handler: function () { console.log(form.getValues(false, false, false, false)) }, scope: this }, '-', { text: '提交', action: 'close', handler: function () { if (form.isValid()) { form.submit({ url: 'aaa', method: 'POST', waitTitle: "提示", waitMsg: '正在提交數據,請稍後 ……', success: function (form, action) { }, failure: function (form, action) { } }); } else { showFailMesg({ msg: '請檢查輸入是否完整和正確!' }); } }, scope: this }] }); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [form] }); addField(formData, form); addComplexField(complexData, form); } }); </script> </body> </html>