Grid PHP SQL: Learn Ext JS Form [ Adding a new entry ]

We will build a new window that willcontain a form for filling out name and ic number as samples of data.

 Here you go the steps;

 File personal.js 

1.Define the form and window: 

1. var PersonalCreateForm;
2. var PersonalCreateWindow;

2. Define the field: 

1. var NameField;
2. var ICField; 

3. Buid code to describe behavior: 

1. NameField = new Ext.form.TextField({
2.     id: NameField,
3.     fieldLabel: 'Name',
4.     maxLength: 20,
5.     allowBlank: false,
6.     anchor : '95%',
7.     maskRe: /([a-zA-Z0-9\s]+)$/
8.       });
9. ICField = new Ext.form.NumberField({
10.     id: ICField,
11.     fieldLabel: 'IC Number',
12.     maxLength: 20,
13.     allowBlank: false,
14.     anchor : '95%',
15.     maskRe: /([a-zA-Z0-9\s]+)$/
16.       }); 

4. Create the form: 

1. PersonalCreateForm = new Ext.FormPanel({
2.         labelAlign: 'top',
3.         bodyStyle:'padding:5px',
4.         width: 600,       
5.         items: [{
6.             layout:'column',
7.             border:false,
8.             items:[{
9.                 columnWidth:0.5,
10.                 layout: 'form',
11.                 border:false,
12.                 items: [NameField, ICField]           
13.         }],
14.     buttons: [{
15.       text: 'Save and Close',
16.       handler: createThePersonal
17.     },{
18.       text: 'Cancel',
19.       handler: function(){
20.         // because of the global vars, we can only
21.         // instantiate one window... so let's just hide it.
22.         PersonalCreateWindow.hide();
23.       }
24.     }]
25.     });
26.  
27.   PersonalCreateWindow= new Ext.Window({
28.       id: 'PersonalCreateWindow',
29.       title: 'Creating a New Personal',
30.       closable:true,
31.       width: 610,
32.       height: 250,
33.       plain:true,
34.       layout: 'fit',
35.       items: PersonalCreateForm
36.     }); 

5. Let's set up some small functions to work with our form. 

1. // reset the Form before opening it
2.   function resetPersonalForm(){
3.     NameField.setValue('');
4.     ICField.setValue('');       
5.   }
6.  
7.   // check if the form is valid
8.   function isPersonalFormValid(){
9.   return(NameField.isValid()&& ICField.isValid();
10.   }
11.  
12.   // display or bring forth the form
13.   function displayFormWindow(){
14.   if(!PersonalCreateWindow.isVisible()){
15.     resetPersonalForm();
16.     PersonalCreateWindow.show();
17.   } else {
18.     PersonalCreateWindow.toFront();
19.   }
20.   } 

6. Implement a save method. 

1. function createThePersonal(){
2.      if(isPersonalFormValid()){
3.       Ext.Ajax.request({  
4.         waitMsg: 'Please wait...',
5.         url: 'personal.php',
6.         params: {
7.           task: "CREATE",
8.           name:      NameField.getValue(),
9.           ic:        ICField.getValue()
10.          
11.         },
12.         success: function(response){             
13.           var result=eval(response.responseText);
14.           switch(result){
15.           case 1:
16.             Ext.MessageBox.alert('Creation OK',
17.             'The Personal was created successfully.');
18.             PersonalsDataStore.reload();
19.             PersonalCreateWindow.hide();
20.             break;
21.           default:
22.             Ext.MessageBox.alert('Warning',
23.             'Could not create the Personal.');
24.             break;
25.           }       
26.         },
27.         failure: function(response){
28.           var result=response.responseText;
29.           Ext.MessageBox.alert('error',
30.          'could not connect to the database.
31.           retry later');         
32.         }                     
33.       });
34.     } else {
35.       Ext.MessageBox.alert('Warning',
36.        'Your Form is not valid!');
37.     }
38.   }
39.   

7. We simplyneed to add this to our EditorGrid constructor :

1.       tbar: [{
2.          text: 'Add a Personal',
3.          tooltip: 'Great Tooltip',
4.          iconCls:'add',    // this is defined in our styles.css
5.          handler: displayFormWindow
6.       }] 

File personal.php 

8. Finally;

First the switch: 

1.     case "CREATE":
2.         createPersonal();
3.         break; 

9. And then thefunction: 

1. function createPersonal(){
2.  
3.         $name = addslashes($_POST['name']);
4.         $ic = addslashes($_POST['ic']);
5.         // Here we should probably do some database checking,
6.         // to make sure that we do not have the same entry
7.         // twice for ex... And we would return a different
8.         // error code (ECHO '0' or whatever you want...)
9.         // For now we'll pretend like the entry is valid.
10. $query = "INSERT INTO Personals (`IDPersonal`,`Name`,`IC`))
11.                VALUES (NULL , '$name', '$ic ')";
12.         $result = mysql_query($query);
13.         echo '1';
14. } 

10. Done!

Ref: http://www.sencha.com/learn/Tutorial:Grid_PHP_SQL_Part4