ExtJS checkcolumns cannot edit after modify model

Question

Hi I tried to edit data before the data store into grid because I have to calculate some values.

I modified the model field like this

fields: ['name', 'email', 'phone', 
                {
                    name: 'check',
                    convert: function(value, record) {
                        return 1;
                    }
                }
        ]

and bind dataIndex to the column

columns: [{
            ...
            }
        }, {
            ...
        }, {
            xtype: 'checkcolumn',           
            text: 'Phone',
            dataIndex: 'check'
        }]

When I execute this I found the checkcolumn cannot be editable. What's wrong about this?

Sample

Answer 1

Thats because you always return 1. You need to do for example:

name: 'check',
mapping: 'phone',
convert: function(value, record) {
    return value ? 1 : 0;
}

Answer 2

Your problem is the convert function. Your checkcolumn is still active, but each time your value is evaluated, it gets sent through the convert function and returns 1 (or true since it's used in a checkbox)

From what I gather, you want to set a defaultValue on the check column, then you should work with the defaultValue property defining your check column

Here you can learn more about the model itself :) https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.Model

For the field configurations, you could check here https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.field.Field

So, either toss your convert function, or let it return the correct value (true or false, 1 or 0) based on the value parameter in your convert function.

Answer 3

When you click the checkfield the converter is automatically invoked and in your convert:function you always force his value to checked. Try to set a value with different check or remove the custom converter

here is your fiddle modified:

https://fiddle.sencha.com/#fiddle/12p5

and the fiddle code:

Ext.application({
name: 'Fiddle',

launch: function() {
    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'phone', {
            name: 'check',
            convert: function(value, record) {
                debugger;   //You can see that this function is invoked when you check the column
                return value ? 1 : 0; //Modify the logic or don't force the value
            }
        }],
        data: [{
            name: 'Lisa',
            email: '[email protected]',
            phone: '555-111-1224',
            check: 1 //initialize with checked if necessary

        }, {
            name: 'Bart',
            email: '[email protected]',
            phone: '555-222-1234',
            check: 1
        }, {
            name: 'Homer',
            email: '[email protected]',
            phone: '555-222-1244',
            check: 1
        }, {
            name: 'Marge',
            email: '[email protected]',
            phone: '555-222-1254',
            check: 1
        }]
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            renderer: function(value, meta) {
                meta.tdCls += ' image-hover';

                return '<span class="name">' + value + '</span><img src="http://sstatic.net/stackoverflow/img/icon-16.png" />';
            }
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            xtype: 'checkcolumn',
            text: 'Phone',
            dataIndex: 'check'
        }]
    });
}
});

Answer 4

Ran across this same issue. If you change

return value ? 1 : 0;

to

if(value = [value to check box] || value = true) {return true;}

else {return false;}

Probably a fancier way to do it but this will take care of hitting the convert function when a user clicks the checkbox column.