表单提交(Basic Form Submit)

In this small tutorial, we'll try to build an Ext form that will submit in the tradional way, like all regular html forms

Introduction

As a programmer, you may know PHP (or ASP, or any other server-side language) and the tradional way of working with user-interfaces. You build forms in your server-side language, and output them in plain-text html to the end-user. You may use a templating engine, but in the end, you're sending nicely formatted html to the end-user.

With Ext, it's really easy to build nice-looking forms and interfaces, so you'd like to use that. But you also have a lot of code that already works, which you'd rather keep than converting all of it to handle JSON-formatted data etc.

At least, that was and is my current situation.

Getting Started: the HTML page

You've most probably already read how to include all required Ext-code in your page, but let me repeat that for you: (place this in the head-section of your html doc)

<title>A tradional form</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
<!-- Include your own Javascript file here - adapt the filename to your filename-->
<script type="text/javascript" src="ext/mytestscript.js"></script>  
 
 
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

Next to that, your page certainly needs a place where we'll render the form. (put this in the body of your page)

<div id="mytradionalform"></div>

That's it, for you html code. You can put this in a regular html file (e.g. form.html), or you can output it via a server-side script. Doesn't matter.

The Javascript code

Next, we'll build the Javascript code. Best practice seems to be to put this in a separate file. I've called it "mytestscript.js" (see html above). Doesn't matter how you call it, just make sure to reference the correct file.

See the code below.

Ext.onReady(function(){
 
	var simple = new Ext.form.FormPanel({
 
 
        standardSubmit: true,
 
 
        frame:true,
        title: 'Register',
 
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
		items: [{
                fieldLabel: 'Username',
                name: 'username',
                allowBlank:false
            },
			{
                inputType: 'hidden',
                id: 'submitbutton',
                name: 'myhiddenbutton',
                value: 'hiddenvalue'
            }
 
        ],
        buttons: [{
            text: 'Submit',
            handler: function() {
		simple.getForm().getEl().dom.action = 'test.php';
	        simple.getForm().getEl().dom.method = 'POST';
                simple.getForm().submit();
            }
        }]
 
 
    });
 
 
 
    simple.render('mytradionalform');
 
 
 
});

Important part of this script are:

• The "standardSubmit: true" line, which will make sure the form is submitted via the standard way
• The handler for the submit button. At first I thought adding "standardSubmit: true" would be sufficient, but it's not.
• simple.render() says where the form should be places. if you change the id of the <div> tag in your html, don't forget to change this name too