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.
Loading Data Into & Submitting a Form
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.
- var form_employee = new Ext.form.Form({
- ...
- url:'forms-submit-process.php',
- ...
- });
var form_employee = new Ext.form.Form({
...
url:'forms-submit-process.php',
...
});
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.
- employee_data = new Ext.data.Store({
- proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
- reader: new Ext.data.JsonReader({},
- [ 'id', 'name', 'title', 'hire_date', 'active']
- ),
- remoteSort: false
- });
employee_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'forms-submit-getdata.php?id=14'}),
reader: new Ext.data.JsonReader({},
[ 'id', 'name', 'title', 'hire_date', 'active']
),
remoteSort: false
});
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.
- employee_data.on('load', function() {
-
-
-
- });
employee_data.on('load', function() {
// data loaded, do something with it here...
});
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.
- employee_name.setValue(employee_data.getAt(0).data.name);
- employee_title.setValue(employee_data.getAt(0).data.title);
- employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
- employee_active.setValue(
- Ext.util.Format.boolean(employee_data.getAt(0).data.active)
- );
employee_name.setValue(employee_data.getAt(0).data.name);
employee_title.setValue(employee_data.getAt(0).data.title);
employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);
employee_active.setValue(
Ext.util.Format.boolean(employee_data.getAt(0).data.active)
);
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.
- form_employee.addButton('Save', function(){
- if (form_employee.isValid()) {
- form_employee.submit({
- params:{
- action:'submit',
- id:employee_data.getAt(0).data.id
- },
- waitMsg:'Saving...'
- });
- }else{
- Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
- }
- }, form_employee);
-
- form_employee.render('employee-form');
form_employee.addButton('Save', function(){
if (form_employee.isValid()) {
form_employee.submit({
params:{
action:'submit',
id:employee_data.getAt(0).data.id
},
waitMsg:'Saving...'
});
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
}, form_employee);
form_employee.render('employee-form');
Loading Our Data
Now we load the data.
employee_data.load();
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.
|
