Save checkboxes values when page reload Ext JS

Question

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

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.

Simply attach a listener to the given checkbox (like onclick) which contains an ajax request to save the checkbox value. — Tyr
– Tyr, Commented Apr 24, 2018 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
– divinen, Commented Apr 25, 2018 at 7:44

Zhorov · Accepted Answer · 2018-04-25 13:06:25Z

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.

edited Apr 25, 2018 at 13:06

answered Apr 25, 2018 at 9:02

Zhorov

30.3k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

divinen Over a year ago

Unfortunately, on this line 'var permissions = record.get(\'permissions\'); ' it doesn't receive record. It outputs underfined for record.

divinen Over a year ago

I am using 5.1.1, maybe some issues with version.

divinen Over a year ago

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

Zhorov Over a year ago

I've made small corrections within "renderer", but this example works for me without errors.

divinen Over a year ago

Ok, it works now. It's really helpful. Great Thanks!

Collectives™ on Stack Overflow

Save checkboxes values when page reload Ext JS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related