PDA

View Full Version : DateTimeMenu



otatop
23 Oct 2008, 12:11 PM
The DateTimeMenu is very much like the Ext.DateMenu except it also has a TimeField drop down and requires the user to click ok after they select a date and time. I would love feedback on how to improve this picker but it does seem to work well. (we use locale objects so you'll have to replace that with your own text)


Ext.namespace("Ext.ux.menu");

Ext.ux.menu.DateTimeItem = function(config){
this.picker = new Ext.DatePicker(config);

var okButton = new Ext.Button({text:Ext.MessageBox.buttonText.ok, onClick :function() {

var time = this.menuItem.timefield.getValue();
time = time.replace(/\s+/g,"");

if (!this.menuItem.isValid(this.menuItem)) {
return;
}

this.menuItem.parentMenu.hide(true);
this.menuItem.onSelect(this);
}});
okButton.menuItem = this;

this.timefield = new Ext.form.TimeField({
// Note: the listClass is required and must be set to x-menu otherwise
// when you click on the drop down the menu will disappear.
listClass:'x-menu',
value: '12:00 AM',
listeners: {
// Note: the z-index defaults to 1 so we have to watch for the expand and update thes x-index
// so that the drop down stays on top of the menu. Unfortunately extjs sets this with
// a style attribute so we have to do it programatically and not via css.
expand: function(combo) {
combo.list.setZIndex(16000);
}
}
});

this.panel = new Ext.Panel({
items:[this.picker, new Ext.form.Label({html:commonLocale.time}), this.timefield, okButton]
});

Ext.ux.menu.DateTimeItem.superclass.constructor.call(this, this.panel, config);

this.addEvents('select');

this.picker.on("render", function(picker){
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});

};

Ext.extend(Ext.ux.menu.DateTimeItem, Ext.menu.Adapter, {
hideOnClick: false,

onSelect : function(picker, date){
this.fireEvent("select", this, date, picker);
Ext.menu.DateItem.superclass.handleClick.call(this);
},
isValid: function(dateMenuItem) {

var time = dateMenuItem.timefield.getValue();
time = time.replace(/\s+/g,"");

if (!(/^[0-2]?[0-9]:[0-9][0-9]([aApP][mM])?$/.test(time))) {
// an ext alert will cause the menu to disappear when you click
// ok so we have to use a standard javascript alert.
alert(commonLocale.timeMatchError);
return false;
}
return true;
}
});


Ext.ux.menu.DateTimeMenu = function(config){
Ext.menu.DateMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new Ext.ux.menu.DateTimeItem(config);
this.add(di);

this.picker = di.picker;
this.timefield = di.timefield;

this.relayEvents(di, ["select"]);

this.on('beforeshow', function(){
if(this.picker){
this.picker.hideMonthPicker(true);
}
}, this);
};

Ext.extend(Ext.ux.menu.DateTimeMenu, Ext.menu.DateMenu, {});

nadeemshafi9
15 Apr 2009, 12:24 AM
you should stick in a sample config and instanciation in comments for easy time !... ...! so we can test it for you

treadmill
21 May 2009, 11:02 AM
I would love to test this, can you give sample config instantiation?