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