2

I have the following part of code that displays row of checkboxes in grid in this way grid

enter image description here

columns of grid:

columns: [{
                text: 'Name',
                dataIndex: 'name'
            },{
                text: 'Permissions',
                dataIndex: 'permissions',
                width: 200,
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    var checkboxes = '';
                    for (var variable in value) {
                        var temp = value[variable] === 1 ? 'checked' : '';
                        checkboxes += '<input type="checkbox" ' + 'name="' + variable + '" value="' +
                            value[variable] + '"' + temp + '>' + variable;

                    }
                    return checkboxes;
                }
            }]

I would like to save each checkbox value, so when I change the checked value of checkbox it saves even after page reload. I am trying to use listeners, or maybe the simplest way exists. Or maybe some stateful or stateevents.

divinen
  • 81
  • 10
  • Simply attach a listener to the given checkbox (like onclick) which contains an ajax request to save the checkbox value. – Tyr Apr 24 '18 at 20:25
  • @Tyr Each checkbox is creating dinamically in my case, so when I just create listener after renderer it doesn't work( I am not sure where should I put the listener. – divinen Apr 25 '18 at 07:44

1 Answers1

1

If you want to attach a listener, this can be useful:

{
    text: 'Permissions',
    dataIndex: 'permissions',
    width: 350,
    renderer: function(value, cell, record) {
        var prefix = 'MyCheckBox_' + record.get('name') + '_';
        var s = '';
        for (var variable in value) {
            s = s + '<input type="checkbox" ';
            s = s + 'id="' + prefix + variable + '" ';
            if (value[variable] == 1) {
                s = s + 'checked ';
            };
            s = s +
                'onclick="'+
                        'var r = Ext.getCmp(\'MyGridPanel\').getSelectionModel().getSelection()[0]; ' +
                        'var p = r.get(\'permissions\'); ' +
                        'p[\'' + variable + '\'] = (document.getElementById(\'' + prefix + variable + '\').checked ? 1 : 0); ' +
                        'r.set(\'permissions\', p); ' +
                        'r.commit(); ' +
                        '" ';
            s = s + '>' + variable;
        }
        console.log(value);                     
        return s;
    }
}

Notes:

This example is tested with ExtJS 4.2.

With this code, the check state of checkbox is only written in the store, nothing more. You can write different handling function.

Zhorov
  • 28,486
  • 6
  • 27
  • 52
  • Unfortunately, on this line 'var permissions = record.get(\'permissions\'); ' it doesn't receive record. It outputs underfined for record. – divinen Apr 25 '18 at 09:57
  • I am using 5.1.1, maybe some issues with version. – divinen Apr 25 '18 at 10:26
  • Just when the first time I change checkbox state it gives me error 'Cannot read property 'get' of undefined'. Next time if doesn't show any error – divinen Apr 25 '18 at 11:15
  • I've made small corrections within "renderer", but this example works for me without errors. – Zhorov Apr 25 '18 at 12:41
  • Ok, it works now. It's really helpful. Great Thanks! – divinen Apr 25 '18 at 13:40