Sencha timefield의 값과 표시를 분리하기
2024. 12. 5. 17:55ㆍJavascript/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
}
}
]
});
'Javascript > Sencha' 카테고리의 다른 글
Sencha panel에 html을 사용하여 이미지 나오게 하기 (0) | 2024.12.05 |
---|---|
Sencha treepanel row 선택하기 (0) | 2024.12.05 |
Sencha Custom js 파일 등록 (0) | 2024.12.05 |
Sencha treepanel의 모든 node 펼치기 (0) | 2024.12.05 |
Sencha Object 접근하기 (0) | 2024.12.05 |