PDA

View Full Version : DatePicker showBy floating Panel



Flipfine
21 Feb 2012, 1:29 AM
Hi all

I don't want to show the popup component at the bottom, certainly I want that
the datePicker is shown on a floating panel if I click the datepickerfield.
Perhaps someone can send me a code example.



var popup = new Ext.Panel({
floating: true,
scroll: 'vertical',
centered: true,
width: 270,
height: 320,
styleHtmlContent: true,
hideOnMaskTap: true,
dockedItems:[
{
xtype: 'toolbar',
title: 'von',
cls: 'x-toolbar-dark',
ui: 'dark',
dock: 'top',
items: [
{
xtype: 'button',
ui: 'plain',
iconCls: 'delete',
iconMask: true,
handler:function(){
popup.hide()
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
ui: 'plain',
iconCls: 'add',
iconMask: true,
handler:function(){

}
}
]
}],
items:[
// Picker Popup

]
});


Thanks

mitchellsimoens
21 Feb 2012, 7:07 AM
A picker is just an Ext.Sheet which doesn't want to be housed in anything.

Flipfine
21 Feb 2012, 11:18 PM
But is it possible to do this ext.sheet in a floating panel ? the same like the select floating panel ?

Flipfine
23 Feb 2012, 6:00 AM
Can nobody helpe me ?

jberke
28 Aug 2013, 11:54 AM
I managed to do this as follows. I'd rather see this added to the component as a feature. It's distracting when you tap a field to then have to go look at the bottom for the picker. I did notice the day field doesn't line up quite right yet.

{
xtype: 'datepickerfield',
label:'Date',
name: 'TouchDate',
value:new Date(),
picker: {
margin: 'auto auto auto auto',
width: '400px',
height: '219px',
top: '0px',
modal: true,
yearFrom: new Date().getFullYear() - 1,
yearTo:new Date().getFullYear()+1
}
},