Sencha timefield의 값과 표시를 분리하기

2024. 12. 5. 17:55Javascript/Sencha

Ext.define('MyApp.view.TimeFieldExample', {
    extend: 'Ext.form.Panel',
    xtype: 'timefield-example',
    title: 'TimeField with Binding',
    width: 300,
    bodyPadding: 10,
    viewModel: {
        data: {
            timeValue: null, // Holds the actual time value
            timeText: '' // Holds the display text
        }
    },
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'timefield',
            fieldLabel: 'Select Time',
            name: 'time',
            increment: 15,
            format: 'H:i', // 24-hour format for value
            altFormats: 'g:i A', // Display alternate input formats
            bind: {
                value: '{timeValue}', // Bind the value to the ViewModel
                rawValue: '{timeText}' // Bind the displayed text
            },
            listeners: {
                change: function (field, newValue) {
                    const viewModel = field.lookupViewModel();
                    if (viewModel) {
                        // Update the ViewModel with value and text
                        viewModel.set('timeValue', Ext.Date.format(newValue, field.format)); // Formatted value
                        viewModel.set('timeText', field.getRawValue()); // Displayed text
                    }
                }
            }
        },
        {
            xtype: 'displayfield',
            fieldLabel: 'Time Value',
            bind: {
                value: '{timeValue}' // Display the bound time value
            }
        },
        {
            xtype: 'displayfield',
            fieldLabel: 'Time Text',
            bind: {
                value: '{timeText}' // Display the bound time text
            }
        }
    ]
});