編輯後在EXTJS網格中將編輯的行設置爲無刷新頁面

Question

我正在編輯EXTJS網格中的一行，單擊編輯操作鏈接。點擊一行的編輯鏈接後，將打開一個新窗口，其中包含該行的所有數據以及「保存」和「取消」按鈕。

單擊「保存」按鈕時，它將保存記錄到數據庫中。但是我希望該行也能刷新而不刷新頁面。

我是EXTJS的新手。

任何人都可以幫助我做同樣的事情。

這是我的代碼。

Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*', 
    'Ext.grid.plugin.BufferedRenderer' 
]); 

Ext.define('TestResult', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { 
      name: 'ID', 
      type: 'int' 
     }, 
     { 
      name: 'jobNo', 
      type: 'int' 
     }, 
     { 
      name: 'stageCode', 
      type: 'String' 
     }, 
     { 
      name: 'productTitle', 
      type: 'String' 
     }, 
     { 
      name: 'brand', 
      type: 'String' 
     }, 
     { 
      name: 'category', 
      type: 'String' 
     }, 
     { 
      name: 'ftpDate', 
      type: 'Date' 
     }], 
    idField: 'ID' 
}); 

Ext.onReady(function() { 
    var store = Ext.create('Ext.data.Store', { 
     model: 'TestResult', 
     autoLoad: true, 
     autoSync: true, 
     proxy: { 
      type: 'ajax', 
      url : 'data.jsp', 
      reader : 
      { 
       type : 'json' 
      }, 
      writer : 
      { 
       type : 'json' 
      } 
     } 
    }); 

    var grid = Ext.create('Ext.grid.Panel', { 
     width: 700, 
     height: 500, 
     title: 'Buffered Grid of records', 
     store: store, 
     loadMask: true, 
     plugins: 'bufferedrenderer', 
     selModel: { 
      pruneRemoved: false 
     }, 
     viewConfig: { 
      trackOver: false 
     }, 
     features: [{ 
      ftype: 'groupingsummary', 
      groupHeaderTpl: 'Department: {name}', 
      showSummaryRow: false 
     }], 
     // grid columns 
     columns:[{ 
      text: 'ID', 
      sortable: true, 
      dataIndex: 'ID', 
      groupable: false, 
      locked: true, 
      width: 70 
     }, { 
      text: 'Job No.', 
      sortable: true, 
      dataIndex: 'jobNo', 
      groupable: false, 
      locked: true, 
      width: 120 
     }, { 
      text: 'Version', 
      dataIndex: 'stageCode', 
      groupable: false 
     }, { 
      text: 'Product Title', 
      dataIndex: 'productTitle', 
      groupable: false 
     }, { 
      text: 'Brand', 
      dataIndex: 'brand', 
      groupable: false 
     }, { 
      text: 'Category', 
      dataIndex: 'category', 
      width: 200, 
      groupable: false 
     }, { 
      text: 'FTP Date', 
      dataIndex: 'ftpDate', 
      xtype: 'datecolumn', 
      groupable: false 
     }, 
     { 
      xtype:'actioncolumn', 
      header:'Edit', 
      width:50, 
      items: [{ 
       icon: 'assets/images/edit.png', // Use a URL in the icon config 
       tooltip: 'Edit', 
       handler: function(grid, rowIndex, colIndex) { 
        var rec = grid.getStore().getAt(rowIndex); 
        editForm.show(); 
        editForm.down('form').loadRecord(rec);] 
     }], 
     renderTo: Ext.getBody() 
    }); 

    var editForm = new Ext.Window({ 
     title: 'Edit Window', 
     items:[ 
      { 
      xtype: 'form', 
      url: 'UpdateController', 
      items: [ 
       { 
        xtype: 'hidden', 
        fieldLabel: 'ID', 
        name: 'ID', 
        allowBlank: false, 
        readOnly: true 
       }, 
       { 
        xtype: 'textfield', 
        fieldLabel: 'Job No.', 
        name: 'jobNo', 
        allowBlank: false, 
        readOnly: true 
       }, 
       { 
        xtype: 'textfield', 
        fieldLabel: 'Version', 
        name: 'stageCode', 
        allowBlank: false, 
        readOnly: true 
       }, 
       { 
        xtype: 'textfield', 
        fieldLabel: 'Product Title', 
        name: 'productTitle', 
        allowBlank: false 
       }, 
       { 
        xtype: 'textfield', 
        fieldLabel: 'Category', 
        name: 'category', 
        allowBlank: false 
       }, 
       { 
        xtype: 'textfield', 
        fieldLabel: 'Brand', 
        name: 'brand', 
        allowBlank: false 
       }, 
       { 
        xtype: 'datefield', 
        fieldLabel: 'FTP Date', 
        name: 'ftpDate', 
        allowBlank: false 
       }], 
       buttons : [{ 
        text : 'Save', 
        handler: function() 
        { 
         this.up('form').getForm().submit(
         { 
          success: function(f,a) 
          { 
           store.save(); 
           var win = Ext.WindowManager.getActive(); 
           if (win) 
           { 
            win.hide(); 
           } 
          }, 
          failure: function(f,a) 
          { 
           //Ext.Msg.alert('Warning', 'Error'); 
           Ext.Msg.alert('Warning', a.result.errormsg); 
           this.up('window').hide(); 
          } 
         }); 
        } 
       }, 
       { 
        text: 'Cancel', 
        handler: function() 
        { 
         this.up('window').hide(); 
        } 
       }] 
      } 

     ] 
    }); 
}); 

感謝

Answer 1

在您使用Ext.form.BasicupdateRecord方法加載到形式，您this.up('form').getForm().submit成功處理程序，您可以更新記錄。

所以才加入到成功處理程序代碼：

// update record with form data 
f.updateRecord(); 

// mark record as synchronized with server (because you already sent data to server with form submit method) 
f.getRecord().commit();