Question

我需要制作一种类型的工作流程，如下图所示。此工作流程具有层次结构的任务子任务

enter image description here

我的模特是善良的

public class WorkflowTaskDTO
{
    public Guid Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public List<TaskDTO> TaskDTOList { get; set; }
}

public class TaskDTO
{
    public Guid Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public int TaskOrder { get; set; }
    public List<TaskDTO> TaskDTOList { get; set; }
    public Guid ParentId { get; set; }
}

我的应用程序是在extjs中，所以我设计了一个表单，如下图所示：

enter image description here

现在，问题是当我提交表单时，它以数组的形式发布数据，这不表示任务的层次结构，即子和父的关系，哪个子任务属于哪个任务。

enter image description here

我的extjs代码是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Test</title>
    <link href="Ext/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" rel="stylesheet" />
    <script src="Ext/build/ext-all.js"></script>
</head>
<body>
    <div id="output"></div>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.define('Ext.form.ClosableFieldSet', {
                extend: 'Ext.form.FieldSet',
                alias: 'widget.workflowClosableFieldSet',
                columnWidth: 0.5,
                title: 'Workflow',
                collapsible: true,
                defaultType: 'textfield',
                defaults: { anchor: '100%' },
                layout: 'anchor',
                items: [
                    {
                        fieldLabel: 'Task Name',
                        name: 'TaskName'
                    },
                    {
                        fieldLabel: 'Description',
                        name: 'field2'
                    }, {
                        xtype: 'button',
                        text: 'remove',
                        style: 'float: right; width: 120px ! important;',
                        handler: function (btn) {
                            console.log(this.counter);
                            var fieldset = btn.up('fieldset');
                            var fieldsetId = fieldset.getId();
                            Ext.getCmp(fieldsetId).destroy();
                        }
                    }, {
                        xtype: 'button',
                        text: 'Add SubTask',
                        style: 'float: right; width: 120px ! important;',
                        handler: function () {
                            console.log(this.counter);
                            this.up('fieldset').add(Ext.widget('workflowClosableFieldSet', {
                            }));
                        }
                    }
                ]
            });
            Ext.create('Ext.form.Panel', {
                title: 'Form with Dynamic FieldSets',
                bodyPadding: 10,
                width: 550,
                renderTo: 'output',

                items: [
               {
                   xtype: 'textfield',
                   name: 'WorkflowName',
                   fieldLabel: 'Workflow Name:'
               }, {
                   xtype: 'button',
                   text: 'Add Task',
                   handler: function () {
                       this.up('form').add(Ext.widget('workflowClosableFieldSet', {
                       }));
                   }
               },
                {
                    xtype: 'workflowClosableFieldSet'
                }
                ],
                buttons: [{
                    text: 'Reset',
                    handler: function () {
                        this.up('form').getForm().reset();
                    }
                }, {
                    text: 'Submit',
                    formBind: true, //only enabled once the form is valid
                    disabled: true,
                    handler: function () {
                        var form = this.up('form').getForm();
                        console.log(form);
                        console.log(form.getValues());
                        console.log(form.getValues());
                        if (form.isValid()) {
                            form.submit({
                                success: function (form, action) {
                                    Ext.Msg.alert('Success', action.result.msg);
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('Failed', action.result.msg);
                                }
                            });
                        }
                    }
                }]
            });
        });
    </script>
</body>
</html>

有没有办法在提交表单时使用extjs维护这种层次结构。

Answer 1

开箱即用，Ext JS不会分层处理表单值。虽然您可能会根据组件创建层次结构，但表单字段的实际值将被展平为您当前在结果中看到的表单。

为了在与您在界面方面创建的内容相匹配的层次结构中提交此数据，您需要创建自己的序列化过程。你可以通过多种方式实现这一目标。例如：

从表单开始并遍历每个的后代树 fieldset，随时构建您的价值层次
在字段上创建一些命名约定并使用getFieldValues() 获取所有值的键/值列表。然后你可以递归分析该列表以根据您的命名构建层次结构约定。

这些方法（或其他方法）都不应该太难做，但您必须创建自己的数据序列化，以便以您想要的方式提交。

Answer 2

在提交中点击

{
    text: 'Submit',
    formBind: true, //only enabled once the form is valid
    disabled: true,
    handler: function () {
        var form = this.up('form');
        console.log(form);
        var WorkflowTaskDTO = {
            Name: '',
            Remarks: '',
            TaskDTOList: []
        }
        var array = form.items.items;
        //console.log(array.length);
        for (var i = 0; i < array.length; i++) {
            switch (array[i].componentCls) {
                case 'x-field':
                    switch (array[i].name) {
                        case 'WorkflowName':
                            WorkflowTaskDTO.Name = array[i].value;
                            break;
                        case 'Remarks':
                            WorkflowTaskDTO.Remarks = array[i].value;
                            break;
                    }
                    break;


                case 'x-fieldset':
                    var __ = this.customFunction(array[i]);
                    WorkflowTaskDTO.TaskDTOList.push(__);
                    break;
            }
        }

        console.log(WorkflowTaskDTO);

        if (form.isValid()) {

            Ext.Ajax.request({
                url: '/Workflow/Create',
                type: 'json',
                method: 'POST',
                jsonData: WorkflowTaskDTO,
                success: function (response) {


                },
                failure: function (response) {

                }
            });
        }
    },
    customFunction: function (item) {
        var TaskDTO = {
            Name: '',
            TaskOrder: '',
            DesignationAssignedTo: '',
            DesignationAssignedBy: '',
            DesignationApprovedBy: '',
            Remarks: '',
            IsProcessComplete: '',
            IsBrainStromingRequired: '',
            IsTaskActivityRequired: '',
            IsUploadRequired: '',
            IsApproveRequired: '',
            TaskDTOList: []
        }
        var array = item.items.items;
        for (var i = 0; i < array.length; i++) {
            switch (array[i].componentCls) {
                case 'x-field':
                    switch (array[i].name) {
                        case 'TaskName':
                            TaskDTO.Name = array[i].value;
                            break;
                        case 'TaskOrder':
                            TaskDTO.TaskOrder = array[i].value;
                            break;
                        case 'DesignationAssignedTo':
                            TaskDTO.DesignationAssignedTo = array[i].value;
                            break;
                        case 'DesignationAssignedBy':
                            TaskDTO.DesignationAssignedBy = array[i].value;
                            break;
                        case 'DesignationApprovedBy':
                            TaskDTO.DesignationApprovedBy = array[i].value;
                            break;
                        case 'Remarks':
                            TaskDTO.Remarks = array[i].value;
                            break;
                        case 'IsProcessComplete':
                            TaskDTO.IsProcessComplete = array[i].value;
                            break;
                        case 'IsBrainStromingRequired':
                            TaskDTO.IsBrainStromingRequired = array[i].value;
                            break;
                        case 'IsTaskActivityRequired':
                            TaskDTO.IsTaskActivityRequired = array[i].value;
                            break;
                        case 'IsUploadRequired':
                            TaskDTO.IsUploadRequired = array[i].value;
                            break
                        case 'IsApproveRequired':
                            TaskDTO.IsApproveRequired = array[i].value;
                            break;
                    }
                    break;

                case 'x-fieldset':
                    var __ = this.customFunction(array[i]);
                    TaskDTO.TaskDTOList.push(__);
                    break;

            }
        }

        return TaskDTO;
    }
}

Ext JS：提交表单时如何维护字段的层次结构

2 个答案: