form does not post form content

[sparkY]

Hi, i am using the following existing HTML


<div id="tabContainer">
<form id="editorForm" action="http://localhost:8081/cms/editor/save/renderMode/json" method="post" enctype="multipart/form-data">
<input type="hidden" name="document" value="/Repository/Testdoc" />
<div id="tabdefault" class="tab-content">
<div class="editor property">
<label for="Property_Headline">Headline</label> <input type="text" class="x-form-text x-form-field" id="Property_Headline" name="Property_Headline" value="" /><br />
</div>

<div class="editor property">
<label for="Property_Content">Content</label> <input type="text" class="x-form-text x-form-field" id="Property_Content" name="Property_Content" value="" /><br />
</div>
<div class="editor property">
<label for="Property_Links">Links</label> <input type="text" class="x-form-text x-form-field" id="Property_Links" name="Property_Links" value="" /><br />
</div>
</div>
</form>
</div>


and the following js code to submit the form via Ext.form.BasicForm:


function submitEditor() {
for (key in editorForm.getValues()) {
alert('Field: '+key); // only shows the hidden field 'document'
}

editorForm.submit({ // editorForm is Ext.form.BasicForm object created earlier
url:saveUrl,
method: 'POST',
fileUpload:true
});
};


the problem is, that the text-inputs are not passed via POST parameters BUT the hidden input field!

So I tried to debug and alert() all input elements of the form (see JS code above).
The result is, that only the name of the hidden-field pops up - so I guess the editorForm object does not "know" about the other input fields.

How can I solve this?
Do I have to put the <input> Tags as direct children of the <form> ?

[fay]

How are you adding the fields to your editorForm? Can you show the code for one with full config params.

[sparkY]

after each form element I generated the following JS code:

attempt one:


editorForm.add(new Ext.form.Field(name: 'Property_Headline', tabIndex:1}));


attempt two:


<script type="text/javascript">
var propHeadline = new Ext.form.Field({name:'Property_Headline', tabIndex:1});
propHeadline.applyTo('Property_Headline');
editorForm.add(propHeadline);
</script>

[jay@moduscreate.com]

it's hard to see what you're doing wrong when you have posted only a few pieces dude.

[sparkY]

ok - thought it would be easier to read, if I paste the important fragments only.

the complete generated HTML:


<script type="text/javascript">

var editorForm = new Ext.form.BasicForm('editorForm', {
method: 'POST'
});

</script>

<div id="toolbar">test</div>
<div id="editorTabs" class="editor">
<form id="editorForm" action="http://localhost:8081/cms/editor/save/renderMode/json" method="post" enctype="multipart/form-data">
<input type="hidden" name="document" value="/Repository/Testdoc" />
<div id="tabdefault" class="tab-content">
<div class="editor property">
<label for="Property_Headline">Ueberschrift</label> <input type="text" class="x-form-text x-form-field" id="Property_Headline" name="Property_Headline" value="" /><br />
</div>

<script type="text/javascript">
var propHeadline = new Ext.form.Field({name:'Property_Headline', tabIndex:1});
propHeadline.applyTo('Property_Headline');
editorForm.add(propHeadline);
</script>
<div class="editor property">
<label for="Property_Content">Content</label> <input type="text" class="x-form-text x-form-field" id="Property_Content" name="Property_Content" value="" /><br />
</div>
<script type="text/javascript">
var propContent = new Ext.form.Field({name:'Property_Content', tabIndex:2});
propContent.applyTo('Property_Content');
editorForm.add(propContent);
</script>
<div class="editor property">
<label for="Property_Links">Links</label> <input type="text" class="x-form-text x-form-field" id="Property_Links" name="Property_Links" value="" /><br />

</div>
<script type="text/javascript">
var propLinks = new Ext.form.Field({name:'Property_Links', tabIndex:3});
propLinks.applyTo('Property_Links');
editorForm.add(propLinks);
</script>
</div>
<div id="taberweitert" class="tab-content">
<div class="editor property">
<label for="Property_Page1">Page1</label> <input type="text" class="x-form-text x-form-field" id="Property_Page1" name="Property_Page1" value="" /><br />

</div>
<script type="text/javascript">
var propPage1 = new Ext.form.Field({name:'Property_Page1', tabIndex:1});
propPage1.applyTo('Property_Page1');
editorForm.add(propPage1);
</script>
<div class="editor property">
<label for="Property_Page2">Page2</label> <input type="text" class="x-form-text x-form-field" id="Property_Page2" name="Property_Page2" value="" /><br />
</div>
<script type="text/javascript">
var propPage2 = new Ext.form.Field({name:'Property_Page2', tabIndex:2});
propPage2.applyTo('Property_Page2');
editorForm.add(propPage2);
</script>

</div>
<div id="tabadmin" class="tab-content"></div>
</form>
</div>

<script type="text/javascript">
editorUrl = 'http://localhost:8081/cms/editor';
saveUrl = 'http://localhost:8081/cms/editor/save/renderMode/json';
documentLocation = '/Repository/Testdoc';
//alert(editorForm.findField('Property_Headline').setValue('testValue'));

var tabs = new Ext.TabPanel('editorTabs');
tabs.addTab('tabdefault', "default");
tabs.activate('tabdefault');
tabs.addTab('taberweitert', "erweitert");
tabs.addTab('tabadmin', "Administration");



function submitEditor() {
for (key in editorForm.getValues()) {
alert('Field: '+key);
}
editorForm.submit({
url:saveUrl,
method: 'POST',
fileUpload:true
});
};

editorForm.on('actioncomplete', function(form, action){ // saved form successfully -> reload
Ext.get("editor").load({
url: editorUrl,
scripts: true,
params: "document="+path,
text: "Refreshing: "+path
});
});

editorForm.on('actionfailed', function(form, action){ // did not save form
alert('Document not saved!');
});

var tb = new Ext.Toolbar('toolbar');
tb.addSeparator();
tb.addText('<b>Dokument: </b>'+documentLocation);
tb.addSeparator();
tb.addText('<b>Aktionen: </b>');
tb.addButton({text:'speichern', handler: submitEditor});
tb.addButton({text:'l&ouml;schen'});
tb.addButton({text:'publizieren', enableToggle:true, pressed:false});
tb.addSeparator();
tb.addText('<b>neues Dokument: </b>');

var store = new Ext.data.SimpleStore({
fields: ['name'],
data : [['Simple']] // todo: read from server
});

var doctype = new Ext.form.ComboBox({
allowBlank:false,
store: store,
displayField:'doctype',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Dokumenttyp ...',
selectOnFocus:true,
width:135
});

var docname = new Ext.form.TextField({
allowBlank:false,
displayField:'filename'
});

tb.add(doctype);
tb.addText(' Name');
tb.add(docname);
tb.addButton({text:'ok'});
</script>

[sparkY]

hours later .... I think the whole BasicForm implementation is buggy as hell.

I wrote this little helper function to add existing form fields to a BasicForm object and then submit the form.
After adding all Ext.form.Field objects I check for the added fields with getValues() method.
There are no entries!



function submitEditor() {
var editorForm = new Ext.form.BasicForm('editorForm', {
method: 'POST',
fileUpload:true,
url: 'http://localhost:8081/cms/editor/save/renderMode/json',

});

var properties = Ext.DomQuery.select('/[name^=Property_] ');
var props = new Array();
for (i=0; i < properties.length; i++) {
props[i] = new Ext.form.Field({name:properties[i].id, tabIndex:i});
props[i].applyTo(properties[i].id); // <-- field objects are created correctly !!!
editorForm.add(props[i]);
}
for (key in editorForm.getValues()) {alert('Field: '+key);} // <-- alerts just nothing!
return;
}


have a nice day - but this sucks :(

[boyatomic]

I couldn't see that from the code you posted (after quickly looking through it.)

1. If not, set
fileUpload: false

2. If so, try adding
inputType: 'file'
to the docname textfield config.


and hopefully it'll work. That solved one of my problems for case 1, I haven't tried case 2 yet.