positioning of date picker in extjs

Question

I'm using the date picker but I am a little confused about where it decides to place the date picker on the screen. On one screen it's fine but on another it gets stuck hiding behind a flash object. Can I force it to attach to the bottom right corner of the place where the datebutton is clicked? I was looking in firebug and it seems to just have random left and bottom variables in CSS which I'm not sure where they're pulled from. Thanks

Answer 1

Before attempting to reposition the date field's menu try setting the Flash object's 'wmode' property to 'opaque'. Depending on how the Flash object is embedded this should allow the menu to appear above it.

If you are still wanting to force a new alignment position of the menu then try overriding the DateField instance's onTriggerClick method:

new Ext.form.DateField({
    fieldLabel: 'Choose a date',
    onTriggerClick: function() {
        Ext.form.DateField.prototype.onTriggerClick.call(this);
        this.menu.show(this.el, 'tl-br?');
    }
});

This align's the top-left corner of the menu with the bottom-right corner of the field. See the documentation of Ext.Element.alignTo for other possible values to pass to the second parameter of the show method.

This is a bit of a hack as it results in the menu's show method being called twice, but the alternative is rewriting onTriggerClick to pass your chosen position on the first call.