In Ext 4, we use componentcolumn to render Ext component in a grid cell.
{ dataIndex: 'age', xtype: 'componentcolumn', renderer: function(value, m, record) { if (value < 30) { return { xtype: 'myWidget1'; }; } else { return { xtype: 'myWidget2'; }; } } }
In Ext 5, the built-in widgetcolumn have the same ability to do so. But the widgetcolumn have better rendering performance.
{ xtype: 'widgetcolumn', widget: { xtype: 'container', }, onWidgetAttach: function(widget, record) { var items = []; if (record.get('age') < 30) { items.push({ xtype: 'myWidget1' }) } else { items.push({ xtype: 'myWidget2' }) } widget.removeAll(); widget.add(items); } }
Note that onWidgetAttach() is a public but not documented method.