Редактируемая сетка ExtJS, как обновить строку в базе данных после редактирования строки на сетке

Question

Во-первых, извините за мой не очень хороший английский!

Мне нужно сделать следующее: ExtJS 3.4 Editable Grid (example), который будет работать с json-форматом. Источник ввода находится в формате json. Я сделал это, все работает нормально, как в примере.

я сделал:

1. загрузки данных из базы данных в массив в PHP
2. массива кодируется в формат JSON
3. редактируемого источник сетки страница с сообщением JSon теперь все работает нормально.

Теперь мне нужно сделать следующее: мне нужно обновить данные в базе данных по обновлению ячеек в сетке.

Как я могу это сделать? Не нашел ничего в Интернете.
Возможно, есть какой-то метод, например «OnCellEditting», как в delphi7?

Мой расслоение плотной код:

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).