如何把配置框放在extjs

Question

在我的用戶界面中，我有3個按鈕，分別是'添加'，'保存'，'取消'和一個編輯器網格面板。現在，如果用戶添加或編輯記錄並嘗試保存，但意外點擊了取消按鈕，那麼應該自動更改和保存的所有記錄將保持不變。

我的問題是，我怎麼能把一個確認框放在取消按鈕，它只會顯示在記錄中所做的更改？

這是我到目前爲止已經試過：

  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(); 
         // console.log(objectModified); 
         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;         

            //all fields are null, then prompt that it should be filled-in (for edit) 
            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 record to save", 
            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(){ 
         Ext.getCmp('maingrid').getStore().reload(); 
         Ext.getCmp('b_save').disable(); 
         Ext.getCmp('b_cancel').disable(); 

         } 
        }      

      ], 
      bbar: pager 




    }); 

Answer 1

您可以使用Ext.data.StoregetModifiedRecords()和getRemovedRecords()方法來檢測，如果網格存儲包含的變化。要顯示確認對話框，您可以使用Ext.MessageBox.confirm()方法，然後僅當用戶單擊「是」按鈕時才重新加載存儲。

var store = Ext.getCmp('maingrid').getStore(); 
var modified = store.getModifiedRecords(); 
var removed = store.getRemovedRecords(); 
if (modified.length || removed.length) { 

    Ext.MessageBox.confirm('Cancel', 'Do you want cancel changes?', function(btnId) { 
     if (btnId == 'yes') { 
      store.reload(); 
      Ext.getCmp('b_save').disable(); 
      Ext.getCmp('b_cancel').disable();  
     } 
    }); 
}