根据预先配置动态产生单个或者一组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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。