Sencha Inc. | HTML5 Apps

Basic Form Submit

Published May 19, 2008 | Tom De Bruyne | Tutorial | Medium
Last Updated Jul 11, 2011

This Tutorial is most relevant to Ext JS, 2.x, 3.x.

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

Introduction

As a programmer, you may know PHP (or ASP, or any other server-side language) and the traditional 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="mytraditionalform"></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('mytraditionalform');
 
 
 
});

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 placed. if you change the id of the <div> tag in your html, don't forget to change this name too.
Share this post:
Leave a reply

Written by Tom De Bruyne

3 Comments

Rafael Carvalho

3 years ago

How can i get the values of the form fields in a easy way? Is there a standard function like:

var login = MyForm.getvalues(‘loginfield’);

or something?

Thank you and nice tutorial.

David Haskins

3 years ago

If you can’t get the example to display, try changing the simple render line to: simple.render(document.body);

Rafael Carvalho

3 years ago

Thats not my issue smile I just want to use the information on a textfield / passwordfiel in 2 different scripts smile

Can i pass their value like I said on my previous post? Someting like:

var name = MyForm.FieldName.Text()

Leave a comment:

Commenting is not available in this channel entry.