Loading Data Into & Submitting a Form
This tutorial uses the employee edit form used in the getting started tutorial, if you are not yet familiar with creating a form then you should start with the getting started tutorial.
I would suggest downloading the code used for this example so you have something to work with. You can also find a working example.
We will go through the full circle of using forms, from populating the form with data from the server, to submitting that data back to the server. The backend I use is PHP and MySQL, however this tutorial is not specific to PHP and MySQL and only requires that you have a way to read and output JSON data on your server.
Let's Get Started
We first need to set our form's url, which is a php script that will take POST data and write it to our database.
Our data consist of five fields, id, name, title, hire_date and active, which will be retreived and placed into a data store.
The following code sets up the data store, at this point no data has been retrieved. Our proxy references a php script that retrieves row id 14 from our database and formats it as a JSON string.
The next thing to do is setup our event listener to watch for when the data loads, this ensures that we don't populate the form before the data has been loaded.
When that data is loaded we can take it and populate the form fields using setValue. Here we are using getAt(0) to retrieve the first row of data (row zero) from our data store.
NOTE: the form and form fields used here are defined and explained in the getting started tutorial.
We will also want to create our submit button and render the form, remembering to set extra parameters to pass along with our POST data from the form fields. You will find it useful to pass a row identifier (id) so the php script knows which row to update in the database, along with an action just for good measure.
I'm also using isValid to make sure the form conforms to each field's requirements before submitting.
Loading Our Data
Now we load the data.
It really can be just that easy to create a working Ext form with an amazing level of usability right out of the box. We have some server side scripts that retrieve and format data from our database, and write that data back to our database. These server side scripts can be as simple as a few lines.
What's Next?
As always, the API documentation and examples are a great way to learn how to tweak this form to fit your needs.
