Extjs binding value not getting cleared

Question

Extjs binding value not getting cleared when the user clears the date field box manually ( user changes date field to blank )

I cannot post the code but i found a similar fiddle

In this fiddle i want the value to be cleared when i clear the datefield manually , instead what is happening is the display field keeps showing the old value

it would be great help if some one could provide me the solution

Answer 1

You could use specialkey event for the datefield to achieve the required result.

You can check here with working fiddle.

Note you can put your logic based on your requirement. I have just create simple example.

Code snippet

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {

            renderTo: Ext.getBody(),

            viewModel: {
                data: {
                    dateFrom: null,
                }
            },

            items: [{
                xtype: 'datefield',
                emptyText: 'Date From',
                bind: '{dateFrom}',
                listeners: {
                    specialkey: function (field, e) {
                        if (e.getKey() == e.DELETE || e.getKey() == e.BACKSPACE) {
                            field.up('panel').getViewModel().set('dateFrom', null);
                        }
                    }
                }
            }, {
                xtype: 'displayfield',
                bind: {
                    value: '{dateFrom}'
                }
            }]
        });

    }
});