HOME > 開発者向けBLOG > Bryntum >  簡単にズームできる Sch.plugin.HeaderZoom プラグイン

Technology Note 開発者向けBLOG

Bryntum

簡単にズームできる 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()
    ]
});

ここで機能を説明するより、 プラグインが動作しているデモ動画をご覧ください。 ここ でライブで試すこともできます。我々のコードベースに役に立つ追加だと思います。

PAGETOP