widgetcolumn: bind visibility of widget to dataIndex

Question

I have a widgetcolumn that contains a button:

xtype:'widgetcolumn',
dataIndex: 'canUpdateKey',
itemId:'updateKey',
width:120,
widget: {
    xtype: 'button',
    text: 'Update key',
    hidden: '{!record.canUpdateKey}'
}

I only want to display the button where canUpdateKey is true on the record; but this does not work as indented. Relevant fiddle

Answer 1

From the widget config documentation:

The rendered component has a Ext.app.ViewModel injected which inherits from any ViewModel that the grid is using, and contains two extra properties: record and recordIndex

The widget configuration may contain a cfg-bind config which uses the ViewModel's data.

So you should use bind instead, like this:

xtype:'widgetcolumn',
dataIndex: 'canUpdateKey',
itemId:'updateKey',
width:120,
widget: {
    xtype: 'button',
    text: 'Update key',
    bind: {
        hidden: '{!record.canUpdateKey}'
    }
}

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26ig

Answer 2

Inside your button widget, Try this:

listeners:{
                render:function(btn){
                    if(!btn.getWidgetRecord().data.canUpdateKey)
                    btn.hide();
                }
                }