我需要製作如下圖所示的類型工作流程。該工作流有任務與 子任務Ext JS:如何在提交表單時維護字段的層次結構
我的模型層次是一種
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的,所以我設計了一個表格,如下圖所示的圖像:
現在的問題是,當我提出我的表格,郵寄ŧ他以數組形式存在的數據不表示任務的層次結構,即子任務屬於哪個任務的子和父關係。
我的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的同時提交形式來維持這種層次結構。
有一些在你的問題的缺陷。 1)絕對沒有你遇到的問題的描述。 2.)你的代碼格式很差。 3.)您的代碼不夠具體(例如,突出顯示問題所在的區域)。所以如果你希望得到這個問題的答案,我首先闡述你遇到的問題,將代碼分解到問題的相關部分,並且(如果可能的話)提供一個可運行版本的代碼其他人可以幫助調試任何可能的問題。 – existdissolve 2014-10-13 05:07:28
我認爲現在問題非常清楚。那麼,這個問題有什麼解決方案或建議嗎? – 2014-10-13 08:16:24
對此有什麼好運? – existdissolve 2014-10-14 13:22:34