javascript EXTJS close&重启

时间:2014-02-11 15:21:46

标签: javascript extjs reset

以前的程序员使用的是EXTJS,我对此并不熟悉。

我正在尝试修复的应用程序有一个名为ADD ACCOUNT的模式,用户可以使用该模式手动键入各种输入字段,或者将已经打开的帐户拖放到模式中。

用户可以点击重置按钮并清除字段。但是,如果他们不清除字段并且只是关闭窗口,那么当重新打开窗口时,之前的数据仍然存在。

基本上,如果用户决定关闭窗口,则还需要重置并清除所有字段。

如上所述,我对EXTJS不太熟悉。话虽如此,我将包括下面的代码,这可能是很多。我会尽量不要包含不必要的代码。

有两个文件:accountGrid.php和accountGrid.js

我已经隔离了我认为问题始于accountGrid.js的地方。这是我发现的:

 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);
 }

这就是我认为是accountGrid.js的主要部分。还有一些拖放功能的代码,但我没有必要显示它。

我认为这段代码不长。我甚至没有得到php文件代码。 SMH。

以下是来自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
 });

我刚刚在上面的代码之后立即看到了这个:

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

我不确定为什么来自accountGrid.php和accountGrid.js的代码看起来很相似。我为代码量道歉。我真的需要帮助打破这段代码。

重申一下,当他们点击窗口右上角的X按钮时,需要清除模态窗体然后关闭。

1 个答案:

答案 0 :(得分:1)

您有一个名为accountform的孩子的窗口。 你想要做的是为窗口的关闭按钮添加一个监听器,并添加代码来清除你的表单。

你已经有了这个:

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

为其添加一个监听器:

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

添加代码以清除表单:

AddAccountForm.getForm().reset(true)

最后它看起来像这样:

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);
        }
    }
});