可編輯網格ExtJS，如何在網格上編輯行後更新數據庫中的行

Question

首先，對不起我的英文不太好！

我需要做的下一件事：ExtJS 3.4可編輯網格（example），它將使用json格式。輸入源是json格式。我做到了，所有工作都很好，例如。

我所做的：從數據庫到陣列中的PHP

1. 數據下載
2. 陣列編碼爲JSON格式
3. 編輯網格源是使用JSON消息的網頁現在一切工作的罰款。

現在我需要做這樣的：我需要在網格單元更新更新數據庫中的數據。

我該怎麼做？沒有在網上找到任何東西。
也許像delphi7中的'OnCellEditting'有一些方法？

我的js代碼：

Ext.onReady(function() { 
    function formatDate(value) { 
     return value ? value.dateFormat('M d, Y') : ''; 
    } 

    // shorthand alias 
    var fm = Ext.form; 

    // the column model has information about grid columns 
    // dataIndex maps the column to the specific data field in 
    // the data store (created below) 
    var cm = new Ext.grid.ColumnModel({ 
     // specify any defaults for each column 
     defaults: { 
      sortable: false // columns are not sortable by default   
     }, 
     columns: [{ 
      header: 'ID', 
      dataIndex: 'id', 
      width: 30 
     }, { 
      id: 'firstname', 
      header: 'Firstname', 
      dataIndex: 'firstname', 
      width: 220, 
      // use shorthand alias defined above 
      editor: new fm.TextField({ 
       allowBlank: false 
      }) 
     }, { 
      header: 'Lastname', 
      dataIndex: 'lastname', 
      width: 220, 
      // use shorthand alias defined above 
      editor: new fm.TextField({ 
       allowBlank: false 
      }) 
     }] 
    }); 

    // create the Data Store 
    var store = new Ext.data.JsonStore({ 
     totalProperty: 'total', // total data, see json output 
     root: 'results', // see json output 
     url: '/grid/json', 
     fields: [ 
      'firstname', 'lastname'] 
    }); 

    // create the editor grid 
    var grid = new Ext.grid.EditorGridPanel({ 
     store: store, 
     cm: cm, 
     renderTo: 'grid-editable', 
     width: 440, 
     height: 300, 
     autoExpandColumn: 'firstname', // column with this id will be expanded 
     title: 'Edit Plants?', 
     frame: true, 
     clicksToEdit: 1 
    }); 

    // manually trigger the data store load 
    store.load({ 
     // store loading is asynchronous, use a load listener or callback to handle results 

    }); 
}); 

Answer 1

你最簡單的方法是在每個變化發送一個Ajax請求

{ 
    id: 'firstname', 
    header: 'Firstname', 
    dataIndex: 'firstname', 
    width: 220, 
    // use shorthand alias defined above 
    editor: new fm.TextField({ 
     allowBlank: false, 
     listeners : { 
      change : function(field, e) { 
       Ext.Ajax.request({ 
        url: '/grid/save', // your backend url 
        method: 'POST', 
        params: { 
         'id': grid.getSelectionModel().selection.record.get('id'), 
         'firstname': field.getValue() 
        } 
       }); 
      } 
     } 
    }) 
} 

，但我認爲你應該看看ExtJS的例子和閱讀更多關於與服務器的商店通信（例如使用REST）。