c# - Ext JS: How to maintain hierarchy of fields when submitting form -
i need create workflow of kind shown in image below. workflow have tasks hierarchy of sub tasks
my model of kind
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; } } my application in extjs, have designed form shown in image below:
now, problem when submit form, post info in form of array not indicate hierarchy of tasks i.e. relation of kid , parent, sub task belongs tasks.
my extjs code :
<!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 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 1 time form 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> is there way maintain such hierarchy using extjs while submitting form.
out of box, ext js doesn't treat form values hierarchically. while might creating hierarchies in terms of components, actual values of form fields going flattened form you're seeing in results.
in order submit info in hierarchy matches you're creating in terms of interface, you'll need create own serialization process. in number of ways. example:
start form , traverse descendant tree each fieldset, building out value hierarchy go
create naming convention on fields , utilize getfieldvalues() key/value list of values. recursively analyze list build out hierarchy based on naming convention.
neither of these methods (or else) should hard do, have create own serialization of info in order submit in in way want.
c# asp.net-mvc extjs
No comments:
Post a Comment