Ext JS 7.2双Datepicker组件切换时选中值异常问题求助

云原生阿岚

2026-5-7

Fix for Ext JS 7.2 Datepicker Value Mismatch When Switching Between Components

I’ve dug into the issue you described where switching between two Datepicker components on the same page leads to incorrect selected values. This is a common edge case tied to Ext JS’s default performance optimization behavior, and here’s a straightforward fix:

Root Cause

By default, Ext JS reuses a single picker panel instance across multiple Datepicker components to save resources. When you toggle between the two components, the picker’s internal state (like the currently selected date) doesn’t reset properly. This causes the first Datepicker to display the second component’s value when you switch back to it.

Solution

Add the destroyPickerOnHide: true configuration to each of your Datepicker components. This setting ensures each Datepicker destroys its picker panel when hidden, and creates a fresh, clean instance when opened again—completely isolating the state between the two components.

Modified Code Example

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    bodyPadding: 10,
    items: [
        {
            xtype: 'datefield',
            fieldLabel: 'First Date',
            name: 'firstDate',
            destroyPickerOnHide: true // Ensure picker is destroyed on hide
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Second Date',
            name: 'secondDate',
            destroyPickerOnHide: true // Isolate this component's picker state
        }
    ]
});