簡単にズームできる Sch.plugin.HeaderZoom プラグイン
こんにちは、ゼノフィnakamuraです。
この記事は、Bryntum社ブログ
The new Sch.plugin.HeaderZoom plugin for easy zooming
を翻訳したものです。
Ext Scheduler 2.2.17には “Sch.plugin.HeaderZoom” というプラグインが含まれています。これがあれば、素早く選択した時間帯をドラッグアンドドロップでズームインできます。 プラグインそのものはとてもシンプルで、完全なソースコードは次のようになっています:
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(); } }); |
SchedulerPanelでこのプラグインを使うのは次のようにとても簡単です:
1 2 3 4 5 | var scheduler = new Sch.panel.SchedulerGrid({ plugins : [ new Sch.plugin.HeaderZoom() ] }); |
ここで機能を説明するより、 プラグインが動作しているデモ動画をご覧ください。 ここ でライブで試すこともできます。我々のコードベースに役に立つ追加だと思います。