表单提交(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/ext-all-debug.js"></script>

<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: [{
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();
}
}]

});

});