Quote from: Everett at Nov 08, 2010, 06:10 PM
Do you have an example of how to do this? I got a basic date-picker working following this article:
http://www.devarticles.com/c/a/JavaScript/Using-the-EXT-JS-Date-Picker-Widget/3/
but I’m lost at how to do more than that...
Sorry, I missed your post.
Here’s my version of date field. In the end I did not touch the actual DatePicker class but had a wrestle with the date field. The crux is in the onTriggerClick where I added a new JSON store to wander off to the database and retrieve all booked dates. These dates are then marked as disabled, which is standard behaviour of the Date Picker.
When overriding default Ext methods, make sure you inspect the method you override and call the superclass methods as well to prevent eliminating essential initialisation or default behaviour. Where you call the superclass method in your own method depends on what you want to achieve, so there’s no simple rule there.
This is not the finished article; I still need to come back to this and apply some custom styles to the date picker. Right now booked dates are shown using the standard style of DatePicker but I want to apply my own styles. I found the method that actually does this but I’m not too sure where to put my custom styles.
Anyway, hope this helps... feel free to ask if you need further information.
Ext.namespace('Tariffs.form');
Ext.namespace('Tariffs.menu');
Tariffs.form.CalendarField = Ext.extend(Ext.form.DateField, {
cottage: 0,
setCottage : function(value) {
this.cottage = value;
},
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Tariffs.menu.CalendarMenu({
hideOnClick: false,
focusOnSelect: false
});
}
this.onFocus();
// JsonStore fetches booked dates from the backend calendar to register
// as disabled dates with the date picker object.
var dstore = new Ext.data.JsonStore({
url: Tariffs.config.connector_url
,baseParams: {
action: 'mgr/calendar/getinvaliddates'
,cottage: this.cottage
}
,fields: ['invalids']
,root: 'invalids'
,listeners: {
// Wait for load to complete and then process disabled dates
// into date picket.
'load': {fn:function() {
var count = dstore.getCount();
var invalids = [];
for (i=0; i<count; i++) {
var rec = dstore.getAt(i);
invalids[i] = rec.json;
}
if (invalids.length > 0) {
this.setDisabledDates(invalids);
} else {
this.setDisabledDates(null);
}
Ext.apply(this.menu.picker, {
startDay: this.startDay,
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.disabledDatesRE,
disabledDatesText : this.disabledDatesText,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
}, scope:this}
}
});
dstore.load();
},
initComponent : function(){
Ext.form.DateField.superclass.initComponent.call(this);
this.addEvents(
'select'
);
if(Ext.isString(this.minValue)){
this.minValue = this.parseDate(this.minValue);
}
if(Ext.isString(this.maxValue)){
this.maxValue = this.parseDate(this.maxValue);
}
/*this.disabledDatesRE = null;*/
this.initDisabledDays();
},
initDisabledDays : function(){
if(this.disabledDates){
var dd = this.disabledDates,
len = dd.length - 1,
re = "(?:";
Ext.each(dd, function(d, i){
re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
if(i != len){
re += '|';
}
}, this);
this.disabledDatesRE = new RegExp(re + ')');
} else {
this.disabledDatesRE = null;
}
}
});
Ext.reg('calendarfield', Tariffs.form.CalendarField);
Tariffs.menu.CalendarMenu = Ext.extend(Ext.menu.DateMenu, {
initComponent : function(){
this.on('beforeshow', this.onBeforeShow, this);
if(this.strict = (Ext.isIE7 && Ext.isStrict)){
this.on('show', this.onShow, this, {single: true, delay: 20});
}
Ext.apply(this, {
plain: true,
showSeparator: false,
items: this.picker = new Tariffs.CalendarPicker(Ext.applyIf({
internalRender: this.strict || !Ext.isIE,
ctCls: 'x-menu-date-item',
id: this.pickerId
}, this.initialConfig))
});
this.picker.purgeListeners();
Tariffs.menu.CalendarMenu.superclass.initComponent.call(this);
/**
* @event select
* Fires when a date is selected from the {@link #picker Ext.DatePicker}
* @param {DatePicker} picker The {@link #picker Ext.DatePicker}
* @param {Date} date The selected date
*/
this.relayEvents(this.picker, ['select']);
this.on('show', this.picker.focus, this.picker);
this.on('select', this.menuHide, this);
if(this.handler){
this.on('select', this.handler, this.scope || this);
}
}
});
Ext.reg('calendarmenu', Tariffs.menu.CalendarMenu);
Tariffs.CalendarPicker = Ext.extend(Ext.DatePicker, {
initComponent : function(){
Tariffs.CalendarPicker.superclass.initComponent.call(this);
}
});
Ext.reg('calendarpicker', Tariffs.CalendarPicker);
☆ A M B ☆
