Extjs Issue with binding readOnly property of combo dynamically

Question

I have a widget with combobox & flow I need is something like this,

1. At first combo is disabled.

2. Each row has edit icon & when I click on edit only that particular combo should be enabled.

3. Then when I save the record the enabled combo should be disabled again.

Step 3 is not working for me.

{
    text: 'TC',
    dataIndex: 'scrTC',
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'combo',
        store: 'TCStore',
        valueField: 'value',
        displayField: 'displayValue',
        matchFieldWidth: false,
        bind: {
            readOnly: {
                isReadOnly
            }
        }
    }
}

I have also tried onwidgetattach method, but after save this method is not called so its not working.

onWidgetAttach: function(column, widget, record) {
    if (condition) {
        widget.setReadOnly(false);
    } else {
        widget.setReadOnly(true);
    }
}

Anyone has an idea?

Edit 2:

I have inserted readOnly:true to my leaf records dynamically.

In View Model create a isReadOnly function,

Ext.define('MainViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    data: {
        isReadOnly: function (record) {
            return record.get('readOnly');
        }
    }
});

And in treeGrid its,

{
        text: 'TC',
        dataIndex: 'scrTC',
        xtype: 'widgetcolumn',
        widget: {
            xtype: 'combo',
            store: 'TCStore',
            valueField: 'value',
            displayField: 'displayValue',
            matchFieldWidth: false,
            bind: {
                readOnly: '{isReadOnly}'
            }
        }
    }

On first load combobox is readOnly as expected, but when i click on edit button in row it creates a new row below & i have set readOnly=false. But still the combobox is not binding as readOnly false n making it editable.

Answer 1

You need to use record.readOnly for widgetcolumn to bind config for combobox. Like this

bind: {
    readOnly: '{record.readOnly}'
}

You can check here with working fiddle.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'grid',
            title: 'Binding Example',

            width: '100%',

            viewModel: {
                stores: {
                    gridStore: {
                        type: 'store',
                        fields: ['name', 'abrr', {
                            //This readOnly for widgetcolumn of combobox
                            name: 'readOnly',
                            //By default vlaue is true
                            defaultValue: true,
                            type: 'boolean'
                        }],
                        data: [{
                            name: 'Substation A',
                            "abbr": "AL",
                            readOnly: true
                        }, {
                            name: 'Substation B',
                            "abbr": "AK"
                        }, {
                            name: 'Substation C',
                            "abbr": "AZ",
                        }, {
                            name: 'Substation D',
                            "abbr": "AK"
                        }]
                    },
                    states: {
                        type: 'store',
                        fields: ['abbr', 'name'],
                        data: [{
                            "abbr": "AL",
                            "name": "Alabama"
                        }, {
                            "abbr": "AK",
                            "name": "Alaska"
                        }, {
                            "abbr": "AZ",
                            "name": "Arizona"
                        }]
                    }
                }
            },

            bind: '{gridStore}',
            columns: [{
                text: 'Name',
                flex: 1,
                dataIndex: 'name',
                width: 120
            }, {
                text: 'Select',
                flex: 1,
                xtype: 'widgetcolumn',
                dataIndex: 'abbr',
                widget: {
                    xtype: 'combo',
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'abbr',
                    bind: {
                        store: '{states}',
                        readOnly: '{record.readOnly}'
                    }
                }

            }, {
                text: 'Edit',
                width: 50,
                xtype: 'widgetcolumn',
                widget: {
                    xtype: 'button',
                    iconCls: 'x-fa fa-edit',
                    handler: function (btn) {
                        //Set the read only fase on button click
                        btn.getWidgetRecord().set('readOnly', false);
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});