PDA

View Full Version : date picker in menu



harmomelodic
31 Dec 2009, 12:46 PM
I am trying to put a datepicker into a menu.
I do not want to use a datemenu, rather, I want the form style datepicker (with the editable dialog box). I had this widget outside of the menu priviously...but I a)need to move it there, and b) need to maintain the edit box and datePicker popup.

If I copy the snippet without the container into the menu, the datepicker is there, with no fieldLabel (which I want), but the worse part is the picker doesn't work...it fails to popup the calendar. If I keep the container I see nothing.

I could use a datemenu, if and only if there was a way to include the edit box and have hour and minute times as part of the widget.

Can anybody point me in the right direction?


new Ext.Container({
width: 220,
layout: "form",
items: [
new Ext.form.DateField({
fieldLabel: "Start date/time",
width: 100,
allowBlank: false,
format: 'm/d/y H:i',
id: "startDate"
})
]
})

harmomelodic
31 Dec 2009, 1:59 PM
What I am really trying to replicate, in a menu, is...
Ext.form.DateField
sorry to confuse the issue by referring to this as a 'datepicker'

Animal
1 Jan 2010, 2:51 AM
Put this as an item in your Menu:



{
xtype: 'datefield',
width: 135,
onTriggerClick: function(e) {
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false,
allowOtherMenus: true
});
}
this.constructor.prototype.onTriggerClick.apply(this, arguments);
},
iconCls: 'no-icon'
}

harmomelodic
5 Jan 2010, 8:39 AM
Thanks Animal! This is almost exactly what I need and gives me some real insight into Ext.
Only one significant problem remains that I am having trouble solving on my own. When using this, many of the text editing controls I should have don't work. Namely using the arrow keys when the cursor is already active, and setting the cursor to a point other than the end of the date/time text with the mouse. I am having this same problem with a text field within the menu...current code for both follows...


{
xtype: 'datefield',
width: 115,
iconCls: 'no-icon',
format: 'm/d/y H:i',
id: "startDate",
onTriggerClick: function(e) {
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false,
allowOtherMenus: true
});
}
this.constructor.prototype.onTriggerClick.apply(this, arguments);
}
},
{
xtype: "textfield",
width: 100,
growMax: 550,
growMin: 100,
grow: true,
iconCls: 'no-icon',
id: "filter"
},

harmomelodic
5 Jan 2010, 8:53 AM
menu.keyNav.disable();

I've addes focus and blur listeners to disable the menu's keyNav feature.
This appears to solve the arrow key problem. <s>I'm can't seem to find a "lostFocus" listener so that I can disable and enable dynamically, but universally disabling arrows on the menu is not a big loss....blur was the answer</s>

I'm still looking for a way to place the cursor using the mouse.

harmomelodic
5 Jan 2010, 12:41 PM
The cursor problem appear to be FF specific.
When I use this code in IE, it does not have the same problem!!!

Explanation? Workaround?

harmomelodic
5 Jan 2010, 1:58 PM
Is this a bug? Should I move this into the bug forum?

harmomelodic
5 Jan 2010, 2:44 PM
adding
style:"position:fixed", partially fixes this. I can now select text and move the cursor with the mouse, but the position of elements following the textfield is SNAFUed (surprise surprise). They are overlapping!

harmomelodic
5 Jan 2010, 4:34 PM
Almost there...but it is a total hack. I would love to hear about a cleaner way of dealing with this FireFox issue. The only problem still remaining is the datepicker is now incorrectly displayed overlapping the left hand side of the datefield instead of on the right. Code follows.



.spacer_padding {
margin-bottom:9px;
}

{
xtype: 'datefield',
width: 115,
iconCls: 'no-icon',
format: 'm/d/y H:i',
id: "endDate",
style: "position:fixed;",//fixes input field cursor issues
listeners: {
focus: DisableKeyNav,
blur: EnableKeyNav
},
onTriggerClick: function(e) {
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false,
allowOtherMenus: true
});
}
this.constructor.prototype.onTriggerClick.apply(this, arguments);
}
},
{//fixes position:fixed created problems
xtype: "menutextitem",
iconCls: 'no-icon',
ctCls: "spacer_padding",
},
"-",
{
xtype: "textfield",
width: 100,
growMax: 550,
growMin: 100,
grow: true,
iconCls: 'no-icon',
id: "filter",
style: "position:fixed;",//fixes input field cursor issues
listeners: {
focus: DisableKeyNav,
blur: EnableKeyNav
}
},
{//fixes position:fixed created problems
xtype: "menutextitem",
iconCls: 'no-icon',
ctCls: "spacer_padding",
id: "spacer1"
}

harmomelodic
5 Jan 2010, 4:59 PM
This works for firefox...repositions correctly.
IE is quite broken now...that's what I get for hacking away...
PLEASE! Someone give me a proper solution!


.x-form-trigger{
margin-left:98px;
}