Ext.ux.form.ServerForm

[trbs]

Hi all,

Here my first Ext.ux contribution :)

Updated: 12-July-2007
There is a know problem with Internet Explorer, thanks for MagicFrog for reporting this. It works on Firefox / Opera and Safari, so i'm guessing it's a bug in IE. And without decent debug tools i cannot hunt this much further. Hopefully this will disappear after working down items from the TODO list.

Ext.ux.form.ServerForm
Create's a Ext.form.Form from a server side xml definition file.

The definition file contains:

form field
submit/validation url
extra validation rules


Download
See http://ido.nl.eu.org/extdjango/ for a demo and download links.
You can view and download the Extjs code there as well as the integration code for Django.
Feel free to create your own server side class for php / java / perl / c# / etc, I'll include and/or host your server framework class with this user extension if you like.

Online Demo
Online Demo at http://ido.nl.eu.org/extdjango/
The online demo combines Django (http://www.djangoproject.com)'s great newforms (http://www.djangoproject.com/documentation/newforms/) with Ext forms. It does validation both at the client and at the server, because everybody knows that one should never ever accept information send by the client without checking it explicitly before going into the storage backend ;)

The great thing about ServerForms and the accompanying code for Django (but feel free to write something up for your own serverside framework) is that you can now have both fancy Ext forms and serverside validation without having to write the form code twice.

Todo / Future Thought

JSON Support; by adding config option: {format: 'json'} to ServerForm.
Merge with FormBuilder; http://extjs.com/forum/showthread.php?p=45577#post45577
Fieldset Support;
More Form Options;


XML Definition File
The XML Definition file would like something like this:


<?xml version="1.0" encoding="UTF-8"?>
<response success="true">
<url>/extdjango/extformsubmit/</url>
<form>
<field>
<id>firstname</id>
<type>Ext.form.TextField</type>
<config><![CDATA[{'emptyText': 'fill me in', 'fieldLabel': 'firstname', 'allowBlank': 'false', 'maxLength': 20}]]></config>
</field><field>
<id>lastname</id>
<type>Ext.form.TextField</type>
<config><![CDATA[{'emptyText': 'fill me in', 'fieldLabel': 'lastname', 'allowBlank': 'false', 'maxLength': 20}]]></config>
</field><field>
<id>company</id>
<type>Ext.form.TextField</type>
<config><![CDATA[{'vtype': 'inc', 'fieldLabel': 'company', 'allowBlank': 'false', 'vtypeText': "Must end with 'inc.' <br/><i>This is a vtypes inserted from the django (serverside) it is not part of the standard ExtJS Vtypes set.</i>", 'value': 'default inc.', 'emptyText': 'fill me in', 'vtypeFunc': 'function(v) {\n\t\treturn /^.*(inc.?)$/i.test(v);\n\t }', 'maxLength': 20}]]></config>
</field><field>
<id>email</id>
<type>Ext.form.TextField</type>
<config><![CDATA[{'vtype': 'email', 'fieldLabel': 'email', 'allowBlank': 'false'}]]></config>
</field><field>
<id>date</id>
<type>Ext.form.DateField</type>
<config><![CDATA[{'fieldLabel': 'date', 'allowBlank': 'false'}]]></config>
</field><field>
<id>enable</id>
<type>Ext.form.Checkbox</type>
<config><![CDATA[{'fieldLabel': 'enable'}]]></config>
</field>
</form>
</response>

[brian.moeskau]

Hey Trbs,

I see that you created a wiki page, but there seem to be more info here in this post. It would be nice to add this info to the wiki page, as many people will probably find it there. Especially for your to-do list and the sample XML file.

[trbs]

done :)

[mfw24]

how would you make the checkbox required (clientside)?

[trbs]

how would you make the checkbox required (clientside)?

The checkbox hasn't got the necessary validation methods, so i think this can't be done without writing your own validation methods.

In most cases this doesn't make much sense, since CheckBox is a boolean value.

But i can imaging cases where you would want this, for example if you have a CheckBox in a form where the user must agree to some conditions like an end user agreement. So the checkbox must always be True.

Jack, if your reading this thread, maybe add validateValue() method to CheckBox ?

Most of the vtypes would be really simple :) I can think of 2 at the moment, Always true like above and Depends on state of some other field. Like only if you (optionally) fill in your full name then you have to accept the privacy agreement, otherwise that's not required.

[mfw24]

yes!...that's exactly what i needed the validation for. Why doesn't the value of the checkbox change? WHen i grab the value it always seems to be true (whether its checked or not). I tried to write some logic to ensure that it's checked, but it always came up 'true'.

I think i tried doing something like this...

var chkvalue = form.checkbox.getvalue()

if chkvalue = 'true'


else

[DigitalSkyline]

You'd need to use the checked property of the checkbox (checkbox.checked)

good info here:
http://www.quirksmode.org/js/forms.html

[attiato]

It's not working with ext 2.0
errors:
sp has no properties
http://localhost/extjs2/adapter/yui/ext-yui-adapter.js
Line 9

and

Ext.ux.form.ServerForm.superclass has no properties
http://localhost/extjs2/myex/serverform/Ext.ux.form.ServerForm.js
Line 165

[trbs]

This user extension is not (yet) Ext 2.0 ready.

Please be patient, it will be converted in the future.
(Around Ext 2.0 Beta / Ext 2.0 Final )

[RyanG]

Hi there,

I just wanted to point out that, whilst I had a few issues getting this working (mainly due to understanding how trbs's code worked), I got this working in all browsers - including IE.
I've managed to setup (amongst other controls) a combobox, with remote datasource, and template (like the live search in the demos) all defined in a single JSON config piped into this Serverforms ux from my db.

There was a point where the same problem illustrated on trbs' demo page was occuring for me too in IE, but for some reason now, it doesn't.
I'm trying to work backwards and find out what it was that I did, but it certainly wasn't something I consciously did to make it work.

If/when I found out I'll let you know here, but until then I thought it was worth at least letting you guys know that it _can_ work in IE.

Best,

Ryan