PDA

View Full Version : Combobox with Date Picker



sczyzewicz
2 Dec 2013, 8:14 AM
How would one configure a combobox component to contain both store-bound items, as well as a calendar picker in the display field (for manual entry)?

scottmartin
3 Dec 2013, 3:53 PM
You want a combo that display a list if items, and below that it contains a datepicker, that when a date is selected that it populates the combo value?

You would most certainly need to create a custom UX for this.

kkshah
30 Sep 2015, 8:07 PM
Hi sczyzewicz,

You could try this piece of code :


xtype: 'image',
itemId: 'myDatepicker',
src: 'your image location',
height: 20,
width: 20,
listeners: {
render: function (c)
{
c.getEl().on('click', function (e)
{
Ext.widget({
xtype: 'datepicker',
floating: true,
maxDate: new Date(),
handler: function (picker, date)
{
var comboboxDate = Ext.ComponentQuery.query('form[itemId='your grid panel itemId containing combobox']')[0].getForm().findField('yourComboboxName');
date = Ext.Date.format(date, 'Y-m-d');
comboboxDate.clearValue();
comboboxDate.setValue(date);
comboboxDate.setValueNotFoundText(date);
picker.destroy();
}
}).showAt(c.getXY());
}, c);
}
}