Ext JS

Adding Listeners to the RowEditing Plugin
---------------------------------------------
plugins: {
    ptype: 'rowediting',
    pluginId: 'modelCarsRowEditingPlugin',
    clicksToEdit: 1,
    listeners: {
        beforeedit: 'onGridEditorBeforeEdit',
        canceledit: 'onGridEditorCancelEdit',
        edit: 'onGridEditorEdit'
    }
}


Adding Select and Deselect Listeners to the ExtJS Grid
--------------------------------------------------------
listeners:
{
    select: 'onGridSelect',
    deselect: 'onGridDeselect'
}

Ext JS Grid Editing Using a ViewController
--------------------------------------------
onNewButtonClick: function (button, evt)
{
    var newCar = Ext.create('App.model.ModelCar',
{
        category: '',
        name: '',
        vendorId: -1,
        vendorName: ''
    });
    this.isNewRecord = true;
    this.newRecordId = newCar.get('id');
    var grid = this.lookupReference('modelCarsGrid');
    grid.getStore().insert(0, newCar);
    grid.getPlugin('modelCarsRowEditingPlugin').startEdit(newCar);
}

--------
Ext.define('App.view.ViewportController',
{
    extend: 'Ext.app.ViewController',
    alias: 'controller.viewport',
    newRecordId: '',
    isNewRecord: false,
    // Rest of the Class omitted for brevity.
}
 )

------------
var grid = this.lookupReference('modelCarsGrid');
grid.getStore().insert(0, newCar);
grid.getPlugin('modelCarsRowEditingPlugin').startEdit(newCar);

-------------

Modifying the RowEditing Plugin From a ViewController
----------------------------------------------------------
onGridEditorBeforeEdit: function (editor, ctx, eOpts) {
    this.lookupReference('newRecordButton').setDisabled(true);
    var vendorColIdx = 2;
    var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
    if (ctx.record.get('vendorId') === -1) {
        combo.emptyText = 'Select a vendor...';
    }
}

Saving ExtJS Grid Records From a ViewController
----------------------------------------------------
onGridEditorEdit: function (editor, ctx, eOpts)
{
    var vendorColIdx = 2;
    var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
    var vendorRecord = combo.findRecord('name', ctx.record.get('vendorName'));
    ctx.record.set('vendorId', vendorRecord.get('id'));
    ctx.grid.getStore().sync();  // Force a post with the updated data.
    this.isNewRecord = false;
    this.newRecordId = null;
    this.lookupReference('newRecordButton').setDisabled(false);
    this.lookupReference('deleteRecordButton').setDisabled(true);
}

Cancelling ExtJS Grid Edit From a ViewController
---------------------------------------------------
onGridEditorCancelEdit: function (editor, ctx, eOpts)
{

    if (this.newRecordId && ctx.record.get('id') === this.newRecordId && this.isNewRecord)
{
        ctx.grid.getStore().remove(ctx.record);
        this.isNewRecord = false;
        this.newRecordId = null;
    }
    this.lookupReference('newRecordButton').setDisabled(false);
}

Deleting Ext JS Grid Records From a ViewController
----------------------------------------------------
onDeleteButtonClick: function (button, evt) {
    var grid = this.lookupReference('modelCarsGrid'),
        selectedRecords = grid.getSelection(),
        store = grid.getStore();
    store.remove(selectedRecords);
    store.sync();
    this.lookupReference('deleteRecordButton').setDisabled(true);
}

Handling Grid Select and Deselect Events From a ViewController
---------------------------------------------------------------
onGridSelect: function (rowModel, record, idx, eOpts)
 {
    this.lookupReference('deleteRecordButton').setDisabled(false);
},
onGridDeselect: function (rowModel, record, idx, eOpts)
{
    this.lookupReference('deleteRecordButton').setDisabled(true);
}

A PHP Page to Handle Adding and Deleting Records to the ExtJS Grid
-------------------------------------------------------------------
Ext.define('App.store.ModelCars', {
    extend: 'Ext.data.Store',
    model: 'App.model.ModelCar',
    sorters: ['name'],
    autoLoad: true,
    autoSync: false,    // Make sure that autosync is disabled to avoid posting invalid vendorName.
    proxy: {
        type: 'ajax',
        url: 'model-cars.php',
        api: {
            create: 'model-cars.php?action=create',
            read: 'model-cars.php?action=read',
            update: 'model-cars.php?action=update',
            destroy: 'model-cars.php?action=destroy'
        },
        reader: {
            type: 'json',
            rootProperty: 'modelCars'
        }
    }
});

--------
switch ($method)
{
  case 'GET':
    $result = getModelCars();
    header('Cache-Control: no-cache, must-revalidate');
    header("content-type:application/json");
    echo(json_encode($result));
    break;
  case 'POST':
    $result = array("success" => true);
    header('Cache-Control: no-cache, must-revalidate');
    header("content-type:application/json");
    echo(json_encode($result));
    break;
}

------------
Let’s replace the code under the POST case with the following:
---------------------------------------------------------------
switch ($method)
{    
    case 'GET':  
        $result = getModelCars();
        header('Cache-Control: no-cache, must-revalidate');
        header('content-type:application/json');
        echo(json_encode($result));
        break;
    case 'POST':    
        switch ($action)
{    
            case 'create':                
            break;    
            case 'update':            
            break;    
            case 'destroy':              
            break;
        }
    break;
}

--------
case 'create':            
    $modelCar = json_decode($requestBody);
    // TODO: Save $modelCar in the database            
    $result = array('success' => true, 'action' => 'create', 'modelCar' => $modelCar);
    header('Cache-Control: no-cache, must-revalidate');
    header('content-type:application/json');
    echo(json_encode($result));    
break;

------------
case 'update':        
    $updatedData = json_decode($requestBody);
    // TODO: Save $updatedData in the database.            
    $result = array('success' => true, 'action' => 'update', 'updatedData' => $updatedData);
    header('Cache-Control: no-cache, must-revalidate');
    header('content-type:application/json');
    echo(json_encode($result));    
break;
-------------
case 'destroy':      
    $deletedData = json_decode($requestBody);
    // TODO: Delete $deletedData from the database.          
    $result = array('success' => true, 'action' => 'destroy', 'deletedData' => $deletedData);
    header('Cache-Control: no-cache, must-revalidate');
    header('content-type:application/json');
    echo(json_encode($result));        
break;