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

<script></script>
<script></script>
 

<script></script>  
 
 

<link>

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

<div></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.
 
	 simple =  Ext..
 
 
        standardSubmit: ,
 
 
        frame:,
        title: ,
 
        width: ,
        defaults: width: ,
        defaultType: ,
		items: 
                fieldLabel: ,
                : ,
                allowBlank:
            ,
			
                inputType: ,
                id: ,
                : ,
                value: 
            
 
        ,
        buttons: 
            text: ,
            handler:  
		simple.... = ;
	        simple.... = ;
                simple..;
            
        
 
 
    ;
 
 
 
    simple.;
 
 
 
;

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