2014-10-12 58 views
0

我需要製作如下圖所示的類型工作流程。該工作流有任務與 子任務Ext JS:如何在提交表單時維護字段的層次結構

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的同時提交形式來維持這種層次結構。

+0

有一些在你的問題的缺陷。 1)絕對沒有你遇到的問題的描述。 2.)你的代碼格式很差。 3.)您的代碼不夠具體(例如,突出顯示問題所在的區域)。所以如果你希望得到這個問題的答案,我首先闡述你遇到的問題,將代碼分解到問題的相關部分,並且(如果可能的話)提供一個可運行版本的代碼其他人可以幫助調試任何可能的問題。 – existdissolve 2014-10-13 05:07:28

+0

我認爲現在問題非常清楚。那麼,這個問題有什麼解決方案或建議嗎? – 2014-10-13 08:16:24

+0

對此有什麼好運? – existdissolve 2014-10-14 13:22:34

回答

1

在提交單擊

{ 
    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; 
    } 
} 
1

開箱即用,Ext JS不會按層次處理表單值。雖然您可能正在使用組件創建層次結構,但表單字段的實際值將被平鋪爲您當前在結果中看到的表單。

爲了在層次結構中提交這些數據以匹配您在界面上創建的內容,您需要創建自己的序列化過程。你可以通過很多方式來做到這一點。例如:

  • 開始從形式和遍歷每個 字段集子孫樹,構建出你的價值層級,當您去

  • 上的字段創建了一些命名約定,並使用getFieldValues() 獲得所有值的鍵/值列表。然後你可以遞歸地 分析該列表,根據你的命名規則構建出層次結構。

這些方法都不(或別的東西)應該是太難的事,但你必須以提交在你所希望的方式來創建你自己的數據序列化。