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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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(); } }); |
Using it in your SchedulerPanel is as easy as doing:
|
1 2 3 4 5 |
var scheduler = new Sch.panel.SchedulerGrid({ plugins : [ new Sch.plugin.HeaderZoom() ] }); |
Instead of describing what it does, here’s a short demo video showing it …