From Learn About the Ext JavaScript Library

Dans ce petit tutoriel nous allons construire un formulaire Ext qui sera envoyé de façon classique, comme tous les formulaires html.

Introduction

En tant que développeur vous connaissez peut-être PHP (ou ASP, ou tout autre language côté serveur) et la façon traditionnelle de travailler avec les interfaces utilisateur. Vous construisez des formulaires dans votre language côté serveur, et les rendez en html 'plain-text' à l'utilisateur. Vous utilisez peut-être un moteur de modèlisation, mais à la fin, vous envoyez à l'utilisateur du html bien formaté.

Avec Ext, il est trés facile de construire de jolies formulaires ou interface, alors vous voudriez l'utiliser. Mais vous avez également beaucoup de code qui fonctionne déjà, que vous souhaiteriez garder plutôt que le convertir entièrement pour gérer des données formattées en JSON, etc.

En tout cas c'était et c'est ma situation actuelle.

Pour commencer: la page HTML

Vous avez probablement déjà lu comment inclure le code requis par Ext dans vos pages, mais répétons encore une fois: (placer ce code dans l'en-tête (head) de votre document html)

<title>A formulaire traditionnel</title>
<!-- Intégrer les script Ext et spécifiques à l'application: -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
<!-- Intégrer vos propores fichiers Javascript ici - adapter le nom du fichier -->
<script type="text/javascript" src="ext/mytestscript.js"></script>  
 
 
<!-- Intégrer les feuilles de style d'Ext ici: -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

Ensuite votre page requière sûrement un endroit où nous allons rendre le formulaire. (placer ce code dnas le corps (body) de votre page)

<div id="mytraditionalform"></div>

C'est tout pour le code html. Vous pouvez mettre tous ça dans un fichier html classique (eg form.html), ou le produire par un script côté serveur. C'est égal.

Le code Javascript

Ensuite construisons le code Javascript. La meilleure pratique semble être de le placer dans un fichier séparé. Je l'ai appelé "mytestscript.js" (voir le code html ci-dessus). Son nom importe peu, pourvu que le fichier soit correctement référencé dans le code html.

Voici son code.

Ext.onReady(function(){
 
	var simple = new Ext.form.FormPanel({
 
        standardSubmit: true,
 
        frame:true,
        title: 'Création de compte',
 
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
		items: [{
                fieldLabel: 'Nom d\'utilisateur',
                name: 'username',
                allowBlank:false
            },
			{
                inputType: 'hidden',
                id: 'submitbutton',
                name: 'myhiddenbutton',
                value: 'hiddenvalue'
            }
 
        ],
        buttons: [{
            text: 'Envoyer',
            handler: function() {
                simple.getForm().getEl().dom.action = 'test.php';
	            simple.getForm().getEl().dom.method = 'POST';
                simple.getForm().submit();
            }
        }]
 
    });
 
    simple.render('mytraditionalform');
 
});

Les parties importantes de ce script sont:

• La ligne "standardSubmit: true", qui assure que l'envoi du formulaire se fera de façon standard
• Le gestionnaire du bouton envoyer. J'ai d'abord pensé que l'ajout de "standardSubmit: true" serait suffisant, mais ça ne l'est pas.
• simple.render() indique l'endroit ou le formulaire est placé. Si vous changez l'id de la balise <div> dans votre code html, n'oubliez pas de changer ce nom également.