extjs - how to enable grid cell vaule to edit after clicking check box

1
votes

How can i enable grid cell editing only after clicking checkbox in the same row.

var simpsonPanel = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    //selType: 'checkboxmodel',
    forceFit:true,
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })],
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {
                xtype: 'checkcolumn',
               // text: 'Phase 9',
                dataIndex:'Phase9',
                listeners: {
                        checkChange: onCheckChange
                }},
        { text: 'Name',  dataIndex: 'name'},
        { text: 'Email', dataIndex: 'email' },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400

});

total code https://fiddle.sencha.com/#fiddle/18c0.

after clicking checkbox i need enable name cell for edit. if the checkbox is not selected then user cannot edit the name cell.

Thanks

2
extjsextjs4extjs5

2 Answers

1
votes

You can listen for beforeedit event and return a flag whether to allow editing or not.

Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    listeners: {
        beforeedit: function(editor, event) {
            return event.record.get('Phase9');
        }
    }
})]

https://fiddle.sencha.com/#fiddle/18c4

0
votes

In config options if you put checkOnly: true then it will check only when you click on the checkbox otherwise it won't.

See docs at: http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.selection.CheckboxModel-cfg-checkOnly