Запросить окно предупреждения в Extjs

Question

В моем пользовательском интерфейсе у меня есть EditorGridPanel и три кнопки, а именно: «добавить», «сохранить» и «отменить». В настоящее время, всякий раз, когда я хочу редактировать существующие данные в своей сетке и нажимать кнопку «Сохранить», автоматически обновляет данные, и это моя проблема. Я хочу добавить окно предупреждения, в котором говорится: «Вы хотите сохранить изменения?» Если ДА, продолжайте выполнение функции сохранения. Если НЕТ, верните данные в исходную форму перед обновлением данных в Сетка.

Не мог бы кто-нибудь помочь мне в этом?

Это мои коды:

test.js

var grid = new Ext.grid.EditorGridPanel({ 

       id: 'maingrid', 
       store: store, 

       cm: cm, 


       width: 785.5, 
       anchor: '100%', 
       height: 700, 

       frame: true, 
       loadMask: true, 
       waitMsg: 'Loading...', 
       clicksToEdit: 2, 
       tbar: [ 

        '->', 
       { 
        text: 'Add', 
        iconCls: 'add', 
        id: 'b_add', 
        disabled: true,       
        handler : function(){   
         var Put = grid.getStore().recordType; 
         var p = new Put({ 
          action_take: 'add', 
          is_active: '', 
          allowBlank: false 
         }); 
         Ext.getCmp('b_save').enable(); 
         Ext.getCmp('b_cancel').enable(); 
         grid.stopEditing(); 
         store.insert(0, p); 
         grid.startEditing(0, 1);       
         } 

       },'-',{ 
        text: 'Save', 
        iconCls: 'save', 
        id: 'b_save', 
        disabled: true, 
        handler : function(){ 
         var objectStore = Ext.getCmp("maingrid").getStore(); 
         var objectModified = objectStore.getModifiedRecords(); 

         var customer_id = Ext.getCmp("maingrid").getStore().baseParams['customer_id']; 
         var objectData = new Array(); 
         var dont_include; 
         if(objectModified.length > 0) 
         { 
          for(var i = 0; i < objectModified.length; i++) 
          { 
           dont_include = false;         


            if(objectModified[i].data.id            
             && 
             (
             (objectModified[i].data.firstname == undefined || objectModified[i].data.firstname == null|| objectModified[i].data.firstname == '') 
             || 
             (objectModified[i].data.lastname == undefined || objectModified[i].data.lastname == null|| objectModified[i].data.lastname == '') 
             || 
             (objectModified[i].data.email_address == undefined || objectModified[i].data.email_address == null|| objectModified[i].data.email_address == '') 
             ) 
            ) 
            { 
             Ext.Msg.show({ 
              title: 'Warning', 
              msg: "Input value required.", 
              icon: Ext.Msg.WARNING, 
              buttons: Ext.Msg.OK 
             }); 

             return;          
            } 
            else//no id, means new record 
            { 
             //all fields are not filled-in, just do nothing 

             if((objectModified[i].data.firstname == undefined || objectModified[i].data.firstname == null|| objectModified[i].data.firstname == '')&& 
             (objectModified[i].data.lastname == undefined || objectModified[i].data.lastname == null|| objectModified[i].data.lastname == '')&& 
             (objectModified[i].data.email_address == undefined || objectModified[i].data.email_address == null|| objectModified[i].data.email_address == '')) 
             { 
              //boolean flag to determine whether to include this in submission 
              dont_include = true; 
             } 
             //either one field is not filled-in prompt to fill in all fields 


             else if((objectModified[i].data.firstname == undefined || objectModified[i].data.firstname == null|| objectModified[i].data.firstname == '')|| 
             (objectModified[i].data.lastname == undefined || objectModified[i].data.lastname == null|| objectModified[i].data.lastname == '')|| 
             (objectModified[i].data.email_address == undefined || objectModified[i].data.email_address == null|| objectModified[i].data.email_address == '')) 
             { 
              Ext.Msg.show({ 
               title: 'Warning', 
               msg: "Input value required.", 
               icon: Ext.Msg.WARNING, 
               buttons: Ext.Msg.OK 
              }); 

              return; 
             } 

            } 

            //the data for submission 
            if(!dont_include) 
            { 
             objectData.push({ 
              firstname: objectModified[i].data.firstname, 
              lastname: objectModified[i].data.lastname, 
              email_address: objectModified[i].data.email_address, 
              id: objectModified[i].data.id, 
              customer_id: customer_id 

             }); 
            } 
          } 
          // console.log(objectData) 
          // return; 

          //check if data to submit is not empty 
          if(objectData.length < 1)//empty 
          { 
           Ext.Msg.show({ 
            title: 'Warning', 
            msg: "No records to be saved", 
            icon: Ext.Msg.WARNING, 
            buttons: Ext.Msg.OK 
           }); 

           Ext.getCmp('maingrid').getStore().reload(); 

           return; 
          } 
          // return; 
          Ext.Msg.wait('Saving Records...'); 
          Ext.Ajax.request({ 
           timeout:900000, 
           params: {objdata: Ext.encode(objectData)}, 
           url: '/index.php/SaveContent', 
           success: function(resp){ 
            var response = Ext.decode(resp.responseText); 
            Ext.Msg.hide(); 
            if(response.success == true){ 
             Ext.Msg.show({ 
              title: "Information", 
              msg: response.msg, 
              buttons: Ext.Msg.OK, 
              icon: Ext.Msg.INFO, 
              fn: function(btn){ 
               Ext.getCmp('maingrid').getStore().reload(); 
               Ext.getCmp('b_save').disable(); 
               Ext.getCmp('b_cancel').disable(); 

              } 
             }); 
            }else{ 

             Ext.Msg.show({ 
              title: "Warning", 
              msg: response.msg, 
              buttons: Ext.Msg.OK, 
              icon: Ext.Msg.WARNING 
             }); 
            } 
           }, 
           failure: function(resp){ 
            Ext.Msg.hide(); 
            Ext.Msg.show({ 
             title: "Warning1", 
             msg: response.msg, 
             buttons: Ext.Msg.OK, 
             icon: Ext.Msg.WARNING 
            }); 
           } 
          }); 


         } 
         else{ 
          Ext.Msg.show({ 
            title: 'Warning', 
            msg: "No changes made.", 
            icon: Ext.Msg.WARNING, 
            buttons: Ext.Msg.OK 
          }); 

         } 
         } 
        },'-', 
        { 
         text: 'Cancel', 
         iconCls: 'cancel', 
         id: 'b_cancel', 
         disabled: true, 

         handler : function(){ 

         var store = Ext.getCmp('maingrid').getStore(); 
         var modified = store.getModifiedRecords();      
         if (modified.length) { 
          Ext.MessageBox.confirm('Cancel', 'There are records not yet saved. Are you sure you want to cancel the changes?', function(btnId) { 
         if (btnId == 'yes') { 
           store.reload(); 
           Ext.getCmp('b_save').disable(); 
           Ext.getCmp('b_cancel').disable();  
           } 
         }); 
          }       

         } 
        }      

      ], 
      bbar: pager 




    }); 

actions.class.php

public function executeSaveContent(sfWebRequest $request){ 
    $save_data = json_decode($request->getParameter("objdata")); 
    $count_array = count($save_data); 
    $id_insession = $_SESSION['employee_id']; 


    if($count_array > 0){ 
    foreach($save_data as $k => $v){ 
     $id = strip_tags($v->id); 
     $firstname = preg_replace("/\s+/", " ", $v->firstname); 
     $firstname = ltrim(addslashes(strip_tags($firstname))); 
     $firstname = rtrim($firstname); 
     $lastname = preg_replace("/\s+/", " ", $v->lastname); 
     $lastname = ltrim(addslashes(strip_tags($lastname))); 
     $lastname = rtrim($lastname); 
     $email_address = preg_replace("/\s+/", " ", $v->email_address); 
     $email_address = ltrim(addslashes(strip_tags($email_address))); 
     $email_adsress = rtrim($email_address); 
     $customer_id = $v->customer_id; 
     $action = ''; //strip_tags($v->action); 
     if(empty($id)) 
     { 
      $action='add'; 
     } 
     else { 
      $action='edit'; 
     } 

     if(!empty($firstname)||($lastname)||($email_address)){ 

      $sql_check = "select firstname,lastname,email_address 
        from 
         customer_saver 
        "; 
      if($action == "edit"){ 
       $sql_check .= " where 
         firstname = '$firstname' 
         and 
         id not in ($id)"; 
      } 
      if($action == "add"){ 
        $sql_check .= " where 
         firstname = '$firstname' 
         "; 
      } 

     } 




     $setpath = _appContract::SchemaChange('contract_arbill'); 
     $this->conn->execute($setpath); 
     $result_check = $this->conn->fetchAll($sql_check); 
      foreach($result_check as $v){ 

       $fetch_firstname = $this->formatString($v['firstname']); 
       $fetch_lastname = $this->formatString($v['lastname']); 
       $fetch_email_address= $v['email_address']; 
      } 
     $result_check_count = count($result_check); 

     if($action == "edit"){ 
      if($result_check_count == 0){ 
       $sql = "update 

        customer_saver 

        set 

        firstname = '$firstname', 
        lastname = '$lastname', 
        email_address = '$email_address'      
        where 
        id = $id"; 


      } 
      else{ 
        $resp['success'] = false; 
        $resp['msg'] = "Duplicate entry found. <br> 
            First name: <b>".$firstname."</b> Last name: <b>".$lastname."</b> Email Address: <b>".$email_address."</b>";  

        die(json_encode($resp)); 
      }     
     } 

     elseif($action == "add"){ 
      if(empty($id) && $result_check_count == 0){ 
       $sql = "insert into 

        customer_saver 

        (firstname, lastname, email_address,customer_id) 
        values 
        ('$firstname', '$lastname', '$email_address', $customer_id)"; 

      } 
      else{ 
       $resp['success'] = false; 
       $resp['msg'] = "Duplicate entry found. <br> 
           First Name: <b>".$firstname."</b> Last Name: <b>".$lastname."</b> Email Address: <b>".$email_address."</b>";  
       die(json_encode($resp)); 
      } 
     } 
     try{ 
     $this->conn->execute($setpath); 
     $this->conn->execute($sql); 
     }catch(Exception $e){ 
      die($e->getMessage()); 
     } 
    } 

     $resp['success'] = true; 
     $resp['msg'] = "Successfully saved the record.";  
     die(json_encode($resp)); 
    } 

}

Answer 1

Для отображения диалогового окна подтверждения можно использовать Ext.MessageBox.confirm() метод.

Затем, если пользователь нажмет на Да кнопка вы можете позвонить store.sync() или обработать свои собственные изменения.

Если пользователь нажмет на No кнопка вы можете позвонить Ext.data.StorerejectChanges() метод. Этот метод отклоняет выдающиеся изменения во всех измененных записях и повторно вставляет любые записи, которые были удалены локально.

{ 
    text: 'Save', 
    iconCls: 'save', 
    id: 'b_save', 
    disabled: true, 
    handler : function(){ 
     var store = Ext.getCmp("maingrid").getStore(); 
     Ext.MessageBox.confirm('Save changes', 'Do you want save changes?', function(btnId) { 
      if (btnId == 'yes') { 

       // Your current save button handler code    

      } else { 
       store.rejectChanges(); 
      } 
     }); 
    } 
}