javascript EXTJS close & reset

Question

The previous programmer used EXTJS, with which I don't have a whole lot of familiarity with.

The application I am trying to fix has a modal called ADD ACCOUNT, with which a user can either manually type the various input fields or drag and drop an account already open into the modal.

The user can hit a reset button and clear the fields. However, if they don't clear the fields and they just close the window, when the window is reopened, the previous data is still there.

Basically, if the user decides to close the window, it needs to also reset and clear all the fields.

As stated, I am not too familiar with EXTJS. With that said, I will include the code below, which may be a lot. I will try not to include unnecessary code.

There are 2 files: accountGrid.php and accountGrid.js

I have isolated where I think the issue begins in accountGrid.js. Here is what I've found:

 function addAccount(){
   var AddAccountForm;
   var fields = [
    {name: 'must_have', mapping: 'must_have'},
    {name: "*** there are like 50 of these, so I'll skip the rest ***"}
    ];
   AddAccount = new Ext.FormPanel({
    autoScroll: true,
    monitorValid: true,
    defaultType: 'textfield',
    items:
          [
           {
           xtype: 'fieldset',
           title: 'Required Information',
           collapsible: true,
           autoHeight: true,
           defaultType: 'textfield',
           items: [*** random fields here ***]
           },
           {
           xtype: 'fieldset',
           title: 'Optional Information',
           collapsible: true,
           collapsed: true,
           autoHeight: true,
           defaultType: 'textfield',
           items: [*** random fields here ***]
           }
          ],
    buttons: *** this is where the buttons being ***
          [
           {
           text: 'Submit',
           id: 'submitAdd',
           formBind: true,
           handler: function(){
            AddAccountForm.getForm().submit({
             url: 'data-entry.php', *** hope I don't need to show this file's code ***
             waitMsg: 'Updating Record...',
             success: function(form, action){
              obj = Ext.util.JSON.decode(action.response.responseText);
              AddAccountForm.getForm().reset(); *** notice this reset function ***
              delete BookingDataStore.lastParams;
              BookingDataStore.removeAll();
              var sa = Ext.getCmp('salesArea').getValue();
              *** there are few more of these var sa fiels ***
              BookingDataStore.on('beforewrite', function(store, options){
               Ext.apply(options.params, {
                task: 'LISTING',
                salesarea:  sa,
                *** there are a few more of these variables ***
                *** honestly, I'm not sure what these are ***
                });
               });
               BookingDataStore.reload();
               Ext.Msg.alert('Success', 'The record has been saved.');
               AddAccountWindow.close();
              },
              failure: function(form, action){
                if(action.failureType == 'server'){
                  obj = Ext.util.JSON.decode(action.response.responseText);
                  Ext.Msg.alert('Error','Your account was not submitted.'+obj['error']);
                }
                else{
                  Ext.Msg.alert('Warning','There server is unreachable: ' +action.response.responseText);
                }
              }
             });
            }
           },
           {
           text: 'Reset',  *** here is the reset ***
           handler: function() {AddAccountForm.getForm().reset();}
           },
           { *** 2ND EDIT ***
           text: 'Close',
           AddAccountForm.getForm().submit({
               handler: function() {
                 Ext.Msg.alert('close');
               };
             });
           } *** 2ND EDIT CONTINUED BELOW ***
          ],
    keys: [{
        key: [10,13], fn: function(){
          var b = Ext.getCmp('submitAdd');
          b.focus();
          b.fireEvent("click", b);
        }
      }]                
   });
   AddAccountWindow = new Ext.Window({
     title: 'Add Account',
     closable: true,
     closeAction: 'close',
     y: 5,
     plain: true,
     layout: 'fit',
     stateful: false,
     items: AddAccountForm
   });
   AddAccountWindow.show(this);
 }

That was what I think is the major portion of the accountGrid.js. There was some more code for the drag and drop feature, but that was not necessary for me to display.

I did not think this code was this long. I haven't even gotten to the php file code. SMH.

Here is the code from accountGrid.php:

 var AddAccountForm = new Ext.FormPanel({
   id: 'AddAccountForm',
   autoScroll: true,
   monitorValid: true,
   submitEmptyText: false,
   defaultType: 'textfield',
   items: 
         [
           {
             xtype: 'fieldset',
             id: 'reqFieldSet',
             title: 'Required Information',
             *** there are more parameters, I'll skip to the buttons ***
           }
         ],
    buttons: 
         [
           {
             text: 'Submit',
             id: 'submitAdd',
             formBind: true,
             handler: function(){
               var pc = partnerCodeField.getValue();
               var pn = partnerNameField.getValue();
               AddAccountForm.getForm().submit({
                 url: 'data-entry.php',
                 waitMsg: 'Updating Record....',
                 params: {partner_code:pc, partner_name:pn},
                 success: function(form, action){
                   obj = Ext.util.JSON.decode(action.response.responseText);
                   AddAccountForm.getForm()reset();
                   delete BookingDataStore.lastParams;
                   BookingDataStore.removeAll();
                   BookingDataStore.on('beforeload', function(store, option){
                     Ext.apply(options.params, {
                       ns_task: "SEARCHING"
                     });
                   });
                   BookingDataStore.load();
                   TradeTotalsDataStore.reload();
                   Ext.Msg.alert('Success','The record has been saved.');
                   AddAccountWindow.hide();
                 },
                 failure: function(form, action){
                   if(action.failureType == 'server'){
                     obj = Ext.util.JSON.decode(action.response.responseText);
                     Ext.Msg.alert('Error','Your account was not submitted.'+obj['error']);                       
                   }
                   else{
                     Ext.Msg.alert('Warning','The server is unreachable:'+action.response.responseText);
                   }
                 }
               });
             }
           },
           {
           text: 'Reset',
           handler: function(){
               AddAccountForm.getForm().reset();
               partnerCodeField.enable();
               partnerNameField.enable();
             }
           }, *** 2ND EDIT ***
           {
           text: 'Close',
           handler: function(){
              AddAccountForm.getForm().reset();
              AddAccountWindow.close();
              partnerCodeField.enable();
              partnerNameField.enable();
            }
           } *** END 2ND EDIT ***   
         ],
    keys: 
         [
          {
            key: [10, 13], fn: function(){
              var b = Ext.getCmp('submitAdd');
              b.focus();
              b.fireEvent("click", b);
            }
          }
         ]
 });
 var AddAccountWindow = new Ext.Window({
   title: 'Add Account',
   closeable: true,
   closeAction: 'hide',
   y: 5,
   plain: true,
   layout: 'fit',
   stateful: false,
   items: AddAccountForm
 });

I just saw this immediately after the code directly above:

 function addAccount(){
   AddAccountWindow.show(this);
   *** beneath this is code for the drag & drop features ***
   *** I don't think I need to show that ***
 }

I'm not sure why the code from accountGrid.php and accountGrid.js look similar. I apologize for the amount of code. I just really need help breaking this code down.

Just to reiterate, when they click the X button at the top-right of the window, it needs to clear the modal form and then close.

Answer 1

You have a window with a child named accountform. What you want to do is add a listener for the close button of the window and add code to clear your form.

You already have this:

new Ext.Window({
     closable: true, //adds the close button
     closeAction: 'close', //'close' isn't supported (use 'hide')

Add a listener to it:

{
    //....
    closable: true,
    listeners: {
        close:function(){
        //put clear form code here
        }
    }
}

Add code to clear the form:

AddAccountForm.getForm().reset(true)

Finally it looks someting like this:

var AddAccountWindow = new Ext.Window({
    title: 'Add Account',
    closeable: true,
    closeAction: 'hide',
    y: 5,
    plain: true,
    layout: 'fit',
    stateful: false,
    items: AddAccountForm,
    listeners: {
        close:function(){
            AddAccountForm.getForm().reset(true);
        }
    }
});