Answered - Grid Row Editing Not Working

[ekolesmanasijabat]

Hi,
I have implemented RowEditing plugins in grid. i have button "Add Employee" in tbar grid. But nothing happen when i click the button. What should i do?

Here is my code.

DataPoliklinikRuangan.js => Store

Ext.define('ONC.store.DataPoliklinikRuanganStore', {
    extend: 'Ext.data.Store',
    model: 'ONC.model.DataPoliklinikRuanganModel',
    
    remoteStore: true,
    pageSize: 2,
    autoLoad: { start: 0, limit: 2 },
    
    proxy: {
        type: 'ajax',
        api: {
            create: 'application/controllers/dataPRCreate.php',
            read: 'application/controllers/dataPRList.php',
            update: 'application/controllers/dataPRUpdate.php',
            destroy: 'application/controllers/dataPRDelete.php'
        },
        reader: {
            type: 'json',
            root: 'results',
            totalProperty: 'total',
            successProperty: 'success'
        }
    }
});

DataPoliklinikRuanganModel.js => Model

Ext.define('ONC.model.DataPoliklinikRuanganModel', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: ['id', 'kode', 'tipe', 'deskripsi', 'ruang', 'jlhbed', 'tarifperhari', 'telp', 'penanggungjawab']
});

DataPoliklinikRuangan.js => View

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false
});


Ext.Loader.setPath('Ext.ux', 'extjs/src/ux');
Ext.define('ONC.view.dataklinik.DataPoliklinikRuangan', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.data-poliklinik-ruangan-panel',
    
    requires: [ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.form.*', 'Ext.ux.CheckColumn' ],
    
    store: 'DataPoliklinikRuanganStore',
    stripeRows: true,
    height: 400,
    
    columns: [
        { header: 'Kode', dataIndex: 'kode', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Tipe', dataIndex: 'tipe', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Deskripsi', dataIndex: 'deskripsi', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Ruang', dataIndex: 'ruang', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Jumlah Bed', dataIndex: 'jlhbed', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Tarif/Hari', dataIndex: 'tarifperhari', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Telp', dataIndex: 'telp', flex: 1, editor: { allowBlank: false } }, 
        { header: 'Penanggung Jawab', dataIndex: 'penanggungjawab', flex: 1, editor: { allowBlank: false } }
    ],
    
    tbar: [
        {
            text: 'Add Employee',
            iconCls: 'employee-add',
            handler: function() {
                rowEditing.cancelEdit();


                var r = Ext.create('ONC.model.DataPoliklinikRuanganModel', {
                    id: ' ', 
                    kode: ' ',
                    tipe: ' ',
                    deskripsi: ' ',
                    ruang: ' ',
                    jlhbed: ' ',
                    tarifperhari: ' ',
                    telp: ' ',
                    penanggungjawab: ' '
                });
                
                console.log(r);


                store.insert(0, r);
                rowEditing.startEdit(0, 0);
            }
        }, {
            itemId: 'removeEmployee',
            text: 'Remove Employee',
            iconCls: 'employee-remove',
            handler: function() {
                var sm = grid.getSelectionModel();
                rowEditing.cancelEdit();
                store.remove(sm.getSelection());
                if (store.getCount() > 0) {
                    sm.select(0);
                }
            },
            disabled: true
        }
    ],
    plugins: [rowEditing],
    listeners: {
        'selectionchange': function(view, records) {
            grid.down('#removeEmployee').setDisabled(!records.length);
        }
    }
});

[existdissolve]

Are you receiving any errors? Is the new record successfully getting added to your store?

I imagine the record isn't getting inserted into the store since the "store" variable in your handler doesn't seem to be pointing to anything. Try:

{   
    text: 'Add Employee',   
    iconCls: 'employee-add',   
    handler: function( btn, e, opts ) {       
        rowEditing.cancelEdit();       
        var r = Ext.create('ONC.model.DataPoliklinikRuanganModel'),           
              store = btn.up( 'grid' ).getStore() ;       
        store.insert(0, r);       
        rowEditing.startEdit(0, 0);   
    }
} 

[ekolesmanasijabat]

Thanks again exitdissolve ,

your solution is working for me. but when i click the "Add Employee" button, it's only insert one record to the grid, then i must double click the record to edit/insert data inside it . What i want is, when i click the "Add Employee" button, it will be automatically to make the record editable...

[existdissolve]

Thanks again exitdissolve ,

your solution is working for me. but when i click the "Add Employee" button, it's only insert one record to the grid, then i must double click the record to edit/insert data inside it . What i want is, when i click the "Add Employee" button, it will be automatically to make the record editable...

According to the docs, the arguments for startEdit are record and columnHeader.

So if you update your code to something like the following, it should work:

grid.editingPlugin.startEdit( store.getAt(0), grid.columns[0] ); 

Here's a live example: Editable Grid after Store Insert

[ekolesmanasijabat]

finally i got where is my mistake. because of the listeners. when i comment in that line, everything is worked fine.

anyway, thanks a lot for your solution, exitdissolve. at least, make me know what variables and actions that can handle in grid.