The new Sch.plugin.HeaderZoom plugin for easy zooming

We have just released Ext Scheduler 2.2.17 which includes a plugin called “Sch.plugin.HeaderZoom”. This allows you to very quickly zoom in to a selected time span by using drag and drop. The plugin itself is extremely simple, and the full source can be seen below.

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
Ext.define(“Sch.plugin.HeaderZoom”, {
extend : “Sch.util.DragTracker”,
mixins : [ ‘Ext.AbstractPlugin’ ],
alias : ‘plugin.scheduler_headerzoom’,
lockableScope : ‘top’,

scheduler : null,
proxy : null,
headerRegion : null,

init : function (scheduler) {
scheduler.on({
destroy : this.onSchedulerDestroy,
scope : this
});

this.scheduler = scheduler;

scheduler.down(‘timeaxiscolumn’).on({
afterrender : this.onTimeAxisColumnRender,
scope : this
});
},

onTimeAxisColumnRender : function (column) {
this.proxy = column.el.createChild({ cls : ‘sch-drag-selector’ });

this.initEl(column.el);
},

onStart : function (e) {
this.proxy.show();

this.headerRegion = this.scheduler.normalGrid.headerCt.getRegion();
},

onDrag : function (e) {
var headerRegion = this.headerRegion;
var dragRegion = this.getRegion().constrainTo(headerRegion);

dragRegion.top = headerRegion.top;
dragRegion.bottom = headerRegion.bottom;

this.proxy.setRegion(dragRegion);
},

onEnd : function (e) {
if (this.proxy) {
this.proxy.setDisplayed(false);

var scheduler = this.scheduler;
var timeAxis = scheduler.timeAxis;
var region = this.getRegion();
var unit = scheduler.getSchedulingView().timeAxisViewModel.getBottomHeader().unit;
var range = scheduler.getSchedulingView().getStartEndDatesFromRegion(region);

scheduler.zoomToSpan({
start : timeAxis.floorDate(range.start, false, unit, 1),
end : timeAxis.ceilDate(range.end, false, unit, 1)
});
}
},

onSchedulerDestroy : function () {
if (this.proxy) {
Ext.destroy(this.proxy);

this.proxy = null;
}

this.destroy();
}
});
[/crayon]

Using it in your SchedulerPanel is as easy as doing:

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
var scheduler = new Sch.panel.SchedulerGrid({
plugins : [
new Sch.plugin.HeaderZoom()
]
});
[/crayon]

Instead of describing what it does, here’s a short demo video showing it in action. You can also try it out live here. We hope you’ll find it a useful addition to our codebase.

[youtube id=”uKGwxCue3BU” width=”550″ height=”300″]