From Learn About the Ext JavaScript Library

Contents 1 Description 2 Status 3 Known Issues 4 Ext2 5 TODO 6 Download 7 Online Demo 8 Screenshots 9 Example XML 10 Change log

Description

An extension of Ext.form.Form for retrieving the form definition from the server. The definition from the server contains all fields displayed in the form and there configuration. It can also add validation rules both existing in Ext.form.VTypes and new onces as JavaScript Functions.

Status

Beta

Known Issues

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, guessing it's a bug in IE. Without getting a decent debug enviroment to work and limited availability of Windows machines at my place i cannot hunt this much further. Hopefully this will disappear after working down items from the TODO list.

Ext2

For the moment this UX is Ext1 only. For this UX Ext2 makes live a lot easier. However the UX itself will be totally different, so most likely it's going to be 2 separate releases.

TODO

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;

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.

Direct download link: http://ido.nl.eu.org/static/js/Ext.ux.form.ServerForm.js

Online Demo

Online Demo at http://ido.nl.eu.org/extdjango/ The online demo combines Django's great Newforms with Ext forms. It does validation both at the client side with Ext as well as server side with Django Newforms.

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.

Screenshots

Example XML

<?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>

Change log

• Published