表单提交(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