Checkbox in editor grid Extjs

Question

I have this code:

{                    
     xtype: 'checkcolumn',
     header: 'Contacto de Emergencia',
     dataIndex: 'contactoEmergencia',
     listeners: {
           beforecheckchange: function() {
                return false;
           }
     },
     width: 60,
     editor: {
         xtype: 'checkbox',
         cls: 'x-grid-checkheader-editor',
         inputValue: 1,
         uncheckedValue: 0                
     }   
}

I want it sends 1 / 0 instead of true/false but it is still sending true-false, how can I change it to send the values I want?

Answer 1

You can try with below code:-

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224',
        active: 1
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234',
        active: 1
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244',
        active: 0
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254',
        active: 1
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        editor: {
            xtype: 'checkbox',
            cls: 'x-grid-checkheader-editor',
            inputValue: 1,
            uncheckedValue: 0
        },
        text: 'Active',
        dataIndex: 'active',
        renderer: function(value, metadata, record, rowIndex, colIndex, store) {
            var tempVal = '',
                me = this;
            if (value === 1) {
                tempVal = 'checked';
            }
            return "<input name=" + record.get('id') + "_" + record.get('id') + " type='checkbox'" + tempVal + ">";
        }
    }],
    listeners: {
        cellclick: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
            console.log(e);
            if (e.target.type && e.target.type === 'checkbox') {
                let checkVal = e.target.checked ? 1 : 0;
                record.set('active', checkVal);
                console.log(record);
            }
        }
    }
});

Also you can check fiddle and on console you can check updated record.

Hope it help :)