Grid Widget column - on widget change, how to update grid store

Question

I have a requirement to display combobox and datefield in Grid columns. So used widgetcolumn and created grid with those fields.

But now on changing data in combobox or datefield, new values should be updated in grid store so that after going to next page and coming back, values should persist in previous pages.

Can someone let me know how I can achieve this?

Fiddle: https://fiddle.sencha.com/#fiddle/183r

Answer 1

Option1: Use both widget and cell editor.

Add CellEditing plugin and set editor to same component as widget.

{ xtype: 'widgetcolumn', text: 'Gender', dataIndex: 'gender', flex: 1, 
                    widget: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'},
                    editor: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'}
},

Example: https://fiddle.sencha.com/#fiddle/1843

Option2: Manually update the record.

I feel this solution is better.

widget: {xtype: 'datefield',
            listeners:{
                select: function(datefield, value, eOpts){
                    var rowIndex = datefield.up('gridview').indexOf(datefield.el.up('table'));
                    var record = datefield.up('gridview').getStore().getAt(rowIndex);
                    record.set('dob', value);
                }
            }
        }

Example: https://fiddle.sencha.com/#fiddle/1842

To get rowIndex in widgetColumn, I referenced "How to get rowIndex in extjs widget column" DrakeES's answer.